HTML 的＜table＞元素-开发者社区

1. 引言

在网页开发中，表格是展示结构化数据最直观的方式之一。无论是商品列表、成绩单、财务报表，还是后台管理系统的数据展示，<table>元素都扮演着不可或缺的角色。本文将带你系统学习 HTML 表格的完整知识体系，从基础语法到高级技巧，帮助你快速掌握并灵活运用。

2. 表格的基本结构

一个标准的 HTML 表格由<table>标签包裹，内部包含若干行<tr>（table row）和单元格。单元格又分为表头单元格<th>（table header）和普通单元格<td>（table data）。

<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>

在这个例子中，第一行使用<th>定义表头，后续行使用<td>定义数据单元格。浏览器默认会给表头加粗并居中显示。

3. 表格的语义化标签

为了让表格结构更清晰、更利于 SEO 和屏幕阅读器解析，HTML5 引入了三个语义化标签：

<thead>：定义表格的表头区域
<tbody>：定义表格的主体区域
<tfoot>：定义表格的页脚区域

<table><thead><tr><th>产品</th><th>价格</th><th>库存</th></tr></thead><tbody><tr><td>手机</td><td>¥2999</td><td>120</td></tr><tr><td>耳机</td><td>¥399</td><td>500</td></tr></tbody><tfoot><tr><tdcolspan="2">总计</td><td>620</td></tr></tfoot></table>

使用这些语义化标签后，浏览器可以独立渲染表头和表体，在长表格滚动时表头可以固定不动，提升用户体验。

4. 合并单元格

在实际开发中，经常需要合并单元格来满足复杂的布局需求。HTML 提供了两个属性：

colspan：横向合并列
rowspan：纵向合并行

<tableborder="1"><tr><th>姓名</th><thcolspan="2">联系方式</th></tr><tr><td>王五</td><td>138****1234</td><td>wangwu@example.com</td></tr><tr><tdrowspan="2">部门</td><td>技术部</td><td>研发一组</td></tr><tr><td>产品部</td><td>设计二组</td></tr></table>

colspan="2"让「联系方式」表头横跨两列，rowspan="2"让「部门」单元格纵向占据两行。合并单元格时要注意行列数量的平衡，避免表格结构错乱。

5. 表格常用属性

5.1 border 属性

border属性用于设置表格边框的宽度：

<tableborder="1"><!-- 表格内容 --></table>

不过在实际项目中，更推荐使用 CSS 来控制边框样式，这样更灵活且便于维护。

5.2 cellpadding 与 cellspacing

cellpadding：单元格内边距，即内容与边框之间的距离
cellspacing：单元格之间的间距

<tableborder="1"cellpadding="10"cellspacing="5"><!-- 表格内容 --></table>

这两个属性在 HTML5 中已不推荐使用，建议改用 CSS 的padding和border-spacing属性。

5.3 width 与 align

width设置表格宽度，align控制表格在页面中的对齐方式：

<tablewidth="80%"align="center"><!-- 表格内容 --></table>

同样，这些属性也建议用 CSS 替代，例如width: 80%; margin: 0 auto;。

6. 表格的 CSS 美化

现代开发中，表格的样式几乎全部由 CSS 控制。下面是一个常见的表格美化示例：

table{width:100%;border-collapse:collapse;font-family:Arial,sans-serif;}th, td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd;}th{background-color:#4CAF50;color:white;}tr:hover{background-color:#f5f5f5;}

<table><thead><tr><th>姓名</th><th>分数</th></tr></thead><tbody><tr><td>小明</td><td>95</td></tr><tr><td>小红</td><td>88</td></tr></tbody></table>

border-collapse: collapse可以合并相邻单元格的边框，让表格看起来更简洁。:hover伪类可以实现鼠标悬停高亮效果，提升交互体验。

7. 响应式表格

在移动端，宽表格往往会导致页面横向滚动，影响阅读体验。常见的解决方案是使用 CSS 让表格在小屏幕上以卡片形式展示：

@media(max-width:600px){table, thead, tbody, th, td, tr{display:block;}thead tr{position:absolute;top:-9999px;left:-9999px;}tr{margin-bottom:15px;border:1px solid #ccc;}td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%;}td:before{position:absolute;left:6px;content:attr(data-label);font-weight:bold;}}

<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><tddata-label="姓名">张三</td><tddata-label="年龄">25</td></tr></tbody></table>

通过data-label属性配合 CSS 的:before伪元素，在移动端为每个单元格添加标签，实现卡片式布局。

8. 表格的可访问性

为了让屏幕阅读器用户也能正确理解表格内容，建议添加以下属性：

<table><caption>2024 年第一季度销售报表</caption><thead><tr><thscope="col">月份</th><thscope="col">销售额</th></tr></thead><tbody><tr><thscope="row">一月</th><td>¥120,000</td></tr></tbody></table>