参考资料

1. HTML DOM添加表格行中的单元格
2. HTML DOM 对iframe排版
3. HTML DOM 改变image的src
4. HTML DOM禁用和启用下拉列表
5. HTML DOM 设置image的hspace和vspace属性
6. HTML DOM 返回一个锚的名字 实例
7. HTML DOM 返回一个区域的href属性的锚部分实例
8. HTML DOM 返回和设置链接的href属性实例

HTML DOM为表格指定规则

HTML DOM 表格规则

基本介绍

HTML DOM 表格规则用于定义表格的结构和样式，包括行、列、单元格的布局和表现。

主要标签

1. <table> - 定义表格容器

2. <caption> - 定义表格标题

3. <thead> - 定义表头区域

4. <tbody> - 定义表格主体

5. <tfoot> - 定义表尾区域

6. <tr> - 定义表格行

7. <th> - 定义表头单元格

8. <td> - 定义标准单元格

基本用法

<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>页脚1</td>
      <td>页脚2</td>
    </tr>
  </tfoot>
</table>

功能特性

1. 结构化数据展示

2. 支持行/列合并

3. 支持分组显示(thead/tbody/tfoot)

4. 可访问性支持

CSS 扩展

/* 基础样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* 斑马条纹效果 */
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停效果 */
tbody tr:hover {
  background-color: #ddd;
}

/* 响应式表格 */
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    display: block;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级功能实例

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>姓名</th>
    <th>电话</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>123456</td>
    <td>zhang@example.com</td>
  </tr>
  <tr>
    <td>789012</td>
    <td>zhang2@example.com</td>
  </tr>
  <tr>
    <td>李四</td>
    <td colspan="2">345678</td>
  </tr>
</table>