HTML 表格基础

）时，它们的默认宽度是父元素的 100%；而表格的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作。

动手练习：创建你的第一个表格

对于表格的理论知识，我们已经说了很多了，所以，让我们来看一个使用的例子，并建立一个简单的表格。

首先，将 blank-template.html 和 minimal-table.css 文件拷贝到你的本地环境上。

每一个表格的内容都包含在这两个标签中：

。在你的 HTML 的 中添加这些内容。

在表格中，最小的内容容器是单元格，是通过 元素创建的（其中“td”代表“table data”）。把下面的内容添加到你的表格标签中：

html我是第一个单元格

如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的：

html我是第一个单元格

我是第二个单元格

我是第三个单元格

我是第四个单元格

你会看到，单元格不会放置在彼此的下方，而是自动与同一行上的其他单元格对齐。每个 元素 创建一个单独单元格，它们共同组成了第一行。我们添加的每个单元格都使行的长度变长。

如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用 元素（其中“tr”代表“table row”）。让我们现在来证实一下。

把你已经创建好的 4 个单元格放入 标签，就像这样：

html

我是第一个单元格

我是第二个单元格

我是第三个单元格

我是第四个单元格

现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 元素来包装，每个单元格的内容都应该写在 中。

结果

这样会产生一个如下所示的表：

我是第一个单元格	我是第二个单元格	我是第三个单元格	我是第四个单元格
第二行，第一个单元格	单元格 2	单元格 3	单元格 4

table {

border-collapse: collapse;

}

td,

th {

border: 1px solid black;

padding: 10px 20px;

}

备注：你也可以在 GitHub 中查看 simple-table.html（也可以查看在线示例）。

使用 元素添加标题

现在，让我们把注意力转向表格标题，位于行或列开头的特殊单元格，定义了行或列包含的数据类型（例如，本文第一个示例中的“人员”和“年龄”单元格）。为了说明它们为什么这么有用，来看下面这个例子，首先是源代码：

html

	诺基	弗洛尔	艾拉	胡安
品种	杰克罗斯犬	贵宾犬	流浪犬	可卡犬
年龄	16	9	10	5
主人	岳母	我	我	嫂子
饮食习惯	吃掉所有人的剩菜	啃咬食物	吃得多	吃到爆炸为止

table {

border-collapse: collapse;

}

td,

th {

border: 1px solid black;

padding: 10px 20px;

}

这是表格实际呈现的效果：

这里的问题是：虽然你可以弄清楚发生了什么，但是尽可能的交叉参考数据并不容易。如果列和行的标题以某种方式出现，那将会更好。

动手练习：表格标题

让我们来改进这个表格。

首先，把 dogs-table.html 和 minimal-table.css 文件保存到你的本地环境，HTML 文件包含上文你看到的几种狗的数据。

为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 元素（其中“th”代表“table header”），用法和 是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件，将表格中应该是标题的 元素标记的内容，都改为用 元素标记。

保存你的 HTML 文件，然后在浏览器中加载，然后你应该会看到，现在的标题更像标题了。

备注：你可以在 GitHub 中找到完成的版本 dogs-table-fixed.html（也可以查看在线示例）。

为什么标题是有用的？

我们已经给出了部分答案，当标题明显突出的时候，你可以更加简单地找到你想找的数据，设计上也会看起来更好。

备注：即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。

表格标题也有额外的好处，随着 scope 属性（我们将在下一篇文章中了解到），这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。

允许单元格跨越多行和列

有时候希望单元格跨越多行或多列。下面是一个显示常见动物名字的简单示例。在某些情况下，希望在动物名称旁边显示雄性和雌性的名称。有时候又不需要，这种情况下，只希望动物名称横跨整个表格。

一开始的标记写法是这样的：

html

动物
河马
马	公马
母马
鳄鱼
鸡	母鸡
公鸡

table {

border-collapse: collapse;

}

td,

th {

border: 1px solid black;

padding: 10px 20px;

}

但是输出的结果不是我们想要的：

需要一个方法，让“动物”、“河马”和“鳄鱼”横跨两列，让“马”和“鸡”竖跨两行。幸好，表格中的标题和单元格有 colspan 和 rowspan 属性，可以实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，colspan="2" 会使单元格横跨两列。

让我们使用 colspan 和 rowspan 来改进现有的表格。

首先，把 animals-table.html 和 minimal-table.css 文件复制到你的本地环境，HTML 文件中包含了你刚才看到的动物示例的数据。

接着，使用 colspan 让“动物”、“河马”和“鳄鱼”横跨两列。

最后，使用 rowspan 让“马”和“鸡”竖跨两行。

保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。

备注：你也可以在 GitHub 上找到完成的版本 animals-table-fixed.html（也可以查看在线示例）。

为表格中的列提供共同的样式

不使用 应用样式

在继续阅读之前，我们将在本文介绍最后一个特性。HTML 有一种为整列数据的定义样式信息的方法：就是 和 元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 或 上定义样式，或者使用一个复杂的选择器，比如 :nth-child()。

备注：这样设计列的样式仅限于几个属性：border、background、width 和 visibility。要设置其他属性，必须对列中的每个 或 进行样式设置，或者使用复杂的选择器，如 :nth-child。

下面是一个简单的示例：

html

数据 1	数据 2
加尔各答	橙汁
机器人	爵士乐

下面就是上述代码的结果：

这并不理想，因为必须在列中的所有三个单元格中重复样式信息（在实际项目中，可能会在所有单元格中设置一个 class，并在单独的样式表中指定样式）。

使用 应用样式

可以在 元素上一次性指定信息，而不是像上面这样做。 容器就在开始标记

下面，元素在 容器内指定。可以通过如下方式指定表格，来创建与上述相同的效果：

html

数据 1	数据 2
加尔各答	橙汁
机器人	爵士乐

定义了两个“样式列”，其中一个为第二列每列指定样式信息。没有为第一列设计样式，但仍必须包含一个空白的 元素，否则样式将只应用于第一列。

如果想将样式信息应用于两列，只需包含一个带有 span 属性的 元素即可，就像这样：

html

就像 colspan 和 rowspan 一样，span 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。

备注：如果表格、列和列中的单元格都是单独样式化的，那么应用于单元格的样式将绘制在列样式之上，而列样式将绘制在表格之上。这是因为先渲染表格层，然后渲染列层，单元格层渲染在所有其他表格层之上。

动手练习：colgroup 和 col

又到了需要你自己独立完成的时间了。

下面是一位语言教师的课程表。星期五，她有一门新的课程，全天教授荷兰语，但她也在周二和周四教授几节德语课。她希望突出显示包含她授课天数的栏目。

通过下面这些步骤来重构这个表格。

首先，把 timetable.html 文件复制到你的本地环境。这个 HTML 文件包含你在上文中看到的表格，不过是减去样式信息的。

在表格的顶部添加一个 元素，就放在

标签下面，可以添加 元素（继续看下面剩余的步骤）。

第一列和第二列不需要应用样式。

为第三列添加一个背景颜色。style 属性是 background-color:#97DB9A;

为第四列设置一个独立的宽度，style 属性是 width: 100px;

为第五列添加一个背景颜色。style 属性是 background-color: #97DB9A;

为第六列添加不同的背景颜色和边框，表示这是一个特殊的日子，她要教一门新课。style 属性是 background-color:#DCC48E; border:4px solid #C1437A;

最后两天是休息日，所以只需将它们设置为无背景颜色，但需要设置宽度；style 属性是 width: 100px;

看看你是否能完成这个示例，如果你遇到了困难，或想要核对你完成的作品，你可以在 GitHub 上找到完成的版本 timetable-fixed.html（也可以查看在线示例）。

总结

本章节仅仅包含了 HTML 表格的基础。在下一篇文章中，我们将介绍一些表格进阶特性，并开始考虑方便视力障碍的人士的访问。

上一页 概述：使用 HTML 构建 Web 下一页

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何参与贡献

此页面最后更新于 2025年11月3日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题