HTML 表格

创建 HTML 表格

HTML 表格用于以结构化的、表格化的格式（行和列）显示数据。

**注意：**表格应仅用于呈现表格数据，而非页面布局。应使用 CSS（如 Flexbox 或 Grid）来创建页面布局。

基本表格结构

创建表格的基本元素包括：

<table>：整个表格的容器。
<tr>：定义表格中的行（row）。
<td>：定义表格中的数据单元格（data cell，包含实际数据）。
<th>：定义表格中的表头单元格（header cell，用于列或行的标题）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Table</title>
  <meta charset="UTF-8">
  <style>
    /* 为清晰起见的基础样式 */
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse; /* 合并边框 */
      padding: 8px; /* 在单元格内部添加空间 */
      text-align: left; /* 文本对齐 */
    }
    th {
      background-color: #f2f2f2; /* 表头的浅灰色背景 */
      font-weight: bold;
    }
  </style>
</head>
<body>

<h2>Student Scores</h2>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>92</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>78</td>
  </tr>
</table>

</body>
</html>

解释：

<table> 元素包裹整个表格内容。
每个 <tr> 定义一个水平行。
第一个 <tr> 包含 <th>（表头）单元格，浏览器通常默认将其显示为粗体和居中（尽管我们在这里使用 CSS 覆盖了对齐方式）。
随后的 <tr> 元素包含 <td>（数据）单元格。
CSS 提供了基础的边框、内边距（padding）和对齐方式，以提高可读性。

使用 CSS 为表格设置样式

使用 HTML 属性如 border、width、cellpadding 或 cellspacing 为表格设置样式的方法已废弃，不应再使用。请始终使用 CSS 进行样式设置。

表格常用的 CSS 属性：

border：为 table、th 和 td 元素添加边框。
border-collapse: collapse;：将相邻单元格的边框合并为一个单一边框。
border-spacing：控制单元格边框之间的空间（仅在 border-collapse 为 separate 时生效，这是默认值）。
padding：在单元格内容及其边框之间添加空间（作用于 th、td）。
text-align：对齐单元格内的文本（left 左对齐，center 居中对齐，right 右对齐）。
vertical-align：垂直对齐单元格内的内容（top 顶部对齐，middle 垂直居中，bottom 底部对齐）。
width：设置表格或特定列的宽度。
background-color：设置背景颜色，常用于表头或隔行变色（tr:nth-child(even)）。

带样式的表格 CSS 示例：

/* 使用 ID 或类为特定表格应用样式 */
#data-table {
  width: 100%; /* 使表格填充容器宽度 */
  border-collapse: collapse; /* 整洁的单边框 */
  margin-bottom: 20px; /* 表格下方空间 */
  font-family: sans-serif;
}

#data-table th,
#data-table td {
  border: 1px solid #ddd; /* 更浅的边框 */
  padding: 12px; /* 更多内边距 */
  text-align: left;
}

#data-table th {
  background-color: #4CAF50; /* 表头的绿色背景 */
  color: white; /* 表头的白色文本 */
  font-weight: bold;
}

/* 隔行变色条纹 */
#data-table tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行的浅灰色 */
}

#data-table tr:hover {
  background-color: #f1f1f1; /* 鼠标悬停时高亮行 */
}

要使用这些样式，请在 <table> 标签中添加 id="data-table"。

跨列和跨行

有时，一个单元格需要占据多列或多行的空间。

colspan 属性：

在 <td> 或 <th> 标签上使用 colspan="number" 可以使其跨越多列。

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th> <!-- 跨越 2 列 -->
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Email</td> <!-- 列 2 -->
    <td>Phone</td> <!-- 列 3 -->
  </tr>
</table>

rowspan 属性：

在 <td> 或 <th> 标签上使用 rowspan="number" 可以使其跨越多行。

<table>
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th rowspan="2">Phone:</th> <!-- 跨越 2 行 -->
    <td>555-1234</td>
  </tr>
  <tr> <!-- 注意：此行只需一个 <td>，因为第一列已被跨越 -->
    <td>555-5678</td>
  </tr>
</table>

表格标题（Caption）

<caption> 元素为表格提供标题或描述。它可以提高表格的可访问性和上下文清晰度。

它应该紧跟在 <table> 开始标签之后放置。

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
</table>

语义化的表格结构：thead, tbody, tfoot

对于更复杂的表格，您可以使用以下元素将行分组为逻辑区域：

<thead>：分组表格的头部内容（通常包含带有 <th> 单元格的 <tr>）。
<tbody>：分组表格的主体内容（包含带有 <td> 单元格的 <tr>）。
<tfoot>：分组表格的底部内容（例如，总计、汇总）。

优点：

语义化与可访问性： 为辅助技术清晰地定义表格的不同部分。
样式设置： 可以为头部、主体或底部应用特定的样式。
滚动： 一些浏览器允许表格主体（<tbody>）独立滚动，同时保持头部（<thead>）和底部（<tfoot>）可见。

<table>
  <caption>Invoice Summary</caption>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>2</td>
      <td>$50.00</td>
    </tr>
    <tr>
      <td>Gadget B</td>
      <td>1</td>
      <td>$75.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$175.00</td>
    </tr>
  </tfoot>
</table>

注意：即使使用了 <thead>、<tbody> 和 <tfoot>，您仍然需要在它们内部使用 <tr> 元素来定义行。

可访问性注意事项

为了提高表格的可访问性，特别是复杂的表格：

使用 <th> 作为表头单元格。
在 <th> 单元格上使用 scope 属性，明确关联它们所描述的数据（scope="col" 用于列头，scope="row" 用于行头）。
使用 <caption> 为表格提供标题。
确保文本和背景之间有良好的颜色对比度。
避免将表格用于布局。

<table>
  <caption>User Data</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th> <!-- 如果是行头，也可以是 <th> -->
      <td>Alice</td>
      <td>alice@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Bob</td>
      <td>bob@example.com</td>
    </tr>
  </tbody>
</table>

章节总结

使用 <table> 定义一个用于表格数据的表格。
使用 <tr> 定义表格行。
使用 <td> 作为数据单元格，<th> 作为表头单元格。
使用 CSS 属性如 border、padding、text-align、border-collapse 进行样式设置（避免使用已废弃的 HTML 属性）。
使用 colspan 和 rowspan 属性合并单元格。
使用 <caption> 作为表格标题。
使用 <thead>、<tbody> 和 <tfoot> 以语义化方式组织表格内容。
在 <th> 元素上使用 scope 属性以提高可访问性。

HTML 表格标签参考

标签	描述
`<table>`	定义 HTML 表格的容器。
`<tr>`	定义表格中的行。
`<td>`	定义表格行中的标准数据单元格。
`<th>`	定义表格行中的表头单元格。使用 `scope` 属性提高可访问性。
`<caption>`	定义表格的标题或描述。
`<thead>`	分组表格的头部内容（行）。
`<tbody>`	分组表格的主体内容（行）。
`<tfoot>`	分组表格的底部内容（行）。
`<colgroup>`	指定一组或多列用于格式化（较不常用）。
`<col>`	在 `<colgroup>` 内指定列属性（较不常用）。