源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 表格入门

2025/12/29
37
0

学习目标

  • 掌握 HTML 表格的基本结构与核心标签

  • 理解如何使用 colspan 和 rowspan 实现单元格合并

  • 学会通过 CSS 对表格进行美化（边框、间距、对齐、背景色等）

  • 了解 <caption>、<thead>、<tbody> 等语义化标签的用途

  • 能够创建嵌套表格并理解其适用场景

HTML 表格基础

HTML 表格用于将数据以行和列的形式组织，便于阅读与比较。常用于展示课程表、价格清单、商品信息等结构化数据。

核心标签说明

标签

作用

<table>

定义整个表格结构

<tr>

定义表格中的一行

<th>

定义表头单元格（默认加粗、居中）

<td>

定义普通数据单元格

<caption>

为表格添加标题（位于表格上方）

<thead>

定义表格的头部区域（通常包含列标题）

<tbody>

定义表格主体内容

<tfoot>

定义表格底部（如总计、备注等）

<colgroup> / <col>

对整列应用样式

单元格内可包含文本、图片、链接、列表，甚至另一个表格（即“嵌套表格”）。

基础示例

人员信息表

<table>
  <tr>
    <th>名字</th>
    <th>姓氏</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>李婷</td>
    <td>王</td>
    <td>24</td>
  </tr>
  <tr>
    <td>张伟</td>
    <td>李</td>
    <td>32</td>
  </tr>
  <tr>
    <td>赵敏</td>
    <td>陈</td>
    <td>41</td>
  </tr>
</table>

常用表格功能

1. 添加边框

Border

默认情况下，HTML 表格无边框。可通过 CSS 添加：

table, th, td {
  border: 1px solid #000;
}

此时每个单元格都有独立边框，看起来会有“双线”效果。

2. 合并边框

Collapse Borders

使用 border-collapse: collapse 将相邻边框合并为一条：

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #000;
}

3. 设置单元格内边距

Padding

提升可读性，避免文字紧贴边框：

th, td {
  padding: 12px;
}

4. 左对齐表头

默认 <th> 居中加粗，若需左对齐：

th {
  text-align: left;
}

5. 设置单元格间距

Border Spacing

不使用 collapse 时，可用 border-spacing 控制单元格之间的空白：

table {
  border-spacing: 8px;
}
/* 注意：此时不能使用 border-collapse */

6. 跨列合并

colspan

让一个单元格横跨多列：

<tr>
  <th>姓名</th>
  <th colspan="2">联系电话</th>
</tr>
<tr>
  <td>李婷</td>
  <td>138****1234</td>
  <td>010-****5678</td>
</tr>

7. 跨行合并

rowspan

让一个单元格纵跨多行：

<tr>
  <th>姓名</th>
  <td>李婷</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>138****1234</td>
</tr>
<tr>
  <td>010-****5678</td>
</tr>

8. 添加表格标题

Caption

<table>
  <caption>员工基本信息表</caption>
  <tr>
    <th>姓名</th>
    <th>部门</th>
  </tr>
  <!-- ... -->
</table>

<caption> 应紧跟在 <table> 开始标签后，对无障碍访问（如屏幕阅读器）非常重要。

9. 设置背景色

为整个表格或特定部分添加背景：

table#employee-table {
  background-color: #f9f9e6;
  width: 100%;
}
<table id="employee-table">
  <!-- 内容 -->
</table>

10. 嵌套表格

在一个 <td> 中再插入一个 <table>：

<table border="1">
  <tr>
    <td>外层表格 - 第一列</td>
    <td>
      <table border="1" style="border-color: gray;">
        <tr><td>内层表格 - 行 1</td></tr>
        <tr><td>内层表格 - 行 2</td></tr>
      </table>
    </td>
  </tr>
</table>

注意：嵌套表格会使结构复杂，影响可维护性和响应式设计，建议优先使用 CSS 布局替代。

完整示例

带样式的图书信息表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图书信息表</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      background-color: #fafafa;
    }
    caption {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
    }
    th, td {
      padding: 12px;
      text-align: left;
      border: 1px solid #ccc;
    }
    th {
      background-color: #e0e0e0;
    }
    tr:nth-child(even) {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <table>
    <caption>推荐书单</caption>
    <thead>
      <tr>
        <th>书名</th>
        <th>作者</th>
        <th>类型</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>偷书贼</td>
        <td>马克斯·苏萨克</td>
        <td>历史小说</td>
      </tr>
      <tr>
        <td>残酷王子</td>
        <td>霍莉·布莱克</td>
        <td>奇幻</td>
      </tr>
      <tr>
        <td>沉默的病人</td>
        <td>亚历克斯·麦克利兹</td>
        <td>心理悬疑</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

重点总结

功能

实现方式

基本结构

<table> → <tr> → <th>/<td>

边框美化

border + border-collapse: collapse

间距控制

padding（内边距）、border-spacing（单元格间隙）

对齐调整

text-align: left/center/right

单元格合并

colspan（跨列）、rowspan（跨行）

语义增强

使用 <caption>、<thead>、<tbody> 提升可访问性

视觉优化

背景色、斑马纹（nth-child(even)）提升可读性

思考题

  1. 为什么现代 Web 开发中不推荐频繁使用嵌套表格？有哪些更好的替代方案？

  2. border-collapse: collapse 和 border-spacing 能否同时生效？为什么？

  3. 如何让表格在手机屏幕上也能良好显示？（提示：考虑响应式设计）

小贴士：虽然 HTML 表格适合展示表格型数据，但不要用它来做页面布局！布局应使用 Flexbox 或 Grid。