掌握 HTML 表格标签：深入了解创建和格式化表格

创建表格

创建一个 html 表格，请使用 <table> 和 </table> 标签，其中包含 <tr>（表格行）和 <td>（表格数据）标签。

<table>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
    <td>数据 3</td>
  </tr>
  <tr>
    <td>数据 4</td>
    <td>数据 5</td>
    <td>数据 6</td>
  </tr>
</table>

格式化表格

可以使用各种属性来控制表格的外观和行为：

• width 和 height：设置表格的宽度和高度。
• border：指定表格边框的宽度。
• cellspacing 和 cellpadding：控制表格单元格之间的间距和单元格内的衬里。
• align：对齐表格行或单元格的内容。

标题和表头

• ：为表格添加标题。
• ：定义表格表头，该表头在每个表格行之前重复出现。
• ：定义表格页脚，该页脚在每个表格行之后重复出现。

<table>
  <caption>表标题</caption>
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
      <th>表头 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
      <td>数据 3</td>
    </tr>
  </tbody>
</table>

合并单元格

• colspan：合并水平单元格。
• rowspan：合并垂直单元格。

<table>
  <tr>
    <td colspan="2">合并两列单元格</td>
    <td>数据 3</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行单元格</td>
    <td>数据 4</td>
    <td>数据 5</td>
  </tr>
  <tr>
    <td>数据 6</td>
  </tr>
</table>

样式化表格

可以使用 CSS 样式来进一步自定义表格的外观，例如设置字体、颜色和背景色。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: center;
}

辅助功能

• aria-labelledby：与表格标题的 ID 相关联，用于屏幕阅读器。
• scope：指定表头或页脚的范围（行或列）。
• headers：定义一个单元格是其上方或左方的单元格的表头。

<table>
  <caption id="表格标题">表标题</caption>
  <thead>
    <tr>
      <th id="表头1" scope="col">表头 1</th>
      <th id="表头2" scope="col">表头 2</th>
      <th id="表头3" scope="col">表头 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="表头1">数据 1</td>
      <td headers="表头2">数据 2</td>
      <td headers="表头3">数据 3</td>
    </tr>
  </tbody>
</table>

掌握 HTML 表格标签对于构建清晰、有序和易于访问的网页内容至关重要。通过了解创建和格式化的技术，开发人员能够创建动态和直观的表格，以有效地显示和组织信息。