试一试
Front-end web developer course 2021
| Person |
Most interest in |
Age |
| Chris |
HTML tables |
22 |
| Dennis |
Web accessibility |
45 |
| Sarah |
JavaScript frameworks |
29 |
| Karen |
Web performance |
36 |
| Average age |
33 |
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
thead,
tfoot {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
tfoot th {
text-align: right;
}
tfoot td {
font-weight: bold;
}
属性
此元素包含全局属性。
已弃用属性
以下属性已弃用，不应使用。它们仅在更新现有代码时作为参考和出于历史兴趣而在此处记录。
align 已弃用
指定表格在其父元素中的水平对齐方式。可能的枚举值包括left、center和right。请改用margin-inline-start和margin-inline-end CSS 属性，因为此属性已弃用。
bgcolor 已弃用
定义表格的背景颜色。该值是 HTML 颜色；可以是带#前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS 值。请改用background-color CSS 属性，因为此属性已弃用。
border 已弃用
定义围绕表格的框架大小（以像素为单位的非负整数值）。如果设置为0，则frame属性将设置为空。请改用border CSS 属性，因为此属性已弃用。
cellpadding 已弃用
定义单元格内容与其边框之间的空间。此属性已过时：请改用将padding CSS 属性应用于
和 | 元素。
cellspacing 已弃用
定义两个单元格之间空间的尺寸。此属性已过时：请改用在 元素上设置border-spacing CSS 属性。请注意，如果元素的border-collapse CSS 属性设置为collapse，则此属性无效。
frame 已弃用
定义必须显示表格周围框架的哪一侧。可能的枚举值包括void、above、below、hsides、vsides、lhs、rhs、box和border。请改用border-style和border-width CSS 属性，因为此属性已弃用。
rules 已弃用
定义表格中规则（边框）的显示位置。可能的枚举值包括none（默认值）、groups（、 和元素）、rows（水平线）、cols（垂直线）和all（每个单元格周围的边框）。请改用在适当的表格相关元素以及本身上设置border CSS 属性，因为此属性已弃用。
summary 已弃用
定义总结表格内容的替代文本。请改用 元素，因为此属性已弃用。
width 已弃用
指定表格的宽度。请改用width CSS 属性，因为此属性已弃用。
注意：虽然 HTML 规范中不包含height作为 属性，但某些浏览器支持对height的非标准解释。无单位值设置最小绝对高度（以像素为单位）。如果设置为百分比值，则最小表格高度将相对于父容器的高度。请改用min-height CSS 属性，因为此属性已弃用。
表格内容的视觉布局
以下元素是表格结构的一部分
|
|
|
|
框建立了一个表格格式化上下文。内的元素根据以下规则生成矩形框
行框按照源代码顺序从上到下填充表格。每个行框占据一列单元格。
行组框占据一个或多个行框。
列框按照源代码顺序彼此相邻放置。根据dir属性的值，列从左到右或从右到左排列。列框占据一个或多个表格单元格列。
列组框占据一个或多个列框。
单元格框可以跨越多个行和列。用户代理会修剪单元格以适应可用的行和列数。
表格单元格具有内边距。构成表格的框没有外边距。
表格图层和透明度
出于样式目的，表格元素可以被认为是放置在六个叠加层上
仅当其上方的图层具有透明背景时，一个图层上设置的元素背景才可见。缺失的单元格将像一个匿名表格单元格框占据该位置一样呈现。
无障碍
标题
通过提供一个清晰简洁地描述表格用途的 元素，可以帮助人们决定是否需要查看表格的其余内容或跳过它。
这有助于借助辅助技术（如屏幕阅读器）进行导航的人、视力低下者以及有认知障碍的人。
MDN 使用 为表格添加标题
标题和摘要 • 表格 • W3C WAI Web 可访问性教程
作用域行和列
在简单上下文中，表头单元格（ 元素）上的scope属性是多余的，因为作用域是推断出来的。但是，某些辅助技术可能无法进行正确的推断，因此指定表头作用域可以改善用户体验。在复杂的表格中，可以指定scope以提供有关与表头相关的单元格的必要信息。
MDN 表格可访问性指南
带有两个表头的表格 • 表格 • W3C WAI Web 可访问性教程
带有不规则表头的表格 • 表格 • W3C WAI Web 可访问性教程
H63：在数据表格中使用 scope 属性关联表头单元格和数据单元格 | W3C WCAG 2.0 技术
复杂表格
屏幕阅读器等辅助技术可能难以解析过于复杂的表格，因为表头单元格无法以严格的水平或垂直方式关联。这通常由colspan和rowspan属性的存在表示。
理想情况下，考虑其他方式呈现表格内容，包括将其分解为一组更小的、相关的表格，这些表格不必依赖使用colspan和rowspan属性。除了帮助使用辅助技术的人理解表格内容外，这还可能使有认知障碍的人受益，他们可能难以理解表格布局所描述的关联。
如果表格无法拆分，请结合使用id和headers属性，以编程方式将每个表格单元格与其关联的表头（ | 元素）关联起来。
MDN 表格可访问性指南
带有多级表头的表格 • 表格 • W3C WAI Web 可访问性教程
H43：使用 id 和 headers 属性将数据单元格与数据表格中的表头单元格关联 | W3C WCAG 2.0 技术
示例
以下示例包含复杂性逐步增加的表格。另请参阅我们的初学者表格样式指南，了解表格样式信息，包括常见且有用的技术。
由于 的结构涉及使用多个表格相关的 HTML 元素以及各种关联属性，因此以下示例旨在提供一个涵盖基础知识和常见标准的简化解释。可以在相应的链接页面上找到更多详细信息。
这些表格示例演示了如何创建使用 HTML 构建并使用 CSS 样式化的可访问表格。
由于 HTML 表格的结构方式，标记可能会迅速增长。因此，明确定义表格的用途和最终外观以创建适当的结构非常重要。使用语义标记开发的逻辑结构不仅更容易设置样式，而且能够创建有用且可访问的表格，所有人都（包括搜索引擎和辅助技术用户）都能理解和导航。
第一个例子是基础的，随后的例子复杂性逐渐增加。首先，我们将为表格开发一个非常基本的 HTML 表格结构。前两个例子不包含定义的头部、主体或底部等表格分区组，不涉及单元格跨越或明确定义的单元格关系。甚至没有提供标题。在我们完成这些例子时，它们将逐步增强以包含复杂数据表格应具备的所有表格特性。
基本表格
此示例包含一个非常基本的表格，有三行两列。为了演示默认浏览器表格样式，此示例中未包含任何 CSS。
HTML
表格行由 元素定义，列由其中的表头和数据单元格定义。第一行包含用作数据单元格（| 元素）列标题的表头单元格（ | 元素）。每行中的每个元素（ | 或 | ）都位于其各自的列中——即，一行中的第一个元素位于第一列，该行中的第二个元素位于第二列。
html
| Name |
Age |
| Maria Sanchez |
28 |
| Michael Johnson |
34 |
结果
此表格未应用自定义 CSS 或 用户样式表。样式结果纯粹来自 用户代理样式表。
带表头单元格的扩展表格
此示例扩展了基本表格，扩展了内容并添加了基本的 CSS 样式。
HTML
该表格现在包含四行（ | 元素），每行有四列。第一行是表头单元格行（第一行只包含| 元素）。随后的行包括一个表头列（ | 元素作为每行的第一个子元素）和三个数据列（ | 元素）。由于未使用表格分区元素，浏览器会自动定义内容组结构，即所有行都包含在隐式 | 元素的表格主体中。
html
| Name |
ID |
Member Since |
Balance |
| Margaret Nguyen |
427311 |
|
0.00 |
| Edvard Galinski |
533175 |
|
37.00 |
| Hoshi Nakamura |
601942 |
|
15.00 |
CSS
使用 CSS，我们提供了基本样式，在表格组件周围创建线条，以使数据结构更清晰。CSS 在 周围和表格的每个单元格周围添加了一个实心边框，包括那些用| 和 | 元素指定的单元格，从而划分每个表头和数据单元格。
csstable {
border: 2px solid rgb(140 140 140);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
结果
指定表格单元格关系
在以更高级的方式扩展表格之前，建议通过定义表头和数据单元格（ | 和 | 元素）之间的关系来提高可访问性。
HTML
这通过在 | 元素上引入scope属性并将其值设置为相应的col（列）或row值来完成。
html
| Name |
ID |
Member Since |
Balance |
| Margaret Nguyen |
427311 |
|
0.00 |
| Edvard Galinski |
533175 |
|
37.00 |
| Hoshi Nakamura |
601942 |
|
15.00 |
CSS 和视觉结果不变——该适配为屏幕阅读器等辅助技术提供了有价值的上下文信息，以帮助识别表头与哪些单元格相关。
注意：如果表格结构更复杂，在 | 和 | 元素上（额外）使用headers属性可以改善可访问性并帮助辅助技术识别单元格之间的关系；请参阅复杂表格。
明确指定表格分区组
除了通过指定单元格关系来提高可访问性之外，还可以通过引入表格分区组来改进表格的语义。
HTML
由于第一行（ | 元素）只包含列标题单元格并为表格其余内容提供标题，因此可以将其包含在元素中，以明确指定该行作为表格的头部。此外，浏览器自动完成的内容也可以明确定义——表格的主体部分，包含表格的主要数据，通过将相应的行包含在 元素中来指定。明确使用元素有助于浏览器创建预期的表格结构，避免不需要的结果。
html
| Name |
ID |
Member Since |
Balance |
| Margaret Nguyen |
427311 |
|
0.00 |
| Edvard Galinski |
533175 |
|
37.00 |
| Hoshi Nakamura |
601942 |
|
15.00 |
再次强调，CSS 和视觉效果不变——指定此类表格分区组为辅助技术（包括屏幕阅读器和搜索引擎）以及 CSS 中的样式提供了有价值的上下文信息，这将在后续示例中展示。
列和行跨越
在此示例中，我们通过添加一列并引入多行头部部分来进一步扩展表格。
HTML
在迄今为止创建的表格基础上，在每个主体行中添加了一个新的“会员结束日期”列，使用 元素。在头部部分（元素）内还添加了一行（元素），以引入“会员日期”标题作为“加入”和“取消”列的标题。
第二个标题行的创建涉及向 元素添加colspan和rowspan属性，以将标题单元格分配到正确的列和行。
html
| Name |
ID |
Membership Dates |
Balance |
| Joined |
Canceled |
| Margaret Nguyen |
427311 |
|
n/a |
0.00 |
| Edvard Galinski |
533175 |
|
|
37.00 |
| Hoshi Nakamura |
601942 |
|
n/a |
15.00 |
table {
border: 2px solid rgb(140 140 140);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
结果
头部部分现在有两行，一行包含标题单元格（ | 元素）“姓名”、“ID”、“会员日期”和“余额”，以及一个“会员日期”标题，该标题在第二行中包含两个子标题：“加入”和“取消”。这是通过以下方式实现的
第一行的“姓名”、“ID”和“余额”标题单元格使用rowspan属性跨越了两个表格标题行，使它们各高两行。
第一行的“会员日期”标题单元格使用colspan属性跨越了两列，使其宽度为两列。
第二行只包含“加入”和“取消”这两个表头单元格，因为其他三列与第一行中跨越两行的单元格合并。这两个表头单元格正确地位于“会员日期”表头下方。
表格标题和列摘要
为表格内容提供摘要是一种常见且值得推荐的做法，它可以让用户快速判断表格的相关性。此外，“余额”列通过显示各个成员的余额总和进行汇总。
HTML
通过使用表格标题（ 元素）作为的第一个子元素来添加表格摘要。标题为表格提供了可访问名称或可访问描述。
最后，在表格主体下方添加了一个表格脚注部分（ 元素），其中包含一行，通过显示总和来汇总“余额”列。应用了之前介绍的元素和属性。
html
Status of the club members 2021
| Name |
ID |
Membership Dates |
Balance |
| Joined |
Canceled |
| Margaret Nguyen |
427311 |
|
n/a |
0.00 |
| Edvard Galinski |
533175 |
|
|
37.00 |
| Hoshi Nakamura |
601942 |
|
n/a |
15.00 |
| Total balance |
52.00 |
table {
border: 2px solid rgb(140 140 140);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
结果
基本表格样式
让我们为表格应用基本样式，调整字体并为头部和脚部行添加background-color。这次 HTML 没有变化，所以我们直接来看 CSS。
Status of the club members 2021
| Name |
ID |
Membership Dates |
Balance |
| Joined |
Canceled |
| Margaret Nguyen |
427311 |
|
n/a |
0.00 |
| Edvard Galinski |
533175 |
|
|
37.00 |
| Hoshi Nakamura |
601942 |
|
n/a |
15.00 |
| Total balance |
52.00 |
CSS
虽然这里向 元素添加了font属性以设置更具视觉吸引力的字体（或根据您的个人观点，可能是一种令人厌恶的无衬线字体），但有趣的部分是第二个样式，其中位于和内的元素被样式化，添加了浅蓝色background-color。这是一种快速同时为特定部分中的所有单元格应用背景颜色的方法。
csstable {
border: 2px solid rgb(140 140 140);
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
}
thead > tr,
tfoot > tr {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
}
结果
高级表格样式
现在我们将全力以赴，对标题和正文区域中的行都进行样式设置，包括交替行颜色、根据行内位置的不同颜色单元格等等。这次我们先看看结果。
结果
这是最终表格的外观
HTML 再次没有变化。看到了吗，适当的 HTML 结构准备能带来什么？
Status of the club members 2021
| Name |
ID |
Membership Dates |
Balance |
| Joined |
Canceled |
| Margaret Nguyen |
427311 |
|
n/a |
0.00 |
| Edvard Galinski |
533175 |
|
|
37.00 |
| Hoshi Nakamura |
601942 |
|
n/a |
15.00 |
| Total balance |
52.00 |
CSS
这次 CSS 更加复杂。它不难，但涉及的内容很多。让我们来分解一下。
这里添加了border-collapse和border-spacing属性，以消除单元格之间的间距，并使相互接触的边框合并为一个边框，而不是出现双重边框。此外， 使用caption-side属性放置在表格的bottom
csstable {
border-collapse: collapse;
border-spacing: 0;
border: 2px solid rgb(140 140 140);
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
接下来，使用padding属性为所有表格单元格的内容周围留出空间。vertical-align属性将表头单元格的内容与单元格的bottom对齐，这可以在跨两行的表头单元格上看到
cssth,
td {
border: 1px solid rgb(160 160 160);
padding: 4px 6px;
}
th {
vertical-align: bottom;
}
下一个 CSS 规则设置表格头部（使用指定）中所有元素的background-color。然后将头部的下边框设置为两像素宽的线。然而，请注意，我们使用:nth-of-type选择器将border-bottom属性应用于头部的第二行。为什么？因为头部由一些单元格跨越的两行组成。这意味着实际上有两行；将样式应用于第一行不会得到预期的结果
cssthead > tr {
background-color: rgb(228 240 245);
}
thead > tr:nth-of-type(2) {
border-bottom: 2px solid rgb(140 140 140);
}
让我们用绿色和红色来样式化“已加入”和“已取消”这两个表头单元格，分别代表新成员的“好”和取消会员资格的“遗憾”。这里我们使用:last-of-type选择器深入到表格头部部分的最后一行，并给它里面的第一个表头单元格（“已加入”表头）一个绿色调，给它里面的第二个表头单元格（“已取消”表头）一个红色调
cssthead > tr:last-of-type > th:nth-of-type(1) {
background-color: rgb(225 255 225);
}
thead > tr:last-of-type > th:nth-of-type(2) {
background-color: rgb(255 225 225);
}
由于第一列也应该突出显示，这里也添加了一些自定义样式。此 CSS 规则使用text-align属性将表格主体每行中的第一个表头单元格（成员姓名）左对齐，并使用略微不同的background-color进行样式化
csstbody > tr > th:first-of-type {
text-align: left;
background-color: rgb(225 229 244);
}
通过交替行颜色来提高表格数据的可读性是很常见的——这有时被称为“斑马条纹”。让我们为每个偶数行添加一点background-color
csstbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
由于在表格中右对齐货币值是标准做法，我们在这里也这样做。这只是将每个主体行中最后一个 的text-align属性设置为right
csstbody > tr > td:last-of-type {
text-align: right;
}
最后，对表格的脚部部分应用了类似于头部的样式，使其也突出显示
csstfoot > tr {
border-top: 2px dashed rgb(140 140 140);
background-color: rgb(228 240 245);
}
tfoot th,
tfoot td {
text-align: right;
font-weight: bold;
}
在小空间中显示大型表格
网页表格的一个常见问题是，当内容量很大时，它们在小屏幕上的原生表现不佳，而且使其可滚动的方式并不明显，特别是当标记可能来自 CMS 且无法修改以包含包装器时。
此示例提供了一种在小空间中显示表格的方法。我们隐藏了 HTML 内容，因为它非常大，并且没有什么值得注意的地方。此示例中的 CSS 更值得检查。
| 13 equals: |
23 equals: |
33 equals: |
43 equals: |
53 equals: |
63 equals: |
73 equals: |
| row 1: 1 |
row 1: 8 |
row 1: 27 |
row 1: 64 |
row 1: 125 |
row 1: 216 |
row 1: 343 |
| row 2: 1 |
row 2: 8 |
row 2: 27 |
row 2: 64 |
row 2: 125 |
row 2: 216 |
row 2: 343 |
| row 3: 1 |
row 3: 8 |
row 3: 27 |
row 3: 64 |
row 3: 125 |
row 3: 216 |
row 3: 343 |
| row 4: 1 |
row 4: 8 |
row 4: 27 |
row 4: 64 |
row 4: 125 |
row 4: 216 |
row 4: 343 |
| row 5: 1 |
row 5: 8 |
row 5: 27 |
row 5: 64 |
row 5: 125 |
row 5: 216 |
row 5: 343 |
| row 6: 1 |
row 6: 8 |
row 6: 27 |
row 6: 64 |
row 6: 125 |
row 6: 216 |
row 6: 343 |
| row 7: 1 |
row 7: 8 |
row 7: 27 |
row 7: 64 |
row 7: 125 |
row 7: 216 |
row 7: 343 |
| row 8: 1 |
row 8: 8 |
row 8: 27 |
row 8: 64 |
row 8: 125 |
row 8: 216 |
row 8: 343 |
| row 9: 1 |
row 9: 8 |
row 9: 27 |
row 9: 64 |
row 9: 125 |
row 9: 216 |
row 9: 343 |
| row 10: 1 |
row 10: 8 |
row 10: 27 |
row 10: 64 |
row 10: 125 |
row 10: 216 |
row 10: 343 |
| row 11: 1 |
row 11: 8 |
row 11: 27 |
row 11: 64 |
row 11: 125 |
row 11: 216 |
row 11: 343 |
| row 12: 1 |
row 12: 8 |
row 12: 27 |
row 12: 64 |
row 12: 125 |
row 12: 216 |
row 12: 343 |
| row 13: 1 |
row 13: 8 |
row 13: 27 |
row 13: 64 |
row 13: 125 |
row 13: 216 |
row 13: 343 |
| row 14: 1 |
row 14: 8 |
row 14: 27 |
row 14: 64 |
row 14: 125 |
row 14: 216 |
row 14: 343 |
| row 15: 1 |
row 15: 8 |
row 15: 27 |
row 15: 64 |
row 15: 125 |
row 15: 216 |
row 15: 343 |
| row 16: 1 |
row 16: 8 |
row 16: 27 |
row 16: 64 |
row 16: 125 |
row 16: 216 |
row 16: 343 |
| row 17: 1 |
row 17: 8 |
row 17: 27 |
row 17: 64 |
row 17: 125 |
row 17: 216 |
row 17: 343 |
| row 18: 1 |
row 18: 8 |
row 18: 27 |
row 18: 64 |
row 18: 125 |
row 18: 216 |
row 18: 343 |
| row 19: 1 |
row 19: 8 |
row 19: 27 |
row 19: 64 |
row 19: 125 |
row 19: 216 |
row 19: 343 |
| row 20: 1 |
row 20: 8 |
row 20: 27 |
row 20: 64 |
row 20: 125 |
row 20: 216 |
row 20: 343 |
CSS
查看这些样式时，您会注意到表格的display属性已设置为block。虽然这允许滚动，但表格失去了一些完整性，并且表格单元格会尝试变得尽可能小。为了缓解这个问题，我们已将white-space设置为 | 上的nowrap。但是，我们不对执行此操作，以避免长标题强制列比显示数据所需的宽度更宽。
为了在向下滚动时保持表格标题在页面上，我们将position设置为 元素的粘性。请注意，我们没有将border-collapse设置为collapse，因为如果我们这样做，标题就无法正确地与表格的其余部分分离。
考虑到 具有固定大小，此处将overflow设置为auto是重要部分，因为它使表格可滚动。
csstable,
th,
td {
border: 1px solid black;
}
table {
overflow: auto;
width: 100%;
max-width: 400px;
height: 240px;
display: block;
margin: 0 auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: white;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
结果
技术摘要
内容类别
流内容
允许内容
按此顺序
一个可选的 元素，
零个或多个 元素，
一个可选的元素，
以下两者之一
零个或多个 元素
一个或多个 元素
一个可选的 元素
标签省略
无，起始标签和结束标签都必须存在。
允许父级
任何接受流内容的元素
隐式 ARIA 角色
table
允许的 ARIA 角色
任意
DOM 接口
HTMLTableElement
规范
规范
HTML# the-table-element
浏览器兼容性
加载中…
另见
学习：HTML 表格基础
、、、、、 | 、、、：其他表格相关元素
background-color：设置表格背景颜色的 CSS 属性
border、border-collapse、border-spacing：控制单元格边框、规则和框架外观的 CSS 属性
margin、padding：用于对齐表格和设置单元格内容间距的 CSS 属性
text-align：用于水平对齐表格单元格内容的 CSS 属性
vertical-align：用于垂直对齐表格单元格内容的 CSS 属性
width：控制表格宽度的 CSS 属性
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 本页面最后修改于 2025年10月13日，由 MDN 贡献者修订。
在 GitHub 上查看此页面 • 报告此内容存在的问题
相关文章
365bet注册官网
📅 10-19
👀 2984
365提款不到账的吗
📅 10-14
👀 1684
365bet注册官网
📅 10-02
👀 6143
| | | | | |