PHP小码农

Appearance

table 基本结构 ​

HTML 表格用于展示二维数据——行和列的网格结构。本节将介绍 <table>、<tr>、<th>、<td> 等基本表格元素，以及如何构建语义化的数据表格。

前置知识

阅读本节前，建议先了解：img 嵌入 SVG

基础概念 ​

HTML 表格由多个嵌套元素组成：<table> 是最外层的容器，<tr> 定义表格行，<th> 定义表头单元格，<td> 定义数据单元格。这些元素共同构成了表格的骨架。

表格不仅用于数据展示，在 CSS 布局时代之前曾被广泛用于页面布局，但现代 Web 中应仅使用表格来展示真正的表格数据。

语法 ​

最简单的表格 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格基础</title>
</head>
<body>
  <h1>最简单的表格</h1>

  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>广州</td>
    </tr>
  </table>
</body>
</html>

详细说明 ​

表格元素层级 ​

html
<!--
  table：表格容器
    tr (table row)：表格行
      th (table header)：表头单元格
      td (table data)：数据单元格
-->
元素全称作用出现位置
<table>Table表格容器最外层
<tr>Table Row定义一行table 内部
<th>Table Header表头单元格tr 内部
<td>Table Data数据单元格tr 内部

表格的完整语义结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格语义结构</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px 16px;
      text-align: left;
    }
    th {
      background: #f5f5f5;
      font-weight: bold;
    }
    caption {
      caption-side: top;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 12px;
    }
  </style>
</head>
<body>
  <h1>完整语义表格</h1>

  <table>
    <!-- caption：表格标题 -->
    <caption>2024 年度销售数据</caption>

    <!-- thead：表头区域 -->
    <thead>
      <tr>
        <th>产品</th>
        <th>Q1 销售额</th>
        <th>Q2 销售额</th>
        <th>Q3 销售额</th>
        <th>Q4 销售额</th>
      </tr>
    </thead>

    <!-- tbody：数据区域 -->
    <tbody>
      <tr>
        <td>产品 A</td>
        <td>120 万</td>
        <td>150 万</td>
        <td>180 万</td>
        <td>200 万</td>
      </tr>
      <tr>
        <td>产品 B</td>
        <td>80 万</td>
        <td>95 万</td>
        <td>110 万</td>
        <td>130 万</td>
      </tr>
      <tr>
        <td>产品 C</td>
        <td>50 万</td>
        <td>60 万</td>
        <td>75 万</td>
        <td>90 万</td>
      </tr>
    </tbody>

    <!-- tfoot：汇总区域 -->
    <tfoot>
      <tr>
        <td>合计</td>
        <td>250 万</td>
        <td>305 万</td>
        <td>365 万</td>
        <td>420 万</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

不要用表格做页面布局 ​

html
<!-- 错误！不要用表格做页面布局 -->
<!-- <table>
  <tr>
    <td>导航栏</td>
  </tr>
  <tr>
    <td>主内容</td>
  </tr>
  <tr>
    <td>页脚</td>
  </tr>
</table> -->

<!-- 正确：使用语义化 HTML + CSS 布局 -->
<header>导航栏</header>
<main>主内容</main>
<footer>页脚</footer>

表格用于数据，布局用 CSS

HTML 表格应仅用于展示真正的二维数据。页面布局应使用 <header>、<main>、<footer> 等语义化元素配合 CSS Flexbox 或 Grid。

实战示例 ​

员工信息表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工信息表</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    th {
      background: #4285f4;
      color: #fff;
      font-weight: 600;
    }
    tr:hover td {
      background: #f8f9fa;
    }
  </style>
</head>
<body>
  <h1>员工信息表</h1>

  <table>
    <thead>
      <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>入职日期</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>E001</td>
        <td>张三</td>
        <td>技术部</td>
        <td>前端工程师</td>
        <td>2022-03-15</td>
      </tr>
      <tr>
        <td>E002</td>
        <td>李四</td>
        <td>产品部</td>
        <td>产品经理</td>
        <td>2021-08-01</td>
      </tr>
      <tr>
        <td>E003</td>
        <td>王五</td>
        <td>设计部</td>
        <td>UI 设计师</td>
        <td>2023-01-10</td>
      </tr>
      <tr>
        <td>E004</td>
        <td>赵六</td>
        <td>技术部</td>
        <td>后端工程师</td>
        <td>2022-06-20</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

注意事项 ​

  • <table> 是表格的根元素，所有表格内容都必须在其中
  • <tr> 不能直接包含文本，必须包含 <th> 或 <td>
  • <th> 和 <td> 的区别主要是语义和默认样式（th 默认加粗居中）
  • border="1" 是为了演示，实际项目中应使用 CSS 控制边框
  • 空单元格应使用 <td>&nbsp;</td> 或 <td></td>

最佳实践 ​

  • 使用 <thead>、<tbody>、<tfoot> 分组表格内容
  • 使用 <caption> 为表格提供标题
  • 表头单元格始终使用 <th>
  • 使用 CSS 控制表格样式，不使用 HTML 属性
  • 确保表格在移动端可以水平滚动
  • 不要用表格做页面布局

下一节

继续学习：tr / th / td

参考链接 ​