(004)—表格
注：table表示、tr行、td列
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!---
border="1px" 边框 设置表格的边框为1像素宽度。
width 宽度
height 高度
align 对齐方式
-->
<center><h1>员工信息表</h1></center>
<hr color="red" width=34%>
<table align="center" border="1px" width="20%" height="120px">
<tr align="center"> <!--行-->
<td>a</td> <!---列--->
<td>b</td>
<td>c</td>
</tr>
<tr> <!--行-->
<td>e</td> <!---列--->
<td>f</td>
<td>g</td>
</tr>
<tr> <!--行-->
<td>x</td> <!---列--->
<td>y</td>
<td>z</td>
</tr>
</table>
</body>
</html>
结果：
(005)—表格单元格合并,以及th标签
<!doctype html>
<!--注意：
1.行row合并，删除下面的行
2.列col合并，对删除哪一个没要求
-->
<html>
<head>
<meta charset="UTF-8">
<title>表格单元格合并,以及th标签</title>
</head>
<body>
<center><h1>员工信息表</h1></center>
<hr color="red" width=34%>
<table align="center" border="1px" width="20%" height="120px">
<tr align="center">
<!--th标签也是单元格标签，比td多的是居中、加粗-->
<th>员工编号</td> <!---列--->
<th>员工薪资</td>
<th>部门名称</th>
</tr>
<tr align="center"> <!--行-->
<td>a</td> <!---列--->
<td>b</td>
<!--再添加rowspan="数字"-->
<td rowspan="2">cg</td>
</tr>
<tr> <!--行-->
<td>e</td> <!---列--->
<td>f</td>
<!--先删除某一行<td>g</td>-->
</tr>
<tr> <!--行-->
<td>x</td> <!---列--->
<td colspan="2">yz</td>
</tr>
</table>
</body>
</html>
结果：
(006)—thead tbody tfoot(表头、表身、表脚)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写</title>
</head>
<body>
<center><h1>员工信息表</h1></center>
<hr color="red" width=34%>
<table align="center" border="1px" width="20%" height="120px">
<thead> <!-头->
<tr>
<th>员工编号</td>
<th>员工薪资</td>
<th>部门名称</th>
</tr>
</thead>
<tbody> <!-身->
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">cg</td>
</tr>
</tbody>
<tr>
<td>e</td>
<td>f</td>
</tr>
<tfoot> <!-脚->
<tr>
<td>x</td>
<td colspan="2">yz</td>
</tr>
</tfoot>
</table>
</body>
</html>
结果：
