XHTML 表格

XHTML 表格是一种以严格的表格、网格状格式存储和显示数据的简便方法。无论是显示数据、布局内容还是构建复杂的布局，表格都非常有用。本文档将提供关于如何在 XHTML 中创建和使用表格的循序渐进的介绍，并提供示例来展示确切的代码并解释表格的性质。

什么是表格？

表格是一种以行和列排列数据的方式。在其简单形式中，它有助于以用户易于阅读和理解数据的方式布局信息。 XHTML 中的表格由 <table> 构成，并包含诸如表行、标题和单元格之类的元素。

XHTML 表格的基本结构

您将通过使用 <table> 元素作为容器在 XHTML 中创建一个表格。 <tr> 元素定义表行，每行中的元素由 <td> - 表格数据元素定义，其中包含要显示的实际数据。您还可以使用 <th> 元素作为表头，通常用于标记列或行。

这是 XHTML 中基本表格的一个非常简单的例子

• <table> 元素是整个表格的容器。
• 第一个 <tr> 元素定义一行，在其中，<th> 元素定义列的标题单元格。
• 其他行由以下 <tr> 元素定义，而数据单元格由它们内部的 <td> 元素定义。

表格元素

• <table>
  <table> 元素是表格的根元素。此元素包含构成表格的所有其他元素。
• <tr>
  <tr> 元素定义表格中的一行。每行可以包含一个或多个单元格，这些单元格由 <td> 或 <th> 元素定义。
• <td>
  <td> 元素定义表格中的数据单元格。这是实际数据所在的位置。每个 <td> 元素的内容在当前行中创建一个单元格。
• <th>
  <th> 元素定义表格中的标题单元格。标题单元格用于描述列或行。默认情况下，它们通常以粗体字体显示，并带有居中文本对齐方式。

向表格添加属性

可以将属性放置在 <table>、<tr>、<td> 和 <th> 元素中，以影响它们的外观或行为。以下是一些常见属性

• Border (边框)
  border 属性描述表格及其单元格周围边框的宽度。
• cellpadding
  cellpadding 属性描述单元格内容和单元格边框之间的空间。
• cellspacing
  cellspacing 属性描述单元格之间的空间。

这是一个使用这些属性的示例

在此示例中，我们有，

• border="1" 在表格和单元格周围设置边框。
• 属性 cellpadding="5" 使每个单元格内部都有空间 - 在内容和单元格边框之间创建一个小间距。
• Cellspace="2" 在单元格之间放置一个空间。

为表格设置标题

<caption> 元素为表格提供标题，描述它所包含的内容。默认情况下，它将出现在表格上方。

跨行和跨列

有时您可能希望一个单元格跨越两行或更多行，甚至跨越两列或更多列。为此，您可以使用 rowspan 和 colspan 属性。前者允许单元格跨越多行，后者使它们跨越超过一列。

• rowspan
  此属性指定单元格必须跨越的行数。
• 列跨越
  此属性指定单元格应跨越的列数。

正如大家所看到的，在这个例子中

• 将属性 rowspan="2" 应用于第二行中的第一个单元格，使其跨越两行。
• 由于 colspan="2" 属性，其他单元格每个跨越两列。

使用 CSS 设置表格样式

因此，这是我们有效的 XHTML，用于指定表格结构，并且使用 CSS 我们将设置它的样式，这反过来会使它在视觉上有趣且易于阅读。由于它允许控制表格的外观，包括边框、内边距、背景颜色等，因此可以使用 CSS 实现。

正如您在上面的示例中看到的，发生了以下事情

• 表格选择器设置整个表格的样式，使其 100% 宽；折叠边框。
• th, td 选择器确保标题和数据单元格都使用边框和内边距设置样式。
• th 选择器通过更改标题单元格的背景颜色并将文本向左对齐来设置标题单元格的样式。
• tr:nth-child(even) 选择器所做的只是为每个偶数行提供不同的背景颜色，这使其成为条纹。

嵌套表格

嵌套表格是表格内的表格。如果您必须显示复杂的数据结构，或者需要将表格放置在另一个表格的单元格中，这将非常有用。另一方面，嵌套表格应谨慎使用，因为它们最终会产生难以维护的复杂代码。

创建一个嵌套表格

您要做的只是将另一个 <table> 元素放在父表格的 td 元素中。这是一个例子

• 这是一个外部表格带有部门名称，并且有两行的示例。
• 每个部门单元格内部都嵌套了一个表格，其中包含为该部门工作的人员及其职称的列表。

注意：将 aria-describedby 用于复杂表格

对于更复杂的表格，aria-describedby 可以将描述或其他更详细的上下文与表格的任何元素相关联。