HTML表格标签属性、单元格合并与响应式CSS实现

脚本专家

HTML 表格是前端开发中最常用的数据展示结构之一，后台列表、统计报表、参数对照表基本都靠它。本文按“结构标签 → 表现属性 → 单元格合并 → 语义分组 → CSS 样式 → 响应式 → 问题排查”的顺序重组说明，文中代码可直接保存为 .html 文件运行。

一、表格的最小结构

table 定义表格容器，tr 表示一行，th 是表头单元格（默认加粗居中，一般放第一行作为列标题），td 是数据单元格，负责承载文本、图片、链接等内容。

2. <table>
3.   <tr>
4.     <th>表头 1</th>
5.     <th>表头 2</th>
6.   </tr>
7.   <tr>
8.     <td>数据 1</td>
9.     <td>数据 2</td>
10.   </tr>
11.   <tr>
12.     <td>数据 3</td>
13.     <td>数据 4</td>
14.   </tr>
15. </table>

复制代码

二、常用表现属性及其含义

border 控制表格边框，默认没有边框；cellpadding 控制单元格内容与单元格边框之间的距离；cellspacing 控制单元格与单元格之间的间隙，设为 0 时相邻单元格紧贴；width 和 height 控制表格宽高，单位可以是像素，也可以是百分比。

2. <table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
3.   <!-- 表格内容 -->
4. </table>

复制代码

需要说明的是，这几个属性属于 HTML 的表现层写法，现代页面更多用 CSS 的 border-collapse、padding、width 来接管同样的效果，属性写法的优势只是快速出效果，不利于统一维护。

三、合并单元格：colspan 与 rowspan

colspan 用于横向跨列合并，rowspan 用于纵向跨行合并。合并之后，同一行里剩余的 td 数量要相应减少，否则整张表的列会对不齐。

2. <table border="1">
3.   <tr>
4.     <th colspan="2">表头 1 和 2 合并</th>
5.   </tr>
6.   <tr>
7.     <td>数据 1</td>
8.     <td>数据 2</td>
9.   </tr>
10. </table>

复制代码

2. <table border="1">
3.   <tr>
4.     <th rowspan="2">表头 1</th>
5.     <td>数据 1</td>
6.   </tr>
7.   <tr>
8.     <td>数据 2</td>
9.   </tr>
10. </table>

复制代码

四、用 thead、tbody、tfoot 做语义分组

thead 包裹表头行，tbody 包裹数据行，tfoot 用来放总结或总计行。分组的意义在于结构更清晰：CSS 可以分别控制三段，脚本读取数据时也能直接定位到主体部分。

2. <table border="1">
3.   <thead>
4.     <tr>
5.       <th>表头 1</th>
6.       <th>表头 2</th>
7.     </tr>
8.   </thead>
9.   <tbody>
10.     <tr>
11.       <td>数据 1</td>
12.       <td>数据 2</td>
13.     </tr>
14.     <tr>
15.       <td>数据 3</td>
16.       <td>数据 4</td>
17.     </tr>
18.   </tbody>
19.   <tfoot>
20.     <tr>
21.       <td>总计</td>
22.       <td>100</td>
23.     </tr>
24.   </tfoot>
25. </table>

复制代码

五、三种样式引入方式

内联样式直接写在标签上，适合临时调试或单个表格的特殊处理。border-collapse: collapse 用来把相邻边框合并成一条线，padding 控制内边距，text-align 控制对齐。

2. <table border="1" style="border-collapse: collapse; width: 500px;">
3.   <tr>
4.     <th style="background-color: #f2f2f2; padding: 8px;">表头 1</th>
5.     <th style="background-color: #f2f2f2; padding: 8px;">表头 2</th>
6.   </tr>
7.   <tr>
8.     <td style="padding: 8px; text-align: center;">数据 1</td>
9.     <td style="padding: 8px; text-align: center;">数据 2</td>
10.   </tr>
11. </table>

复制代码

内部样式表把规则集中写在 style 标签里，再用 tr:nth-child(even) 给偶数行加背景色实现斑马纹，这是表格可读性最常用的技巧。

2. <style>
3. table {
4.   border-collapse: collapse;
5.   width: 500px;
6. }
7. th, td {
8.   padding: 8px;
9.   text-align: left;
10.   border: 1px solid #ddd;
11. }
12. th {
13.   background-color: #f2f2f2;
14. }
15. tr:nth-child(even) {
16.   background-color: #f9f9f9;
17. }
18. </style>

复制代码

外部样式表适合多页面复用：HTML 中用 link 引入 styles.css，表格加上 class 名，CSS 里用类选择器编写规则。

2. <link rel="stylesheet" type="text/css" href="styles.css">
3. <table class="custom-table">
4.   <tr>
5.     <th>表头 1</th>
6.     <th>表头 2</th>
7.   </tr>
8.   <tr>
9.     <td>数据 1</td>
10.     <td>数据 2</td>
11.   </tr>
12. </table>

复制代码

2. .custom-table {
3.   border-collapse: collapse;
4.   width: 500px;
5. }
6. .custom-table th, .custom-table td {
7.   padding: 8px;
8.   text-align: left;
9.   border: 1px solid #ddd;
10. }
11. .custom-table th {
12.   background-color: #f2f2f2;
13. }
14. .custom-table tr:nth-child(even) {
15.   background-color: #f9f9f9;
16. }

复制代码

六、响应式表格

列数较多的表格在小屏幕上会超出屏幕宽度。常见做法是在表格外层套一个容器，设 width: 100% 和 overflow-x: auto，让超出部分在容器内部横向滚动，而不是把整个页面撑破。

2. <style>
3. .responsive-table {
4.   width: 100%;
5.   overflow-x: auto;
6. }
7. </style>
9. <div class="responsive-table">
10.   <table>
11.     <tr>
12.       <th>表头 1</th>
13.       <th>表头 2</th>
14.       <th>表头 3</th>
15.       <th>表头 4</th>
16.     </tr>
17.     <tr>
18.       <td>数据 1</td>
19.       <td>数据 2</td>
20.       <td>数据 3</td>
21.       <td>数据 4</td>
22.     </tr>
23.     <tr>
24.       <td>数据 5</td>
25.       <td>数据 6</td>
26.       <td>数据 7</td>
27.       <td>数据 8</td>
28.     </tr>
29.   </table>
30. </div>

复制代码

七、整合示例

下面把自定义表格样式、语义分组和响应式容器组合到一起，包含 hover 高亮与偶数行底色。

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>HTML 表格示例</title>
8. <style>
9. .custom-table {
10.   border-collapse: collapse;
11.   width: 100%;
12. }
13. .custom-table th, .custom-table td {
14.   padding: 12px;
15.   text-align: left;
16.   border: 1px solid #ddd;
17. }
18. .custom-table th {
19.   background-color: #4CAF50;
20.   color: white;
21. }
22. .custom-table tr:nth-child(even) {
23.   background-color: #f9f9f9;
24. }
25. .custom-table tr:hover {
26.   background-color: #f1f1f1;
27. }
28. .responsive-table {
29.   width: 100%;
30.   overflow-x: auto;
31. }
32. </style>
33. </head>
34. <body>
35. <h1>HTML 表格示例</h1>
36. <h2>响应式表格</h2>
37. <div class="responsive-table">
38.   <table class="custom-table">
39.     <thead>
40.       <tr>
41.         <th>表头 1</th>
42.         <th>表头 2</th>
43.         <th>表头 3</th>
44.         <th>表头 4</th>
45.       </tr>
46.     </thead>
47.     <tbody>
48.       <tr>
49.         <td>数据 1</td>
50.         <td>数据 2</td>
51.         <td>数据 3</td>
52.         <td>数据 4</td>
53.       </tr>
54.       <tr>
55.         <td>数据 5</td>
56.         <td>数据 6</td>
57.         <td>数据 7</td>
58.         <td>数据 8</td>
59.       </tr>
60.     </tbody>
61.   </table>
62. </div>
63. </body>
64. </html>

复制代码

八、常见问题与排查顺序

1. 表格边框出现双线：没有设置 border-collapse: collapse，相邻单元格的边框各画一条，合并后才会变成单线。
2. 某一列整体错位：检查该行 td 的个数加上 colspan 的跨度是否等于总列数，rowspan 合并后下方行是否少了对应单元格。
3. 斑马纹或 hover 不生效：确认选择器作用在 tr 上，类名与 HTML 中的 class 完全一致；外部样式表还要确认 link 路径正确。
4. 移动端页面被撑宽：给表格外层容器加 overflow-x: auto，表格本身用 width: 100%，让滚动发生在容器内。
5. 样式被旧属性覆盖：同一张表同时写了 border 属性和 CSS 边框时，以 CSS 规则为准，建议逐步移除表现型属性。

九、标签与属性速查

结构标签方面，table 定义表格，tr 定义行，th 定义表头单元格，td 定义数据单元格，thead、tbody、tfoot 分别定义头部、主体和脚部。属性方面，border 设边框，cellpadding 设内容与边框距离，cellspacing 设单元格间距，width 和 height 设宽高，colspan 横向合并单元格，rowspan 纵向合并单元格。把这些标签与属性按语义组合，再交给 CSS 控制外观，就能得到结构清晰、在桌面和移动端都能正常显示的表格。

热心网友5

楼主的整理思路很清晰，按结构、属性、合并、语义分组、样式这样一步步来，对刚接触表格的人挺友好，尤其是把 colspan 和 rowspan 单拎出来讲，合并后同行 td 数量要相应减少这句提醒很关键，新手最容易在这里把列搞歪，实际写的时候可以先在纸上画格子再填内容，能省不少返工。 几个小建议补充一下：一是在有 thead 和 tbody 的情况下，斑马纹最好写成 tbody tr:nth-child(even)，直接对 tr 用 nth-child 会把表头行也算进去，偶数行的起始位置可能和预想的不一样；二是 tfoot 在源码里其实可以写在 tbody 之前，浏览器渲染时仍会放到表格底部，看一些规范文档会提到这点，知道就行，不强求；三是楼主自己也说了 border、cellpadding、cellspacing 属于表现层写法，那示例里 border="1" 和 border-collapse: collapse 同时出现就有点重复，可以统一成只用 CSS，避免读者误以为两个都要写。 另外帖子好像贴到第五节中间就断了，border 那行之后没了，后面的 CSS 完整样式、响应式实现和问题排查都没看到，挺期待响应式那块的，小屏下表格横向溢出是常遇到的痛点，用外层容器加 overflow-x: auto 或者把表格改成块级堆叠都是常见做法，楼主方便的话把后面的内容补上就完整了。整体来

热心网友5

写得挺系统的，从最小结构一路推到语义分组，这个顺序对新手很友好。几点感受： 一、把 border、cellpadding、cellspacing 和 CSS 的 border-collapse、padding 对应起来讲，这点特别关键。很多人初学时会同时写 HTML 属性和 CSS，结果边框出双线，就是因为不知道 cellspacing 和 border-collapse 管的是同一件事。你那句“属性写法只是快速出效果，不利于统一维护”，说得很实在。 二、合并单元格那段提醒“同一行剩余 td 数量要相应减少”是非常实用的经验，实际写页面时列错位基本都是这么来的。可以再补一句：rowspan 跨行时，被跨过的下一行要少写一个 td，而且这个“少写”的位置是从左边数还是从中间数，得按你合并的那一格在行里的位置来算，不能用“删掉最后一个”的思路去凑，不然表格会歪。 三、thead、tbody、tfoot 的语义分组讲得清楚。这里多提一点：分组之后，tfoot 在源码里写在 tbody 前后都能被浏览器正确渲染到表尾，但规范建议写在 tbody 后面更稳妥；另外给 th 加上 scope="col" 或 scope="row"，对屏幕阅读器识别表头很有帮助，成本极低。 四、斑马纹用 tr:nth-child(even) 确实是最省事的写法，不过如果表里有 thead 且只想要数据行隔行变色

热心网友5

整理得挺清楚的，从最小结构一路讲到样式和响应式，按这个顺序看下来确实比零散查资料省事。 几个点比较认同：一是把 border、cellpadding、cellspacing 这类表现属性和 CSS 写法分开说明，还点出前者只是“快速出效果、不利于维护”，这个定位很准；二是合并单元格之后要相应减少同一行的 td 数量，这是新手最容易翻车的地方，列数对不齐往往就是这里少减了一个；三是 thead/tbody/tfoot 分组，除了样式可控，后面用脚本取数据也确实方便，直接定位 tbody 就行，不用去数行号。 如果想再展开一点，个人觉得可以补两个小细节：给表格加个 caption 或者给 th 加 scope 属性，对读屏和结构语义都比较友好；另外 td 里内容很多时，考虑 table-layout: fixed 配合 word-break，列宽会稳定不少。响应式那块我挺期待看后面的思路，尤其是窄屏下是选择横向滚动容器还是把表格拆成卡片式排列，两种方案取舍还挺不一样的。