一、表格标签简介
二、表格标签基本格式及示例
三、表格标签相关属性
表格边框border
表格边框属性border-collapse
表格边框属性cellspacing和cellpadding
表格内容居中显示text-align
四、表格的跨行与跨列显示
跨列合并
跨行合并
一、表格标签简介
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作<table></table>。
每个表格分为表格标题（由 <thead> 标签定义），以及表格单元格（由 <tbody> 标签定义），表格标题和表格身体中均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题，其中标题行（<th>）会有默认加粗的效果。
此外，表格还可以包括<caption>（用于描述表格）、<tfoot>（用于页脚内容进行分组）等标签。
二、表格标签基本格式及示例
一个表格标签的基本格式如下：
<!-- 基本格式 --> <table> <!-- 表格标题 --> <caption>表格描述</caption> <!-- 表头 --> <thead> <tr> <th>表头内容（列标题1）</th> <th>表头内容（列标题2）</th> <th>表头内容（列标题3）</th> </tr> </thead> <!-- 表格内容 --> <tbody> <tr> <td>单元格内容（第一行第一列）</td> <td>单元格内容（第一行第二列）</td> <td>单元格内容（第一行第三列）</td> </tr> <tr> <td>单元格内容（第二行第一列）</td> <td>单元格内容（第二行第二列）</td> <td>单元格内容（第二行第三列）</td> </tr> <tr> <td>单元格内容（第三行第一列）</td> <td>单元格内容（第三行第二列）</td> <td>单元格内容（第三行第三列）</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot> <tr> <td>单元格内容..</td> </tr> </tfoot> </table>
上述代码运行效果如下：
接着，以下图的表格为例，第一行（序号、姓名、班级、成绩）为表格标题，也就是表头<thead>标签包裹的内容，表头的<tr>标签中包括五个<th>标签，也就是五个表头标题。而下面表格内容部分由表身体<tbody>标签包裹，表内容共有四行，也就是有四个<tr>标签，表格包括五个属性，所以每一行应该有五个单元格，也就是有五个<td>标签。
写为代码应该如下：
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>班级</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>101</td> <td>男</td> <td>90</td> </tr> <tr> <td>2</td> <td>李四</td> <td>101</td> <td>男</td> <td>85</td> </tr> <tr> <td>3</td> <td>小丽</td> <td>102</td> <td>女</td> <td>70</td> </tr> <tr> <td>4</td> <td>小敏</td> <td>103</td> <td>女</td> <td>60</td> </tr> </tbody> </table>
三、表格标签相关属性
在上述基本代码运行后，我们会在浏览器中看见下图的结果，此时没有对表格进行任何的修饰，所以我们不能看见边框，以及表格之间的间距。
表格边框border
border属性可以给表格设置边框，常写为形如以下的格式，其中1px表示边框的粗细，solid表示实线，#000表示边框的颜色，border属性还包括其他许多属性的值，此处不展开说明。
border: 1px solid #000;
我们选中table，也就是整个表格（一般不推荐，因为一个网页中可能有多个表格，此处只是为了方便演示） ，添加border属性，查看效果。
此时可以看见表格外部已经有了边框线，我们可以继续给<th>、<td>标签加上边框，整体代码如下：
table { border: 1px solid #000; } th { border: 1px solid red; } td { border: 1px solid blue; }
运行效果如下图，可以看到表头标题的边框颜色是红色，也就是<th>标签选中的颜色，单元格的边框颜色是蓝色，也就是<td>标签选中的颜色，而外边框是黑色，也就是表格<table>选中的颜色。
此时的表格并不美观，通常情况下，我们只设置一个边框的颜色，如：
table { border: 1px solid #000; } th, td { border: 1px solid #000; }
效果如下：
这样也不美观，进一步地，我们需要将边框线合并，也就是只留下一条边框。
表格边框属性border-collapse
通常使用边框的collapse属性进行边框合并， 如果没有如果没有设置边框合并，边框线条会重叠。
设置边框合并border-collapse属性，选中table之后进行设置（因为边框线一般都需要合并，所以此处可以选中全局的table标签），代码如下：
table { border-collapse: collapse; }
设置后效果如下：
表格边框属性cellspacing和cellpadding
cellspacing用于设置表格中单元格与单元格之间的距离，cellpadding用于设置表格中内容与边框之间的间距，可以用于撑开表格的内容。
设置表格的cellspacing、cellpadding属性的代码示例如下：
<table cellspacing="10" cellpadding="10"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>班级</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>101</td> <td>男</td> <td>90</td> </tr> <tr> <td>2</td> <td>李四</td> <td>101</td> <td>男</td> <td>85</td> </tr> <tr> <td>3</td> <td>小丽</td> <td>102</td> <td>女</td> <td>70</td> </tr> <tr> <td>4</td> <td>小敏</td> <td>103</td> <td>女</td> <td>60</td> </tr> </tbody> </table>
给前面的表格设置cellspacing属性为10，效果如下：
若设置cellspacing为0，效果如下，可以看到表格进行了合并，边框线变粗。
给前面的表格设置cellpadding属性为10，效果如下：
而cellpadding属性为0则无变化：
可以看到设置cellpadding属性为10撑开单元格内容，同时，也可以直接设置th或者td的宽高，CSS代码如下（HTML代码不变）：
th, td { border: 1px solid #000; width: 100px; height: 20px; }
效果如下：
此外，还可以设置表格中的单元格内容居中显示，只需要设置text-align属性即可。
表格内容居中显示text-align
居中显示设置th、td中的text-align属性为center，此外还可以设置为left或者right，即居左或居右。
text-align: center;
设置后效果如下：
四、表格的跨行与跨列显示
一般情况下，我们在使用表格工具时候可能会见到以下场景：
在这个场景下，n*n的单元格已经无法满足我们的布局需求，此时我们需要“合并”某些单元格，可能是跨行（将n个行合并）或者跨列（将m个列合并）
rowspan属性用于跨行合并，colspan属性用于跨列合并，一般将这两个属性写在某个<th>/<td>标签中，也就是单元格标签中。
以下图表格为例，我们可以看出这个表格是由四行、三个单元格组成的，其中头像这一个单元格跨了姓名、年龄、电话三列，需要进行跨列合并；居住地址后的一个单元格跨了上面的两个行，需要进行跨行合并。
跨列合并
头像需要占满三列，我们进行将colspan属性设置为3，代码如下：
<tbody> <tr> <td>姓名</td> <td></td> <td rowspan="3" style="text-align: center;">头像</td> </tr> <tr> <td>年龄</td> <td></td> </tr> <tr> <td>电话</td> <td></td> </tr> </tbody>
跨行合并
居住地址的后面单元格是需要进行跨行两行合并的，我们进行将rowspan属性设置为2，代码如下：
<tbody> <tr> <td>姓名</td> <td></td> <td rowspan="3" style="text-align: center;">头像</td> </tr> <tr> <td>年龄</td> <td></td> </tr> <tr> <td>电话</td> <td></td> </tr> <tr> <td>居住地址</td> <td colspan="2"></td> </tr> </tbody>
效果如下：
