知识库

Appearance

Return to top
On this page

HTML表格标签

HTML表格用于以行和列的形式显示数据，是展示结构化信息的有效方式。

基本表格结构

HTML表格由以下元素组成：

  • <table> - 定义表格
  • <tr> - 定义表格行
  • <th> - 定义表头单元格
  • <td> - 定义标准单元格

基本语法

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>设计师</td>
  </tr>
</table>

表格元素详解

表格标题

使用<caption>元素为表格添加标题：

html
<table>
  <caption>员工信息表</caption>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th>薪资</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>技术部</td>
    <td>8000</td>
  </tr>
</table>

表格分组

使用以下元素对表格进行逻辑分组：

  • <thead> - 定义表格的头部
  • <tbody> - 定义表格的主体
  • <tfoot> - 定义表格的底部
html
<table>
  <caption>销售数据</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>销量</th>
      <th>价格</th>
      <th>总额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>100</td>
      <td>50</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td>80</td>
      <td>75</td>
      <td>6000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>180</td>
      <td>-</td>
      <td>11000</td>
    </tr>
  </tfoot>
</table>

单元格合并

横向合并 (colspan)

使用colspan属性合并列：

html
<table>
  <tr>
    <th colspan="2">个人信息</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>工程师</td>
    <td>25</td>
  </tr>
</table>

纵向合并 (rowspan)

使用rowspan属性合并行：

html
<table>
  <tr>
    <th>姓名</th>
    <td>张三</td>
    <td rowspan="2">共同信息</td>
  </tr>
  <tr>
    <th>年龄</th>
    <td>25</td>
  </tr>
</table>

表格属性

传统属性（不推荐使用，建议用CSS）

  • border - 表格边框
  • cellpadding - 单元格内边距
  • cellspacing - 单元格间距
  • width - 表格宽度
  • height - 表格高度

现代CSS样式

html
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥5000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>台式机</td>
      <td>¥4000</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

复杂表格示例

带有分组的表格

html
<table>
  <caption>2023年销售报告</caption>
  <thead>
    <tr>
      <th rowspan="2">地区</th>
      <th colspan="3">销售额（万元）</th>
    </tr>
    <tr>
      <th>第一季度</th>
      <th>第二季度</th>
      <th>合计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>华北区</th>
      <td>120</td>
      <td>130</td>
      <td>250</td>
    </tr>
    <tr>
      <th>华南区</th>
      <td>150</td>
      <td>140</td>
      <td>290</td>
    </tr>
  </tbody>
</table>

表格最佳实践

语义化和可访问性

  1. 始终使用<th>标签定义表头
  2. 为表格添加<caption>标题
  3. 使用scope属性明确表头与数据的关联
html
<table>
  <caption>学生信息表</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">专业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">张三</th>
      <td>20</td>
      <td>计算机</td>
    </tr>
  </tbody>
</table>

响应式表格

对于移动设备，可以使用以下方法使表格响应式：

css
/* 水平滚动表格 */
table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* 或者转换为卡片布局 */
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 10px;
    width: 45%;
    font-weight: bold;
  }
}

表格的CSS样式

常用表格样式

css
/* 基础表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

.data-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #dddddd;
}

.data-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.data-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.data-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

可访问性考虑

  1. 使用适当的表头标签
  2. 提供表格标题
  3. 确保键盘导航可用
  4. 为屏幕阅读器提供上下文
  5. 使用适当的对比度

常见错误避免

  1. 不要使用表格进行页面布局（应该使用CSS）
  2. 确保表格结构完整
  3. 不要忘记为表头使用<th>标签
  4. 避免过于复杂的嵌套
  5. 确保表格在移动设备上可读

表格是展示结构化数据的重要工具，正确使用表格元素可以提高数据的可读性和可访问性。