W3C 完整表格

W3C 完整表格是 HTML 表格中用于创建复杂表格的一种标准。它提供了多种功能和属性，允许开发人员创建具有多个行和列的表格，以及对表格中的单元格进行格式化和控制。

基本结构

W3C 完整表格由 table 元素和 tr、th、td 元素组成。

table 元素

table 元素是 W3C 完整表格的主要容器，在 table 元素中包含 tr 元素。table 元素具有以下常见的属性：

• border：设置表格边框的宽度。
• cellpadding：设置表格单元格内边距的大小。
• cellspacing：设置表格单元格之间的距离。
• width：设置表格宽度。

<!-- 示例 -->
<table border="1" cellpadding="10" cellspacing="0" width="100%">
  <!-- 表格内容 -->
</table>

tr 元素

tr 元素用于表示表格中的一行，在 tr 元素中包含 th 或 td 元素。tr 元素通常不具有属性。

<!-- 示例 -->
<tr>
  <!-- 表格内容 -->
</tr>

th 元素

th 元素用于表示表格中的表头单元格，它包含表头单元格的文本内容，并可设置单元格的属性。

<!-- 示例 -->
<tr>
  <th>表头内容</th>
  <!-- 其他单元格 -->
</tr>

td 元素

td 元素用于表示表格中的数据单元格，它包含数据单元格的文本内容，并可设置单元格的属性。

<!-- 示例 -->
<tr>
  <td>数据内容</td>
  <!-- 其他单元格 -->
</tr>

属性

表格相关属性

border 属性

border 属性用于设置表格边框的宽度，单位为像素。默认情况下，表格没有边框。

<!-- 示例 -->
<table border="1">
  <!-- 表格内容 -->
</table>

cellpadding 属性

cellpadding 属性用于设置表格单元格内边距的大小，单位为像素。默认情况下，表格单元格没有内边距。

<!-- 示例 -->
<table cellpadding="10">
  <!-- 表格内容 -->
</table>

cellspacing 属性

cellspacing 属性用于设置表格单元格之间的距离，单位为像素。默认情况下，表格单元格之间没有距离。

<!-- 示例 -->
<table cellspacing="5">
  <!-- 表格内容 -->
</table>

width 属性

width 属性用于设置表格宽度，单位为像素或百分比。默认情况下，表格宽度会根据表格内容自动调整。

<!-- 示例 -->
<table width="100%">
  <!-- 表格内容 -->
</table>

单元格相关属性

rowspan 属性

rowspan 属性用于设置单元格跨越的行数。其值为大于等于 1 的整数。

<!-- 示例 -->
<table>
  <tr>
    <td rowspan="2">跨越两行的单元格</td>
    <td>第一行的单元格</td>
  </tr>
  <tr>
    <td>第二行的单元格</td>
  </tr>
</table>

colspan 属性

colspan 属性用于设置单元格跨越的列数。其值为大于等于 1 的整数。

<!-- 示例 -->
<table>
  <tr>
    <td colspan="2">跨越两列的单元格</td>
    <td>第一行第三列的单元格</td>
  </tr>
  <tr>
    <td>第二行第一列的单元格</td>
    <td>第二行第二列的单元格</td>
    <td>第二行第三列的单元格</td>
  </tr>
</table>

headers 属性

headers 属性用于设置数据单元格与表头单元格的关联关系。可以将多个表头单元格关联到同一个数据单元格。

<!-- 示例 -->
<table>
  <thead>
    <tr>
      <th id="th1">表头一</th>
      <th id="th2">表头二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="th1">数据一</td>
      <td>数据二</td>
    </tr>
    <tr>
      <td headers="th2">数据三</td>
      <td>数据四</td>
    </tr>
  </tbody>
</table>