参考资料

1. HTML DOM 改变一个包含在iframe中的文档的背景颜色
2. HTML DOM 返回和设置链接的hreflang属性实例
3. HTML DOM 节点列表长度
4. HTML DOM 返回表单中的enctype属性的值
5. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
6. HTML DOM 返回一个iframe中的marginwidth属性的值
7. HTML DOM单元格内容水平对齐
8. HTML DOM 返回文档中第一个图像的ID

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>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。