HTML表格这个知识点说简单也确实简单不就是table、tr、td三个标签一拼嘛。但我做前端这几年发现好多人包括刚入行的新同事在最基础的表格上翻车翻得莫名其妙明明在网页里写好了三行两列预览出来却是歪的想合并单元格一合并就把后面的结构全挤乱了好不容易做出一个工整的表格往移动端一塞整个页面直接撑出一条横向滚动条。这些都是“基本用法”里藏着的老问题。这篇文章不打算给你讲教科书级别的概念我想以实际项目里踩过的坑为线索把表格的构建逻辑、合并技巧、语义化习惯以及自适应方案一次性讲清楚。无论你是刚开始学HTML的新手还是写了两年前端想补基础细节的人这篇都适合你。1. 表格的基本框架table、tr、td到底是怎么叠在一起的很多教程一上来就让你默写table tr td张三/td td25/td /tr /table默写是对的但如果你不理解为什么是table套tr、tr再套td你后续一定会出问题。我把这三层关系用最直白的话拆开说。1.1 行和单元格先看懂tr与tdtable是整个表格的容器这个没问题。但真正决定表格“长什么样”的是里面的行和格。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 td28/td td杭州/td /tr tr td韩梅梅/td td26/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 border1 cellspacing0 cellpadding5这三个属性在早期的HTML里几乎是标配很多人背下来了却不知道它们各自控制哪条线、哪个间距。我一个个拆开讲然后再说明为什么现在不推荐这样写。2.1 这三个属性分别控制哪条线border1控制的是表格最外层边框的粗细单位是像素。但注意它只给表格最外框加线并不会自动给每个单元格加线。所以如果你只写border1你会得到一个只有外框没有内线的“空心大格子”很多新手第一次看到这个结果都以为自己写错了。cellspacing控制单元格与单元格之间的空隙也就是“单元格之间的间距”。早期网页里那一条条灰色的线其实不是真正的边框线而是单元格间距暴露出来的底色。cellspacing0的意思是让单元格之间没有任何空隙这时你要想画线就得靠每个单元格自己的边框。cellpadding控制的是单元格内部文字与单元格边框之间的内边距可以简单理解成“每个格子里的留白”。它的值越大单元格里的内容离边框越远格子和格子之间的距离感觉上也会变大。三句话总结border管最外面的线cellspacing管格子之间的缝cellpadding管格子里的留白。2.2 为什么现在不推荐在标签里写样式属性HTML5规范里border、cellspacing、cellpadding这三个属性已经被标记为“过时的、不推荐使用的呈现性属性”。它们不是不能解析只是标准不再鼓励你用它们来布置样式。这背后是HTML和CSS分离的核心理念HTML负责定义内容结构样式交给CSS。如果每个表格都在标签里塞一堆border1、bgcolor#ccc之类的代码页面的结构层会变得极其臃肿后期想改全站风格就得一个个去找表格改属性改到怀疑人生。而用CSS之后只需要改一处样式表所有表格都会相应变化。这就是为什么现在规范不推荐在HTML里写这些属性不是语法问题是维护成本问题。我个人的习惯是结构标签里只留结构和内容相关的属性比如colspan、rowspan这种决定单元格占有方式的跟外观相关的一切都搬到CSS里。2.3 用CSS重写一套“干净的表格边框”写一个不加任何样式属性的表格然后用CSS补齐边框这是现代正路。一个最简单的实现table tr th产品/th th价格/th /tr tr td键盘/td td299/td /tr tr td鼠标/td td129/td /tr /tabletable { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px 12px; }这里的border-collapse: collapse是把单元格的两层边框合并成一条线避免出现双线。后面第5节我会专门细说这个属性。这样写出来的表格清爽、干净而且所有样式都能用CSS统一管理这才是现代前端该有的写法。至于border1这种写法不是不能用但最好只在学基础、做DEMO时用来快速看效果正式项目里还是别带节奏了。3. 合并单元格colspan和rowspan的两种合并逻辑表格里最刺激的一趴来了合并单元格。业务里经常要搞一个“跨多列的标题行”或者“跨多行的分组行”本质就是让某个单元格占据多个列或行的位置。这个功能的核心是colspan和rowspan两个属性很多人知道它们的存在但用的时候总是算不准结构。3.1 横向合并colspan合并列colspan的作用是让一个单元格横向占据多个列的位置。值写成几它就横跨几列。比如你要做一个表头第一行只有一格但它要横跨整行3列的宽度table tr th colspan3第一季度销售汇总/th /tr tr th月份/th th销售额/th th目标/th /tr tr td1月/td td10000/td td8000/td /tr /table这里关键是被colspan合并掉的列在那一行里不用再写对应的td。第一行只有一个th却占了3列的宽度后面的行还是维持3列的正常结构。3.2 纵向合并rowspan行数会被悄悄“吃掉”rowspan比colspan更容易出错。它的逻辑是让某个单元格纵向跨越多行。比如你想做一个“班主任”单元格它要同时覆盖两行学生的信息table tr th姓名/th th班级/th /tr tr td李雷/td td rowspan2三年级二班/td /tr tr td韩梅梅/td /tr /table注意看最后一个tr里只有td韩梅梅/td没有班级那一格了。为什么因为“三年级二班”这个单元格已经通过rowspan2沿纵向占据了这一行的位置。你去给这行再加一个班级td就会平白多出一列来整个表格错位。这里我要强调一个心法横向合并是减少当前行的td数量纵向合并是减少合并范围所覆盖的后续行里的td数量。你只要记住合并单元格的本质是“这个位置已经被占掉了后面的数据不许再占”你就不会多写格子了。3.3 合并时最经典的Bug单元格数量多算了我接手过好几次这种代码第二个tr里写了td rowspan3结果它后面又跟着写了几个td整个页面渲染出来表格斜着裂开一道口子需要盯半天才能看出问题出在哪。排查方法很简单写完表格后在脑子里把每一行拆开算一遍“实际占用的列数”。规则是一个普通td占1列一个colspan3的td占3列一个rowspan2的td在它所在的行里占1列但它会影响到后续rowspan值减1行里各少掉1列。举个例子假设一个表格总共4列第一行的第二个单元格是rowspan3那么第一行剩下的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 caption2024年上半年各区域营收/caption thead tr th区域/th th上半年营收/th th同比/th /tr /thead tbody tr td华东/td td1200万/td td15%/td /tr tr td华北/td td980万/td td8%/td /tr /tbody tfoot tr td合计/td td2180万/td td12%/td /tr /tfoot /tablethead放表头行tbody放主体数据tfoot放汇总行。浏览器滚动页面的时候thead在很多场景下可以被固定住便于用户保持表头可见。而tfoot则让汇总信息有了明确的语义归属。这些都让后续的CSS选择器和JavaScript操作变得更方便。比如你想给所有数据行加样式直接tbody tr一把梭不用再一个个避开表头行。4.2 scope属性与屏幕阅读器的关系th加一个scope属性是我认为最容易被忽略但最能提升表格可用性的细节。scopecol表示这个表头是这一列的“列标题”scoperow表示它是这一行的“行标题”。屏幕阅读器在朗读表格内容时遇到一个数据单元格会向用户报告“对应的表头是什么”。如果你不给th标scope很多读屏软件只能机械地把数据念出来用户根本不知道这串数字是“销售额”还是“利润”。加了这个属性之后读屏软件能把“华东上半年营收1200万同比增加15%”这样的信息有序地读出来对于视障用户来说体验完全不同。实际写的时候很简单tr th scopecol区域/th th scopecol上半年营收/th th scopecol同比/th /tr tr th scoperow华东/th td1200万/td td15%/td /tr还有一点scoperow那个单元格我用的是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: collapseborder-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-spacingtable { 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 classtable-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上都要记得写>