参考资料

1. HTML DOM 返回一个表单中所有元素的value 实例
2. HTML DOM 哪个元素被按下了？
3. HTML DOM 返回一个锚的名字 实例
4. HTML DOM 返回文档中第一个图像的ID
5. HTML DOM 返回一个iframe中的name属性的值
6. HTML DOM单元格内容垂直对齐
7. HTML DOM 返回图像映射的某个区域的target的值 实例
8. HTML DOM 当点击完button不可用 实例

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>