参考资料

  1. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  2. HTML DOM 返回一个iframe中的longdesc属性的值
  3. HTML DOM 返回的主机名:图像映射的某个区域的端口 实例
  4. HTML DOM删除下拉列表中的选项
  5. HTML DOM 重置表单
  6. HTML DOM 返回一个表单的name 实例
  7. HTML DOM 返回一个客户端图像映射的usemap的值
  8. HTML DOM 返回一个button的type 实例

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>