HTML 表格

表格是组织复杂信息的最佳方式之一。在本课中，了解表格的正确 HTML 和 CSS 标记以及它们之间的区别。

<table> 标签

表格是在列和行中显示数据的绝佳选择。它们允许用户快速扫描、比较和分析任何类型的信息，从文本和图形到图像。

在最基本的层面上，表格是使用<table>元素和一个或多个<tr>,<th>和<td> 元素来构建的，以分别定义行、标题和单元格。

避免将<div>标签用于表格数据——虽然它可以将内容分成块，但它的目的是创建布局。

<tr> 标签

元素——table row的<tr>缩写——显然定义了表格中的一行单元格。它充当表格单元格的容器，并保存其他元素，这些元素定义带有标题和常规数据的单元格。基本上，您想在行中显示的所有内容都在此标签内，而<tr>标签本身嵌套在<table>标签内。您的表格将需要与<tr>行一样多的标签。

<td> 标签

表格单元格可以包含两种类型的数据：标题信息和常规数据。这种区别很重要，因为它使浏览器能够清楚地呈现它们，即使您没有专门定义表格样式。

我们使用<td>标签（表格数据的缩写）来设置具有常规数据的单元格。此标签始终嵌套在<tr>标签内。在此示例中，第二行包含 4 个数据单元格，其中包含以下信息：

• 安赫尔维茨

• 34

• 24.000 美元

• 9.000 美元

该行的代码如下所示：

<tr>

<td>Angel Herwitz</td>

<td>34</td>

<td>$24.000</td>

<td>$9.000</td>

</tr>

<th> 标签

<th>标签用于标记表格标题单元格。默认情况下，大多数浏览器以粗体显示标题单元格的内容并居中对齐，而常规字体用于显示其他数据单元格中的内容。

表头标记的另一个功能是它对可访问性至关重要。当用户在表格中移动时，屏幕阅读器会宣布标题，为辅助技术用户提供一目了然的视觉用户可用的上下文。如果没有为表格标题使用正确的标记，您将让辅助技术用户几乎无法进行表格导航。

<caption> 标签

您可以<caption>通过将标签直接放在开始<table>标签之后来指定表格的标题。这是一个成对的标签，这意味着内容位于开始标签和结束标签之间。默认情况下，标题显示在表格顶部，但您可以使用 CSS 更改其位置。

虽然该<caption>元素不是强制性的，但它对辅助技术用户至关重要。它可以帮助用户识别表格，了解它的内容并决定是否要阅读它。

colspan 属性

该colspan 属性代表列跨越，它允许您跨多个其他列扩展列。将属性添加到要扩展的单元格的标签中，并将值设置为要融合的列数。

在上面的示例中，为了将两列合并为一个表头，我们使用<th>带有属性colspan 和值的表头标签2。

行跨度属性

rowspan 当我们需要合并它们时，该属性允许您将一行扩展到多行。它类似于对colspan 列执行相同操作的属性。

请记住，诸如屏幕阅读器之类的辅助技术可能难以解析具有跨标题单元格的复杂表格。仅在必要时使用rowspan -colspan 如果合并两个单元格比分离它们更有意义。或者，考虑将较大的表拆分为一组相关的较小表。

添加填充

默认情况下，表格单元格的大小足以容纳其内容。如果要在内容周围添加更多空间，请使用该padding 属性。这是一种速记，允许您在一个属性中为每一侧设置填充。

该padding 属性可以采用 4、3、2 和 1 值。根据值的数量，它设置以下边的填充：

• 4 个值：上、右、下、左

• 3 个值：top、left&right、bottom

• 2 个值：top&bottom、left&right

• 1 个值：所有面

在上面的示例中，”padding:20px 30px;”将顶部和底部内边距设置为 20 像素，将左右内边距设置为 30 像素。

文本对齐属性

默认情况下，表格单元格内的文本左对齐或右对齐，具体取决于文档的默认语言脚本。text-align但是，您可以使用属性中的属性更改水平对齐方式style 。可用值为left和。right center

要垂直对齐单元格的内容，请使用该vertical-align属性。尽管默认对齐方式是middle，但您可以将其更改为top、buttom或其他不太常见的值。

添加边框

border在旧版本的 HTML 中，我们可以使用该属性添加边框。但是，此代码是过时的，它说明了您在学习时可能会遇到的旧约定。在现代 HTML 版本中，开发人员使用 CSS 来添加样式，因为它更加灵活和全面。

向样式表添加边框规则时，请记住它分别应用于表格周围的边框和单元格周围的边框。因此，要为表格设置所有边框，您需要将规则应用于所有 3 个元素：<table>、<th>和<td>。由于这种逻辑，默认边框看起来是双倍的。

折叠表格边框

为表格添加边框时，默认情况下您将获得双边框，因为每个表格单元格都有自己不同的边框。如果您希望相邻的表格单元格共享公共边框，则需要创建单独的 CSS 规则。这也称为折叠表格边框。在 CSS 规则中，table用作选择器并将属性设置为. border-collapsecollapse

添加行

要定义每个表格行，请使用<tr>标签。为了更好的代码可读性，您可以用新行开始每个标记。在标签内，使用数据单元格的标签和标题单元格的<tr>标签建立行的单元格。请记住，您需要使用与表格中的行数一样多的标签。<td><th><tr>

添加字幕

使用标签为表格添加标题<caption>。虽然不必正确显示表格，但此元素对于辅助技术阅读器至关重要。视觉用户可以快速查看表格以决定是否值得仔细查看 - 但这种判断需要屏幕阅读器用户更多的资源。遇到表格时，您需要启动表格导航。标题可帮助辅助技术用户确定表格是否包含所需信息而无需进入。

以上内容为转载