一、表格标签简介

二、表格标签基本格式及示例

三、表格标签相关属性

表格边框border

表格边框属性border-collapse

表格边框属性cellspacing和cellpadding

表格内容居中显示text-align

四、表格的跨行与跨列显示

跨列合并

跨行合并

一、表格标签简介

HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作

。

每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。

此外，表格还可以包括（用于描述表格）、（用于页脚内容进行分组）等标签。

二、表格标签基本格式及示例

一个表格标签的基本格式如下：

表格描述

表头内容（列标题1）	表头内容（列标题2）	表头内容（列标题3）
单元格内容（第一行第一列）	单元格内容（第一行第二列）	单元格内容（第一行第三列）
单元格内容（第二行第一列）	单元格内容（第二行第二列）	单元格内容（第二行第三列）
单元格内容（第三行第一列）	单元格内容（第三行第二列）	单元格内容（第三行第三列）
单元格内容..

上述代码运行效果如下：

接着，以下图的表格为例，第一行（序号、姓名、班级、成绩）为表格标题，也就是表头标签包裹的内容，表头的标签中包括五个标签，也就是五个表头标题。而下面表格内容部分由表身体标签包裹，表内容共有四行，也就是有四个标签，表格包括五个属性，所以每一行应该有五个单元格，也就是有五个标签。

写为代码应该如下：

序号	姓名	班级	性别	成绩
1	张三	101	男	90
2	李四	101	男	85
3	小丽	102	女	70
4	小敏	103	女	60

三、表格标签相关属性

在上述基本代码运行后，我们会在浏览器中看见下图的结果，此时没有对表格进行任何的修饰，所以我们不能看见边框，以及表格之间的间距。

表格边框border

border属性可以给表格设置边框，常写为形如以下的格式，其中1px表示边框的粗细，solid表示实线，#000表示边框的颜色，border属性还包括其他许多属性的值，此处不展开说明。

border: 1px solid #000;

我们选中table，也就是整个表格（一般不推荐，因为一个网页中可能有多个表格，此处只是为了方便演示） ，添加border属性，查看效果。

此时可以看见表格外部已经有了边框线，我们可以继续给、标签加上边框，整体代码如下：

table {

border: 1px solid #000;

}

th {

border: 1px solid red;

}

td {

border: 1px solid blue;

}

运行效果如下图，可以看到表头标题的边框颜色是红色，也就是标签选中的颜色，单元格的边框颜色是蓝色，也就是标签选中的颜色，而外边框是黑色，也就是表格

选中的颜色。

此时的表格并不美观，通常情况下，我们只设置一个边框的颜色，如：

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属性的代码示例如下：

序号	姓名	班级	性别	成绩
1	张三	101	男	90
2	李四	101	男	85
3	小丽	102	女	70
4	小敏	103	女	60

给前面的表格设置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属性用于跨列合并，一般将这两个属性写在某个/标签中，也就是单元格标签中。

以下图表格为例，我们可以看出这个表格是由四行、三个单元格组成的，其中头像这一个单元格跨了姓名、年龄、电话三列，需要进行跨列合并；居住地址后的一个单元格跨了上面的两个行，需要进行跨行合并。

跨列合并

头像需要占满三列，我们进行将colspan属性设置为3，代码如下：

姓名

头像

年龄

电话

跨行合并

居住地址的后面单元格是需要进行跨行两行合并的，我们进行将rowspan属性设置为2，代码如下：

姓名

头像

年龄

电话

居住地址

效果如下：