一、表格简介
在过去的
web1.0时代，表格常用于页面布局。但在web2.0中，这种用表格的页面布局方式已经被抛弃，现在的网页布局都是使用CSS来实现的。但是表格并不是一无是处，表格在实际开发中是用得非常多的，因为使用表格可以更清晰地排列数据。
二、表格基本结构
在 HTML 中，一个表格一般会由以下三部分组成：
- 表格：
table标签
- 行：
tr标签
- 单元格：
td标签
1.语义
tr 指的是 table row（表格行）。
td 指的是 table data cell（表格单元格）。
<table></table>表示整个表格的开始和结束。
<tr></tr>表示行的开始和结束。在表格中，有多少组<tr></tr>就有多少行。
<td></td>表示单元格的开始和结束。
三、表格完整结构
一个表格的完整结构，不仅仅只有
table、tr、td这三个，还应包括caption、th、thead、tbody、tfoot。
1.caption-表格标题
在
HTML中，表格一般都会有且只有一个标题，通过使用caption标签来实现，也就是说一个表格中只有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。
（1）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style type="text/css">
table,tr,td{
border: 1px solid #00FFFF; /*为表格加上边框，默认是没有边框的*/
}
</style>
</head>
<body>
<table>
<caption>見贤思齊</caption> <!--这是表格标题-->
<tr> <!--这是表行-->
<td>君初见</td> <!--这是表格单元格-->
<td>初见</td>
</tr>
<tr>
<td>王小淘</td>
<td>小淘</td>
</tr>
</table>
</body>
</html>
2.th-表头单元格
之前我们通过学习知道，td指的是 table data cell（表格单元格）。
但在
HTML中，单元格其实有两种：
- th 指的是table header cell（表头单元格）。
- td 指的是table data cell（表行单元格）。
（1）语法
<table>
<caption>表格标题</caption> <!--这是表格标题-->
<tr> <!--这是表行-->
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
</table>
（2）th和td区别
th 和 td在本质上都是单元格，但是并不代表两者可以互换。它们之间具体有以下两种区别：
- 显示上：浏览器会以粗体和居中来显示
th 标签中的内容，但是td 标签不会。
- 语义上：
th标签用于表头；td标签用于表行。当然，对于表头单元格，我有可能会使用 td 来代替 th，但不建议这样做。
因为在
HTML语义化中了解到：学习HTML的目的就是在需要的地方使用恰当的标签（也就是语义化）。
四、语义化
在这之前我们已经学习了
table、caption、tr、th (表头单元格)、td (表行单元格)。为了更深入地对表格进行语义化，HTML引入了
thead、tbody、tfoot这三个标签。
thead、tbody、tfoot将表格划分为 3 部分：表头、表身、表脚。有了这三个标签，使得表格语义变得更加良好，结构更清晰，也更具可读性和可维护性。
1.语法
<table>
<caption>表格标题</caption>
<thead> <!--表头-->
<tr> <!--这是表行-->
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
（1）实际开发
tfoot表脚往往用于统计数据。对于thead、tbody、tfoot这 3 个标签，不一定全部都用上，比如：tfoot就很少用。一般情况下，根据实际需求来使用这 3 个标签。
① 重要性
thead、tbody、tfoot是表格中非常重要的标签，它们从语义上区分了表头、表身、表脚，这使得代码更具语义，千万不要忽视了它们。
- 此外，还有一个重要作用：方便分块来控制表格的
CSS样式。
Ⅰ.总结
对于表格的显示效果来说，
thead、tbody、tfoot这三个标签加上后和没加之前的效果是一样的，那为何还用使用呢？单纯只从显示效果来说，确实加与不加效果都差不多，但是加上之后会让你的代码更具逻辑性，并且还可以很好地结合
CSS来分块控制样式。
五、rowspan-合并行
在
HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，就是将纵向的N个单元格合并成一个。（也可简单理解为上下合并）
1.语法
<td rowspan="跨越的行数"></td>
（1）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style>
table,tr,td,th{
border: 1px solid #66A9FE;
}
</style>
</head>
<body>
<table>
<caption>合并行</caption>
<thead>
<tr>
<th>
姓名：
</th>
<th>
王小淘
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">喜欢的水果：</td>
<td>菠萝</td>
</tr>
<tr>
<td>其它全部水果</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--
可以尝试下，把rowspan="2"删除后的效果是什么样的。
rowspan="2"实际上是让加上rowspan属性的这个td标签跨越两行。
-->
合并行例1.png
六、colspan-合并列
在
HTML中，我们可以使用colspan属性来合并列。所谓的合并列，就是将横向的N个单元格合并成一个。（也可简单理解为左右合并）
1.语法
<td colspan="跨越的列数"></td>
（1）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style>
table,tr,td,th{
border: 1px solid #00FFFF;
}
</style>
</head>
<body>
<table>
<caption>合并列</caption>
<thead> <!--表头-->
<tr>
<th>
姓名
</th>
<th>
数学
</th>
<th>
英语
</th>
<th>
政治
</th>
<th>
专业课
</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>王小淘</td>
<td>100</td>
<td>80</td>
<td>80</td>
<td>110</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>总成绩</td>
<td colspan="4">370</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!--
可以尝试下，把colspan="4"删除后的效果是什么样的。
colspan="4"实际上是让加上colspan属性的这个td标签跨越 4 行。
-->
合并列例1.png
2.实际开发
在实际开发中，合并行与合并列用的很少，忘了的话回过头来看一眼。
对于
rowspan 和 colspan，要从语义上去理解，rowspan表示row span，colspan表示column span。
网友评论