-
表格元素table
-
设置列宽和对齐的两种方法
第一种:在单元格元素td里面设置width 和align属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2px" cellspacing="0" cellpadding="">
<tr>
<td align="center" width="100px">星期</td>
<td align="center" width="150px">星期一</td>
<td align="center" width="150px">星期二</td>
<td align="center" width="150px">星期三</td>
<td align="center" width="150px">星期四</td>
<td align="center" width="150px">星期五</td>
<td align="center" width="150px">星期六</td>
<td align="center" width="150px">星期日</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">Monday</td>
<td align="center">Tuesday</td>
<td align="center">Wednesday</td>
<td align="center">Thursday</td>
<td align="center">Friday</td>
<td align="center">Saturday</td>
<td align="center">Sunday</td>
</tr>
</table>
</body>
</html>
第二种:在col元素(列)中设置width属性(每一个col元素按次序对应每一列),在tr元素中设置align属性(tr元素按次序对应每一行)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="0" cellpadding="">
<col width="150px">
<col width="200px">
<tr align="center">
<td >星期</td>
<td >星期一</td>
<td >星期二</td>
<td >星期三</td>
<td >星期四</td>
<td >星期五</td>
<td >星期六</td>
<td >星期日</td>
</tr>
<tr align="center">
<td align="center"></td>
<td align="center">Monday</td>
<td align="center">Tuesday</td>
<td align="center">Wednesday</td>
<td align="center">Thursday</td>
<td align="center">Friday</td>
<td align="center">Saturday</td>
<td align="center">Sunday</td>
</tr>
</table>
</body>
</html>
3. 表格合并
简历制作案例
6行7列表格的快速写法tr6>td7 最后按下tab键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="200px">
<col width="200px">
<tr height="20px" align="center">
<td colspan="7">简历</td> <!--合并横向7个单元格-->
</tr>
<tr height="20px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td> <!--合并纵向4个单元格-->
</tr>
<tr height="20px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
4. 表头
- 用colgroup写入多个列属性
简历案例的简化版:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<colgroup span="5" width="100px"></colgroup>
<colgroup span="2" width="200px"></colgroup>
<tr height="20px" align="center">
<th colspan="7">简历</td> <!--合并横向7个单元格-->
</tr>
<tr height="20px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td> <!--合并纵向4个单元格-->
</tr>
<tr height="20px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>