效果：
image.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--属性border，边框宽度-->
<h3>基础表一：</h3>
<table border="1">
<!-- thead:表头 -->
<thead>
<!-- tr：表示一行 -->
<tr>
<!-- th:表示一列，并且加粗（一般用在表头） -->
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
<br/>
<hr/>
<h3>基础表二：</h3>
<table border="1">
<thead>
<tr>
<!-- 表头合并单元格：1、th或td 横向合并：colspan为占几个 ; 2、纵向合并td：rowspan为占几个 -->
<th colspan="2">表头一</th>
<th>表头三</th>
<th>表头四</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">11</td>
<td rowspan="2">11</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<!-- <td>11</td>-->
<!-- <td>11</td>-->
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
总结：
1、最外围是<table></table>标签
2、表头标签为<thead></thead>；表体为<tbody></tbody>
3、先记行(table row)：<tr></tr>
4、再记列（table data cell）：<td></td>
5、加粗列，一般用在表头（table header cell）：<th></th>
6、表的线条，在table标签中的属性border，值是线条的粗度
7、合并列，也就是横向合并（变宽了），在th或td中使用属性colspan，属性值为合并几个单元格，并且是在同一个tr中会减少th/td（因为横向合并是在一行中进行的）
8、合并行，也就是纵向合并（变瘦了），在td中使用属性rowspan，属性值为合并几个单元格，并且是在下面的tr中会减少td的个数（因为纵向合并是跨行的）
网友评论