表格

HTML 表格用于显示带有行和列的表格数据。是否使用 <table> 应基于以下考虑因素： 您呈现的内容以及用户的与这些内容相关的需求如果数据呈现、比较、排序 计算或交叉引用，那么 <table> 可能是合适的选择。如果您只想将非表格内容布局得井井有条 （如使用大量缩略图），则不适合使用表格：请改为创建图片列表并 使用 CSS 设置网格的样式。

在本部分中，我们将讨论组成表格的所有元素，以及一些无障碍功能和易用性功能 您在呈现表格数据时应考虑哪些因素虽然“学习 HTML”并不是从根本上讲的 CSS， 学习 CSS 后，我们将介绍一些表格专用的 CSS 属性。

表格元素（按顺序排列）

<table> 标记会封装表格内容，包括所有表格元素。 <table> 的隐式 ARIA 角色为 table；辅助技术知道此元素是一个表格结构，其中包含按 行和列。如果表保持选择状态、采用二维导航或允许用户重新排列单元格顺序，请设置 role="grid"。 如果 grid 的行可以展开和收起，请改用 role="treegrid"。

在 <table> 中，您可以找到表格标题 (<thead>)、表格正文 (<tbody>) 以及表格页脚 (<tfoot>)（可选）。 每一行都由表格中的行 (<tr>) 组成。行包含表标题 (<th>) 和表数据 (<td>) 单元格，而这些单元格又包含所有数据。 在 DOM 中，在此之前，您可能会发现另外两个功能：表格标题 (<caption>) 和列组 (<colgroup>)。取决于 <colgroup> 是否具有 span 属性，它可能包含嵌套的表列 (<col>) 元素。

该表的子项按顺序如下：

1. <caption> 元素
2. <colgroup> 元素
3. <thead> 元素
4. <tbody> 元素
5. <tfoot> 元素

我们将介绍 <table> 元素的子元素（均为可选但建议使用），然后查看行、表格标题单元格、 和表格数据单元格。<colgroup>将在最后进行介绍。

表格标题

作为原生语义元素，<caption> 是首选 为表命名的方法。<caption> 提供以编程方式关联的描述性表标题。时间是 所有用户均默认可见且可以使用

<caption> 元素应该是嵌套在 <table> 元素中的第一个元素。添加该文件可让所有用户了解 ，而不必阅读周围的文本。或者，您也可以使用 aria-label 或 aria-labelledby ，以提供一个无障碍名称作为图片说明。<table><caption> 元素没有特定于元素的属性。

图片说明显示在表格外。可以使用 CSS caption-side 属性设置字幕的位置，该属性是 不如使用已废弃的 align 属性。这可以将字幕设置为顶部和底部。左侧和右侧 目前尚不完全支持侧边定位（使用 inline-start 和 inline-end）。顶部是默认浏览器呈现效果。

理想情况下，数据表格应具有清晰的标题和说明，并且足够简单，几乎不言自明。请注意， 并非所有用户的认知能力都是相同的。如果表格是“明确说明”或需要解释的，请提供 简要概述表格的要点或功能。该摘要的显示位置取决于其长度和复杂程度。 如果简短的话，请将其用作字幕的内部文本。如果篇幅较长，请在标题中总结时间，然后在 段落，将两者与 aria-describedby 相关联 属性。另一种方法是将表放入 <figure> 中，并将摘要放入 <figcaption> 中。

数据部分

表格的内容最多由三个部分组成：零个或多个表格标题 (<thead>)、表格正文 (<tbody>)、 和表格页脚 (<tfoot>)。所有这些都是可选的，每个类别都没有一个或多个受支持。

这些元素不会帮助或妨碍表格的可访问性，但从易用性的角度来说非常实用。它们提供 样式钩子。例如，标头内容可以设为粘性， 而 <tbody> 内容可滚动。未嵌套在这三个包含元素中的任何一个中的行都是隐式的 封装在 <tbody> 中。这三个角色共用同一个隐式角色 rowgroup。 这三个元素都没有任何特定于元素的属性。

我们目前掌握的信息如下：

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

出于无障碍方面的原因，<tfoot> 元素最初被指定为紧跟在 <thead> 之后、<tbody> 之前。 正因如此，您在旧版代码库中可能会遇到这种不直观的源代码顺序。

表格内容

表格可以分为表格标题、正文和页脚，但如果这些表格无法区分， 包含表格中的行、单元格和内容。表格中的每一行 <tr> 包含一个或多个单元格。如果单元格是标题单元格，请使用 <th>。 否则，请使用 <td>。

用户代理样式表通常在 <th> 表格标题单元格中显示居中加粗的内容。这些默认样式 和所有样式，最好通过 CSS 进行控制，而不用之前在单个单元格中可用的已弃用属性。 行，甚至是 <table>。

我们提供了一些属性，可用于在单元格之间、单元格内添加内边距、添加边框和调整文本对齐方式。单元格内边距和单元格间距； 用于指定单元格内容与其边框之间以及相邻单元格边框之间的空间， 并采用 CSS 边框合拢和border-spacing 属性。如果设置了 border-collapse: collapse，Border-spacing 将不会产生任何影响。如果border-collapse: separate; 设置后，可以使用 empty-cells: hide; 完全隐藏空单元格。如需详细了解如何设置表格样式，请参阅 与表格相关的 CSS 样式的互动式幻灯片演示文稿。

在示例中，我们为表格和每个带有 CSS 的单元格添加了边框，以使一些功能更加明显：

在本例中，我们有图片说明、表格标题和表格正文。标题有一行，包含三个标题 <th> 单元格， 从而创建了三列正文包含三行数据：第一个单元格是该行的标题单元格，因此我们使用 <th> 而不是 <td>。

<th> 单元格具有语义含义，并具有 columnheader 的隐式 ARIA 角色 或 rowheader。它将相应单元格定义为表格单元格的列或行的标题， 具体取决于枚举 scope 属性的值。如果未明确设置 scope，浏览器将默认使用 col 或 row。 由于我们使用了语义标记，因此 1956 单元格有两个标题：Year 和 Lou Minious。通过这种关联，我们了解到“1956”是 “year”例如《Lou Minious》在本例中，我们可以看到整个表格，从视觉上就可以看出这种关联。 即使标题列或行已滚动到视图以外，使用 <th> 也会提供这种关联。我们可以明确设置 <th scope="col">Year</th> 和 <th scope="row">Lou Minious</th>，但在使用像这样一个简单的表时，枚举的默认值仍然有效。 scope 的其他值包括 rowgroup 和 colgroup，它们对于复杂的表非常有用。

合并单元格

与 MS Excel、Google 表格和数字类似，您可以将多个单元格合并为一个单元格。这可通过 HTML 实现！ colspan 属性用于合并单行中两个或更多个相邻的单元格。rowspan 属性用于跨行合并单元格， 放在顶行的单元格中。

在本例中，表标题包含两行。第一个标题行包含跨四列的三个单元格：中间的单元格 包含colspan="2"。这会合并两个相邻的单元格。第一个和最后一个单元格包含 rowspan="2"。这会将单元格与 相邻行，紧跟在它的正下方。

表格标题中的第二行包含两个单元格：这些是第二行中第二列和第三列的单元格。 第一行或最后一列没有将任何单元格声明为第一行和最后一列中的单元格跨越两行。

如果一个单元格是由多个标题单元格定义的，并且这些标题单元格的关联无法只通过 scope 属性进行设置，那么： 添加 headers 属性，并提供以空格分隔的关联标头列表。由于这个示例更为复杂，因此我们明确定义了 使用 scope 属性指定标头的范围。为清晰起见，我们为每个单元格添加了 headers 属性。

在这样一个简单的用例中，headers 属性可能不是必需的，但在工具条中应加入这些属性。 您的表格也会变得越来越复杂结构复杂的表格，例如合并标题、单元格或包含更多标题的表格 超过两级的列或行标题，则需要明确标识关联的标题单元格。在这种复杂的表格中， 将每个数据单元格与每个对应的标题单元格相关联，其中包含所有关联标题的以空格分隔的 id 值列表 作为 headers 属性的值。

headers 属性在 <td> 元素中更常见，但也适用于 <th>。

即便如此，对于所有用户（而不仅仅是屏幕阅读器用户）来说，复杂的表格结构可能都难以理解。认知 就屏幕阅读器支持而言，更为简单的表格（几乎没有跨越单元格，甚至没有跨越单元格）更容易实现 。而且更易于管理！

设置表格样式

简要提到了两个相对不太常见的元素：列组 <colgroup> 元素 及其唯一的后代，即空的 <col> 列元素。通过 <colgroup> 元素用于定义表格中的列组或 <col> 元素。

如果使用，则列分组应嵌套在 <table> 中，紧跟在 <caption> 之后、任何表数据之前。 如果这些列跨多个列，请使用 span 属性。

表格的内容大纲顺序通常如下所示，其中 <table> 和 <caption> 是 应包含：

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> 和 <col> 在帮助使表更易于访问方面都没有语义含义，但它们确实允许 ，包括使用 CSS 设置列的宽度。

<col> 样式将为列设置样式，前提是没有 <td> 或 <th> 样式可替换该样式。例如，当 <colspan> 用于合并表格中某些行（而非全部）中的单元格，您无法确定选择器（例如 tr > *:nth-child(8)） 这会选择每行的第 8 个子项，这会突出显示第 8 列，或者分多行突出显示第 8 列。 但会有少量第 9 列和第 10 列单元格，具体取决于合并的行或列单元格。

遗憾的是，仅支持少数属性，样式无法继承到单元格中，并且使用 <col> 的唯一方式是 元素是一个复杂的选择器，其中包括 :has() 关系选择器。

如果 <table> 和 <colgroup> 都有背景颜色，那么 <colgroup> 的 background-color 将位于顶部。 绘制顺序为：表格、列组、列、行组、行，其中单元格最后在顶部，如表架构所示 层。<td> 和 <th> 元素不是 <colgroup> 或 <col> 元素的后代，也不会继承其样式。

为表格设置条带，可以使用 CSS 结构选择器。例如：tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} 将向表格正文中的每个奇数行添加半透明的黑色，使 <colgroup> 上设置的所有背景效果都能显示出来。

默认情况下，表格没有自适应功能。默认情况下，系统会根据其内容调整大小。需要采取额外措施才能获取表 能够在各种设备上有效运行如果您要更改表格元素的 CSS 显示属性， 包含 ARIA role 属性。虽然这可能听起来没有必要，但在某些浏览器中，CSS display 属性可能会影响无障碍树。

呈现数据

表格元素具有语义含义，辅助技术利用这些含义来浏览行和列 而不会出现“丢失”的情况<table> 元素不应用于呈现。如果您需要为列表添加标题，请使用标题 和列表。如果您要使用多列布局内容，请使用多列布局。 如果您想以网格形式排列内容，请使用 CSS 网格。仅使用表格来存储数据。您可以这样理解：如果您的数据需要使用电子表格才能在会议中展示，则可以使用 <table>。 如果您想使用演示文稿软件（例如 Keynote 或 PowerPoint）中提供的功能，可能需要一份说明列表。

对表格中的列进行排序是 JavaScript 的职责，而标记标题以告知用户此列是可以排序的则是 HTML 的职责。 告知用户表格中的各列可以排序，还有显示升序、降序或未排序的图标。当前已排序的列应 将 aria-sort 属性添加为排序方向的枚举值。 <caption> 可以通过 aria-live 和 此 span 会动态更新，并且对屏幕阅读器用户可见。由于可以通过点击标题内容对此列进行排序，因此标题内容应为 <button>。

如果您没有展示表格数据，请勿使用 <table>。如果您使用表格进行演示，请设置 role="none"。

许多开发者会使用表格来布置表单，但其实根本没必要这样做。不过，您确实需要了解 HTML 表单，我们接下来将介绍这些内容。

检查您的理解情况

测试您对表相关知识的掌握情况。