程序猿指南
Search K

Appearance

6.1 表格基础 ​

关键词: HTML5表格, table元素, 表格行, 表格单元格, 表格结构, thead, tbody, tfoot, 数据展示

学习目标 ​

  • 掌握HTML5表格的基本结构和语义化用法
  • 学会正确使用table、tr、td、th等基本表格元素
  • 理解表格结构元素thead、tbody、tfoot的作用和使用方法
  • 学会创建结构清晰、语义明确的数据表格
  • 掌握表格的基本样式设置和可访问性优化

6.1.1 表格元素（table） ​

表格的基本概念 ​

HTML表格是用于展示结构化数据的最佳方式，它通过行和列的形式组织信息，使数据更易于阅读和理解。在HTML5中，表格主要用于数据展示，而不是页面布局。

html
<!-- 最基本的表格结构 -->
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

表格的语义化使用 ​

HTML5强调表格的语义化用法，表格应该用于展示相关数据，而不是用于布局目的：

html
<!-- 语义化的产品信息表格 -->
<table>
    <caption>2024年产品销售统计</caption>
    <thead>
        <tr>
            <th>产品名称</th>
            <th>销售数量</th>
            <th>销售金额</th>
            <th>增长率</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>笔记本电脑</td>
            <td>1,250台</td>
            <td>¥875,000</td>
            <td>+15%</td>
        </tr>
        <tr>
            <td>智能手机</td>
            <td>3,420台</td>
            <td>¥1,368,000</td>
            <td>+8%</td>
        </tr>
        <tr>
            <td>平板电脑</td>
            <td>890台</td>
            <td>¥267,000</td>
            <td>-3%</td>
        </tr>
    </tbody>
</table>

表格标题和描述 ​

使用caption元素为表格提供标题和描述：

html
<!-- 带有详细描述的表格 -->
<table>
    <caption>
        <strong>员工基本信息表</strong>
        <br>
        <small>统计截止至2024年1月，包含在职员工基本信息</small>
    </caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>入职日期</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>前端工程师</td>
            <td>2023-03-15</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计部</td>
            <td>UI设计师</td>
            <td>2023-07-20</td>
        </tr>
    </tbody>
</table>

6.1.2 表格行（tr） ​

表格行的基本用法 ​

<tr>元素定义表格中的行，每个表格行可以包含多个单元格：

html
<!-- 表格行的基本结构 -->
<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

行的语义化分组 ​

将相关的行进行逻辑分组，提高表格的可读性：

html
<!-- 分组的表格行 -->
<table>
    <caption>季度销售报告</caption>
    <thead>
        <tr>
            <th>月份</th>
            <th>销售额</th>
            <th>利润</th>
        </tr>
    </thead>
    <tbody>
        <!-- 第一季度 -->
        <tr class="quarter-header">
            <td colspan="3"><strong>第一季度</strong></td>
        </tr>
        <tr>
            <td>1月</td>
            <td>¥150,000</td>
            <td>¥30,000</td>
        </tr>
        <tr>
            <td>2月</td>
            <td>¥180,000</td>
            <td>¥36,000</td>
        </tr>
        <tr>
            <td>3月</td>
            <td>¥200,000</td>
            <td>¥40,000</td>
        </tr>
        
        <!-- 第二季度 -->
        <tr class="quarter-header">
            <td colspan="3"><strong>第二季度</strong></td>
        </tr>
        <tr>
            <td>4月</td>
            <td>¥220,000</td>
            <td>¥44,000</td>
        </tr>
        <tr>
            <td>5月</td>
            <td>¥250,000</td>
            <td>¥50,000</td>
        </tr>
        <tr>
            <td>6月</td>
            <td>¥280,000</td>
            <td>¥56,000</td>
        </tr>
    </tbody>
</table>

行的属性和可访问性 ​

为表格行添加必要的属性以提高可访问性：

html
<!-- 具有可访问性属性的表格行 -->
<table>
    <thead>
        <tr>
            <th id="name">姓名</th>
            <th id="age">年龄</th>
            <th id="city">城市</th>
            <th id="status">状态</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="name">张三</td>
            <td headers="age">28</td>
            <td headers="city">北京</td>
            <td headers="status">在职</td>
        </tr>
        <tr>
            <td headers="name">李四</td>
            <td headers="age">32</td>
            <td headers="city">上海</td>
            <td headers="status">在职</td>
        </tr>
        <tr class="inactive">
            <td headers="name">王五</td>
            <td headers="age">29</td>
            <td headers="city">广州</td>
            <td headers="status">离职</td>
        </tr>
    </tbody>
</table>

6.1.3 表格单元格（td、th） ​

数据单元格（td） ​

<td>元素用于定义表格中的数据单元格：

html
<!-- 数据单元格的基本使用 -->
<table>
    <tr>
        <td>姓名</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td>25</td>
    </tr>
    <tr>
        <td>职业</td>
        <td>软件工程师</td>
    </tr>
</table>

标题单元格（th） ​

<th>元素用于定义表格的标题单元格，具有特殊的语义意义：

html
<!-- 标题单元格的使用 -->
<table>
    <tr>
        <th>产品名称</th>
        <th>价格</th>
        <th>库存</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>苹果手机</td>
        <td>¥5,999</td>
        <td>50</td>
        <td>有货</td>
    </tr>
    <tr>
        <td>小米手机</td>
        <td>¥2,999</td>
        <td>30</td>
        <td>有货</td>
    </tr>
</table>

单元格的跨越 ​

使用colspan和rowspan属性让单元格跨越多列或多行：

html
<!-- 单元格跨越示例 -->
<table>
    <tr>
        <th colspan="2">个人信息</th>
        <th colspan="2">联系方式</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>13800138000</td>
        <td>zhangsan@example.com</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>32</td>
        <td>13900139000</td>
        <td>lisi@example.com</td>
    </tr>
</table>
html
<!-- 复杂的单元格跨越 -->
<table>
    <tr>
        <th>科目</th>
        <th>上学期</th>
        <th>下学期</th>
        <th>年度平均</th>
    </tr>
    <tr>
        <td>数学</td>
        <td>85</td>
        <td>90</td>
        <td rowspan="3">87.5</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>88</td>
        <td>92</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>82</td>
        <td>88</td>
    </tr>
</table>

单元格的作用域 ​

使用scope属性明确标题单元格的作用范围：

html
<!-- 使用scope属性的表格 -->
<table>
    <tr>
        <th scope="col">月份</th>
        <th scope="col">销售额</th>
        <th scope="col">增长率</th>
    </tr>
    <tr>
        <th scope="row">1月</th>
        <td>¥100,000</td>
        <td>+10%</td>
    </tr>
    <tr>
        <th scope="row">2月</th>
        <td>¥120,000</td>
        <td>+15%</td>
    </tr>
    <tr>
        <th scope="row">3月</th>
        <td>¥150,000</td>
        <td>+20%</td>
    </tr>
</table>

6.1.4 表格结构元素（thead、tbody、tfoot） ​

表格头部（thead） ​

<thead>元素用于定义表格的头部区域，通常包含标题行：

html
<!-- 表格头部的使用 -->
<table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>计算机1班</td>
            <td>85</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>计算机2班</td>
            <td>92</td>
        </tr>
    </tbody>
</table>

表格主体（tbody） ​

<tbody>元素用于定义表格的主体内容，包含数据行：

html
<!-- 多个tbody的使用 -->
<table>
    <thead>
        <tr>
            <th>部门</th>
            <th>姓名</th>
            <th>职位</th>
            <th>工资</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="4"><strong>技术部</strong></td>
        </tr>
        <tr>
            <td>技术部</td>
            <td>张三</td>
            <td>前端工程师</td>
            <td>¥12,000</td>
        </tr>
        <tr>
            <td>技术部</td>
            <td>李四</td>
            <td>后端工程师</td>
            <td>¥15,000</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="4"><strong>设计部</strong></td>
        </tr>
        <tr>
            <td>设计部</td>
            <td>王五</td>
            <td>UI设计师</td>
            <td>¥10,000</td>
        </tr>
        <tr>
            <td>设计部</td>
            <td>赵六</td>
            <td>UX设计师</td>
            <td>¥11,000</td>
        </tr>
    </tbody>
</table>

表格尾部（tfoot） ​

<tfoot>元素用于定义表格的尾部区域，通常包含汇总信息：

html
<!-- 完整的表格结构 -->
<table>
    <caption>月度销售报告</caption>
    <thead>
        <tr>
            <th>产品</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>笔记本电脑</td>
            <td>10</td>
            <td>¥5,000</td>
            <td>¥50,000</td>
        </tr>
        <tr>
            <td>智能手机</td>
            <td>25</td>
            <td>¥3,000</td>
            <td>¥75,000</td>
        </tr>
        <tr>
            <td>平板电脑</td>
            <td>15</td>
            <td>¥2,000</td>
            <td>¥30,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总计</th>
            <td>50</td>
            <td>-</td>
            <td>¥155,000</td>
        </tr>
    </tfoot>
</table>

复杂表格结构示例 ​

html
<!-- 复杂的表格结构示例 -->
<table>
    <caption>2024年第一季度财务报表</caption>
    <thead>
        <tr>
            <th rowspan="2">项目</th>
            <th colspan="3">月份</th>
            <th rowspan="2">季度总计</th>
        </tr>
        <tr>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">收入</th>
            <td>¥500,000</td>
            <td>¥600,000</td>
            <td>¥700,000</td>
            <td>¥1,800,000</td>
        </tr>
        <tr>
            <th scope="row">支出</th>
            <td>¥300,000</td>
            <td>¥350,000</td>
            <td>¥400,000</td>
            <td>¥1,050,000</td>
        </tr>
        <tr>
            <th scope="row">利润</th>
            <td>¥200,000</td>
            <td>¥250,000</td>
            <td>¥300,000</td>
            <td>¥750,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">利润率</th>
            <td>40%</td>
            <td>41.7%</td>
            <td>42.9%</td>
            <td>41.7%</td>
        </tr>
    </tfoot>
</table>

表格的基本样式 ​

为表格添加基本的CSS样式以提高可读性：

css
/* 表格基本样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

caption {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: left;
}

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

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

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

tfoot {
    font-weight: bold;
    background-color: #e9ecef;
}

/* 响应式表格 */
@media (max-width: 768px) {
    table {
        font-size: 0.8rem;
    }
    
    th, td {
        padding: 0.5rem;
    }
}

本节要点回顾 ​

  • 表格基本结构：使用table、tr、td、th元素构建基本的表格结构
  • 语义化使用：表格应用于数据展示，使用caption提供表格标题和描述
  • 单元格类型：区分数据单元格（td）和标题单元格（th）的不同用途
  • 结构化组织：使用thead、tbody、tfoot将表格内容进行逻辑分组
  • 可访问性优化：使用scope、headers等属性提高表格的可访问性

相关学习资源 ​

常见问题FAQ ​

Q: 什么时候应该使用表格？ ​

A: 表格应该用于展示结构化的数据，比如统计数据、对比信息、列表等。不应该用表格来进行页面布局，应该使用CSS Grid或Flexbox。

Q: th和td元素有什么区别？ ​

A: th元素用于表格标题，具有语义意义，浏览器会对其进行特殊处理（如加粗显示），而td元素用于普通的数据单元格。th有助于屏幕阅读器理解表格结构。

Q: 是否必须使用thead、tbody、tfoot？ ​

A: 不是必须的，但强烈建议使用，特别是对于复杂的表格。这些元素有助于提高表格的语义性和可访问性，也便于CSS样式的应用。

Q: 如何让表格在移动设备上更好地显示？ ​

A: 可以使用响应式设计技术，如减小字体大小、调整内边距、使用水平滚动，或者在小屏幕上将表格转换为卡片式布局。

Q: 表格的caption元素应该包含什么内容？ ​

A: caption应该包含对表格内容的简洁描述，帮助用户理解表格的目的和内容。可以包含表格标题、数据来源、统计时间等信息。

下一节预览：下一节我们将学习第6章第2节 - 表格高级特性，重点介绍单元格合并、表格分组、响应式处理等高级功能。