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>