HTML 表格头部、主体、页脚

HTML 表格结构详解

基本结构标签

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

2. <thead> - 定义表格头部

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

4. <tfoot> - 定义表格页脚

5. <tr> - 定义表格行

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

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

各部分功能

<thead>

• 包含表格的标题行

• 通常放置列标题

• 浏览器会优先渲染

• 适合放置表格的元数据

<tbody>

• 包含表格的主要内容数据

• 可以有多个tbody元素

• 浏览器会按顺序渲染

<tfoot>

• 包含表格的汇总信息

• 通常放置总计行

• 在HTML中可放在tbody前，但浏览器会渲染在底部

基本用法示例

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>$1500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>$2500</td>
    </tr>
  </tfoot>
</table>

CSS扩展样式

基本样式

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
}

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

th {
  background-color: #f8f9fa;
  font-weight: bold;
}

tfoot td {
  font-weight: bold;
  border-top: 2px solid #333;
}

斑马条纹效果

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

悬停效果

tbody tr:hover {
  background-color: #e9ecef;
}

响应式表格

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  
  thead {
    display: none;
  }
  
  tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
  
  td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
  }
}

高级用法

多tbody分组

<table>
  <thead>...</thead>
  <tbody>
    <tr><td>第一组数据</td></tr>
  </tbody>
  <tbody>
    <tr><td>第二组数据</td></tr>
  </tbody>
  <tfoot>...</tfoot>
</table>

列分组(colgroup)

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>