企业官网建设流程全解析

HTML表格这个知识点，说简单也确实简单，不就是table、tr、td三个标签一拼嘛。但我做前端这几年，发现好多人（包括刚入行的新同事）在最基础的表格上翻车翻得莫名其妙：明明在网页里写好了三行两列，预览出来却是歪的；想合并单元格，一合并就把后面的结构全挤乱了；好不容易做出一个工整的表格，往移动端一塞，整个页面直接撑出一条横向滚动条。这些都是“基本用法”里藏着的老问题。这篇文章不打算给你讲教科书级别的概念，我想以实际项目里踩过的坑为线索，把表格的构建逻辑、合并技巧、语义化习惯以及自适应方案一次性讲清楚。无论你是刚开始学HTML的新手，还是写了两年前端想补基础细节的人，这篇都适合你。

1. 表格的基本框架：table、tr、td到底是怎么叠在一起的

很多教程一上来就让你默写：

<table> <tr> <td>张三</td> <td>25</td> </tr> </table>

默写是对的，但如果你不理解为什么是table套tr、tr再套td，你后续一定会出问题。我把这三层关系用最直白的话拆开说。

1.1 行和单元格：先看懂tr与td

table是整个表格的容器，这个没问题。但真正决定表格“长什么样”的，是里面的行和格。

• tr是“表格行”（table row），代表一行。
• td是“表格数据单元格”（table data），代表一行里的一格。

在HTML的表格结构里，列不是显式声明的，这一点特别反直觉。你写一个<tr>，里面放几个<td>，这一行就有几列；再写一个<tr>，里面想当然地只放了两个<td>，结果第二行就只有两格，整个表格右侧缺了一大块，非常难看。所以新手一定要在心里建立一个概念：列数是靠每一行内部的td数量撑出来的，不是靠table标签声明的。

打个比方，整个表格就是一个Excel区域，每一行是一串连续的格子，你往这行里塞了几个格子，这行就有几列。想要表格整体看上去是个完整的矩形，每一行的格子数必须相等，否则就会出现“缺格”或“错位”。

1.2 表头单元格th和普通单元格td的分工

表头和数据单元格的区别，新手经常忽略。th是“表头单元格”（table header），它和td最大的区别有两个：

第一，浏览器默认会给th里的文字加粗并居中，td默认是普通左对齐。

第二，th带有“这是表头”的语义，屏幕阅读器会把它读成某行或某列的名称，而td就是具体数据。这在无障碍访问里很重要，后面第4节我会专门展开。

实际工作中，绝大多数业务表格的表头都长这样：

<table> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>李雷</td> <td>28</td> <td>杭州</td> </tr> <tr> <td>韩梅梅</td> <td>26</td> <td>上海</td> </tr> </table>

这里第一行用了th，后面是真正的数据行，全用td。这样浏览器渲染出来，第一行天然比其他行醒目，结构也一目了然。

1.3 列数靠“行内的td数量”隐式决定，这是很多人栽的地方

前几天同事让我帮他看一个表格，他写了五行，每一行内容不一样，但有个共同点：有的行放了3个td，有的放了4个td。浏览器最后渲染出来的效果就是“参差不齐的墙”，第2行和第4行多了半截空位，直接把他整懵了。

这类问题出现的原因就是我上面说的：没有在写完后数自己一行到底放了几个格子。你写表格的时候，把每一行的td数量写成一致，是最基本的要求。如果不一致，建议立刻用编辑器光标扫一眼，或者干脆数一下。刚开始觉得烦，但这个好习惯能免掉后面一大部分调试的时间，尤其是当表格里还混着colspan、rowspan的时候，一个td数量错了，整个表格的布局逻辑全乱了。

还有一点要注意：td和th的数量要求不要求严格统一？严格来说不一定，因为合并单元格可以故意让某些行少几个格，但如果你没做任何合并，那么每一行的格数必须完全相同，没有商量余地。

2. border、cellspacing、cellpadding：老项目里最常见的三个属性

如果你维护过一两年前的老项目，或者说翻过网上一些古早教程，大概率会见过这种代码：

<table border="1" cellspacing="0" cellpadding="5">

这三个属性在早期的HTML里几乎是标配，很多人背下来了却不知道它们各自控制哪条线、哪个间距。我一个个拆开讲，然后再说明为什么现在不推荐这样写。

2.1 这三个属性分别控制哪条线

border="1"控制的是表格最外层边框的粗细，单位是像素。但注意，它只给表格最外框加线，并不会自动给每个单元格加线。所以如果你只写border="1"，你会得到一个只有外框没有内线的“空心大格子”，很多新手第一次看到这个结果都以为自己写错了。

cellspacing控制单元格与单元格之间的空隙，也就是“单元格之间的间距”。早期网页里那一条条灰色的线，其实不是真正的边框线，而是单元格间距暴露出来的底色。cellspacing="0"的意思是让单元格之间没有任何空隙，这时你要想画线，就得靠每个单元格自己的边框。

cellpadding控制的是单元格内部文字与单元格边框之间的内边距，可以简单理解成“每个格子里的留白”。它的值越大，单元格里的内容离边框越远，格子和格子之间的距离感觉上也会变大。

三句话总结：border管最外面的线，cellspacing管格子之间的缝，cellpadding管格子里的留白。

2.2 为什么现在不推荐在标签里写样式属性

HTML5规范里，border、cellspacing、cellpadding这三个属性已经被标记为“过时的、不推荐使用的呈现性属性”。它们不是不能解析，只是标准不再鼓励你用它们来布置样式。

这背后是HTML和CSS分离的核心理念：HTML负责定义内容结构，样式交给CSS。如果每个表格都在标签里塞一堆border="1"、bgcolor="#ccc"之类的代码，页面的结构层会变得极其臃肿，后期想改全站风格，就得一个个去找表格改属性，改到怀疑人生。而用CSS之后，只需要改一处样式表，所有表格都会相应变化。这就是为什么现在规范不推荐在HTML里写这些属性：不是语法问题，是维护成本问题。

我个人的习惯是：结构标签里只留结构和内容相关的属性（比如colspan、rowspan这种决定单元格占有方式的），跟外观相关的一切都搬到CSS里。

2.3 用CSS重写一套“干净的表格边框”

写一个不加任何样式属性的表格，然后用CSS补齐边框，这是现代正路。一个最简单的实现：

<table> <tr> <th>产品</th> <th>价格</th> </tr> <tr> <td>键盘</td> <td>299</td> </tr> <tr> <td>鼠标</td> <td>129</td> </tr> </table>

table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px 12px; }

这里的border-collapse: collapse是把单元格的两层边框合并成一条线，避免出现双线。后面第5节我会专门细说这个属性。

这样写出来的表格清爽、干净，而且所有样式都能用CSS统一管理，这才是现代前端该有的写法。至于border="1"这种写法，不是不能用，但最好只在学基础、做DEMO时用来快速看效果，正式项目里还是别带节奏了。

3. 合并单元格：colspan和rowspan的两种合并逻辑

表格里最刺激的一趴来了：合并单元格。业务里经常要搞一个“跨多列的标题行”或者“跨多行的分组行”，本质就是让某个单元格占据多个列或行的位置。这个功能的核心是colspan和rowspan两个属性，很多人知道它们的存在，但用的时候总是算不准结构。

3.1 横向合并colspan：合并列

colspan的作用是让一个单元格横向占据多个列的位置。值写成几，它就横跨几列。

比如你要做一个表头，第一行只有一格，但它要横跨整行3列的宽度：

<table> <tr> <th colspan="3">第一季度销售汇总</th> </tr> <tr> <th>月份</th> <th>销售额</th> <th>目标</th> </tr> <tr> <td>1月</td> <td>10000</td> <td>8000</td> </tr> </table>

这里关键是：被colspan合并掉的列，在那一行里不用再写对应的td。第一行只有一个th却占了3列的宽度，后面的行还是维持3列的正常结构。

3.2 纵向合并rowspan：行数会被悄悄“吃掉”

rowspan比colspan更容易出错。它的逻辑是：让某个单元格纵向跨越多行。比如你想做一个“班主任”单元格，它要同时覆盖两行学生的信息：

<table> <tr> <th>姓名</th> <th>班级</th> </tr> <tr> <td>李雷</td> <td rowspan="2">三年级二班</td> </tr> <tr> <td>韩梅梅</td> </tr> </table>

注意看，最后一个<tr>里只有<td>韩梅梅</td>，没有班级那一格了。为什么？因为“三年级二班”这个单元格已经通过rowspan="2"沿纵向占据了这一行的位置。你去给这行再加一个班级td，就会平白多出一列来，整个表格错位。

这里我要强调一个心法：横向合并，是减少当前行的td数量；纵向合并，是减少合并范围所覆盖的后续行里的td数量。你只要记住，合并单元格的本质是“这个位置已经被占掉了，后面的数据不许再占”，你就不会多写格子了。

3.3 合并时最经典的Bug：单元格数量多算了

我接手过好几次这种代码：第二个tr里写了td rowspan="3"，结果它后面又跟着写了几个td，整个页面渲染出来，表格斜着裂开一道口子，需要盯半天才能看出问题出在哪。

排查方法很简单：写完表格后，在脑子里把每一行拆开算一遍“实际占用的列数”。规则是：一个普通td占1列，一个colspan="3"的td占3列，一个rowspan="2"的td在它所在的行里占1列，但它会影响到后续rowspan值减1行里各少掉1列。

举个例子，假设一个表格总共4列，第一行的第二个单元格是rowspan="3"，那么第一行剩下的td数量加上这个rowspan单元格占用的1列，必须等于4。第二行和第三行，因为已经被占掉了1列，所以各行实际的td数量应该各只有3个。如果你在第二行写了4个td，那就多了一个，表格必乱。

这个“手动数列数”的习惯，是我强烈建议你养成的。尤其当你做一个课程表或者考勤表，合并单元格一多，不在脑子里建立一个“网格坐标”概念，写出来的东西基本是必崩。

4. 别把结构化当摆设：thead、tbody、tfoot和caption

基础表格写多了以后，你可能会觉得用table、tr、td够用了啊，为什么还要学thead、tbody、tfoot、caption？我当年也有这个疑惑。直到我维护一个几千行数据的大表格，被浏览器渲染性能和读屏效果折磨过之后，才彻底意识到这些标签不是摆设。

4.1 浏览器偷偷帮你补tbody这件事

先说一个大家可能不知道的事实：即使你在HTML里完全不写tbody，浏览器在解析时也会自动给表格包一层tbody。不信你可以打开浏览器开发者工具，查看任何一个简单的表格DOM，绝大多数情况下你会看到浏览器自动生成了<tbody>包裹着你的tr。

这就意味着，在浏览器眼里，一个标准的表格结构其实一直是“table->thead/tbody”这样的层级。你手动写不写，只是“主动”和“被动”的区别。既然浏览器都要补，不如我们主动写清楚，反正成本不高，还能让代码结构一目了然。

一个完整结构的正确写法是这样：

<table> <caption>2024年上半年各区域营收</caption> <thead> <tr> <th>区域</th> <th>上半年营收</th> <th>同比</th> </tr> </thead> <tbody> <tr> <td>华东</td> <td>1200万</td> <td>+15%</td> </tr> <tr> <td>华北</td> <td>980万</td> <td>+8%</td> </tr> </tbody> <tfoot> <tr> <td>合计</td> <td>2180万</td> <td>+12%</td> </tr> </tfoot> </table>

thead放表头行，tbody放主体数据，tfoot放汇总行。浏览器滚动页面的时候，thead在很多场景下可以被固定住，便于用户保持表头可见。而tfoot则让汇总信息有了明确的语义归属。这些都让后续的CSS选择器和JavaScript操作变得更方便。比如你想给所有数据行加样式，直接tbody tr一把梭，不用再一个个避开表头行。

4.2 scope属性与屏幕阅读器的关系

th加一个scope属性，是我认为最容易被忽略但最能提升表格可用性的细节。scope="col"表示这个表头是这一列的“列标题”，scope="row"表示它是这一行的“行标题”。

屏幕阅读器在朗读表格内容时，遇到一个数据单元格，会向用户报告“对应的表头是什么”。如果你不给th标scope，很多读屏软件只能机械地把数据念出来，用户根本不知道这串数字是“销售额”还是“利润”。加了这个属性之后，读屏软件能把“华东，上半年营收，1200万，同比，增加15%”这样的信息有序地读出来，对于视障用户来说体验完全不同。

实际写的时候很简单：

<tr> <th scope="col">区域</th> <th scope="col">上半年营收</th> <th scope="col">同比</th> </tr> <tr> <th scope="row">华东</th> <td>1200万</td> <td>+15%</td> </tr>

还有一点，scope="row"那个单元格我用的是th而不是td，这样整行的第一个单元格在语义上就摇身变成了“行的标题”，配合scope属性，整个表的结构读起来清清楚楚。这是很多前端老手都在用的小习惯。

4.3 caption：给表格加一个“题目”

caption标签的作用是给表格添加一个标题，位置默认在表格上方居中。新手往往直接在外面套一个<h3>或者<div>来当标题，那当然也能看到效果，但语义上差很多。caption是表格内部的自然标题，读屏软件会优先读它，搜索引擎爬虫也会把它当作表格内容的概括信息。

如果你担心默认的caption样式不好看，完全可以通过CSS去调整：

caption { caption-side: top; text-align: left; font-weight: bold; padding-bottom: 8px; }

caption-side甚至可以设成bottom，让标题显示在表格下方，不过常见场景还是放在上方居多。我的经验是：凡是独立成块的业务数据表格，尽量都加上caption，它既是语义需要，也是基础的无障碍优化手段。

5. 用CSS接管表格长相：边框、斑马纹和布局模式

结构写好了，接下来就是表格好不好看的问题。这一步里几个CSS属性新人特别容易混，分别是border-collapse、border-spacing和table-layout。我把它们一次捋明白。

5.1 border-collapse与border-spacing的相爱相杀

默认状态下，每个单元格都有独立的边框，两个单元格靠在一起时，会出现两条相邻的线，总宽度看起来比实际大一倍，特丑。border-collapse: collapse的作用就是让相邻单元格的边框合并成一条。

但很多人不知道，一旦你设置了border-collapse: collapse，border-spacing属性就会失效。border-spacing是专门用来设置单元格间距的，它只作用于border-collapse: separate模式下。所以如果你发现“我明明设了border-spacing怎么没反应”，十有八九是上面还叠加了border-collapse: collapse。

实际项目里，我们通常的做法是：

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

这样最简单，也最常用。如果你想做单元格之间有间隙的表格（比如某些卡片风格的表格），就得用border-collapse: separate加border-spacing：

table { border-collapse: separate; border-spacing: 8px; } th, td { border: 1px solid #ddd; background: #fafafa; }

这时的表格看起来更像是一排排独立的卡片，中间有明显的空隙。两种风格没有绝对优劣，看设计稿要求。

5.2 table-layout: fixed能让你少掉一半头发

表格布局还有一个极其折磨人的问题：列宽。默认的table-layout: auto模式下，浏览器会根据每一列中最宽的内容来自动分配列宽。这听起来很智能，但数据一旦复杂起来，比如某一列里有个超长的URL，浏览器反复重新计算列宽，页面渲染性能下降，而且列宽的分配结果常常不符合预期。

table-layout: fixed把列宽的“分配权”从内容手里夺了回来：表格总宽度一旦定下，浏览器就按第一行（或你指定的列宽）平均分配，不再根据内容反复调整。这样不仅渲染速度更快，而且列宽变得可控。

设置方式可以这样：

table { table-layout: fixed; width: 100%; } th, td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

如果你希望某一列宽一点，给这一列的th设width就行，其他列会自动按剩余宽度分配。这个组合是后台管理系统里处理表格长文本的神器，配合文本溢出省略号，能让表格在数据很脏的情况下依然保持工整。

5.3 斑马纹和悬停高亮，两个最简单的美化手段

斑马纹用:nth-child或者:nth-of-type就能实现：

tbody tr:nth-child(odd) { background-color: #f7f9fc; }

这个选择器表示“每个奇数行的背景色设为浅灰蓝”。浏览器从1开始计数，奇数行是第1、3、5……行，所以你看到的效果是每隔一行变色，也就是常说的斑马纹。

悬停高亮也很简单：

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

这两个加一起，表格的辨识度会明显提高。在大量数据的表格里，用户能快速锁定当前看的那一行，鼠标悬停也别再怕对错位置。我还试过配合transition加一个极短的背景过渡，效果会更柔和，但要注意别把过渡时间设太长，表格里追求的是即时反馈，像background-color 0.2s ease就够。

6. 表格自适应宽度：移动端不再把页面撑破

最后这个部分，是我觉得最实用的，也是最容易在面试和工作中被问到的：表格超出屏幕宽度了怎么办。很多新手把表格一做完，在电脑上看着没问题，一到手机上就原形毕露，页面被撑出横向滚动条。这里给你两条实用路线，以及我的选择建议。

6.1 横向滚动方案：overflow-x: auto

最简单的方案是给表格包一层容器：

<div class="table-wrapper"> <table> ... </table> </div>

.table-wrapper { overflow-x: auto; }

这样当表格宽度超过容器时，容器内部会出现横向滚动条，页面本身不会被撑破。代价是用户需要在手机上左右滑动才能看全内容，体验一般，但胜在实现成本极低，而且表格原有的结构一点不变。

这个方案适合列数多、每列内容重要的表格，比如财务报表、订单明细，用户的耐心值比较高，滑动查看可以接受。

6.2 卡片化方案：用data-label把表头塞进每个单元格

如果你不想让用户在手机上横向滑动，那就需要用另一种思路：在小屏幕上把表格降级成“卡片列表”。做法是，把每一行变成一张卡片，每一格变成卡片里的“字段：值”的样式。

实现上有个常用技巧，给表头th和单元格td建立配对关系：给th设置>@media (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } tr { margin-bottom: 12px; border: 1px solid #ddd; border-radius: 6px; padding: 8px; } td { display: flex; justify-content: space-between; border: none; padding: 6px 0; } td::before { content: attr(data-label); font-weight: bold; } }

这里的核心是td::before里的attr(data-label)，CSS可以读取HTML属性值，把它展示在伪元素里。然后flex布局把标签和值放在一行两端，看起来就像：

姓名：李雷 年龄：28 城市：杭州

每条记录一张卡片，上下排列。用户在手机上完全不需要横向滚动，信息一对一直观。代价是代码量多一点，而且每一行数据的td上都要记得写>