-
Table element table
-
Two ways to set column width and alignment
The first type: set the width and align attributes in the cell element td
<!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>
The second: set the width attribute in the col element (column) (each col element corresponds to each column in order), and set the align attribute in the tr element (tr element corresponds to each row in order)
<!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. Form merging
Resume creation case
6 lines and 7 columns of quick writing tr 6>td 7 Finally press the tab key
<!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. Header
A simplified version of a resume case using colgroup to write multiple column attributes :
<!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>
