开始写之前先和不熟悉 table 的朋友说句实话哪怕前端已经卷到 React、Vue 满天飞你在日常开发里依然绕不开table——后台管理系统、数据报表、Excel 预览、邮件模板甚至一些老项目的页面骨架全是它。很多人觉得 table 太“老古董”无非是早年拿它做整站布局留下的坏印象。但实际上table 标签从 HTML4 到 HTML5 经历了很明显的职能转变我们真正该掌握的是它作为“数据表格”的那些核心属性哪些还活着哪些已经废弃废弃之后用什么替代以及在实际项目中怎么避免踩坑。这篇文章我会从标签本身的属性说起把 border、cellpadding、cellspacing、rowspan、colspan 这些高频属性逐个拆开再结合现代前端的写法给出替代方案。不管你是刚入门 HTML 的新手还是写了很多年业务代码但没系统整理过表格属性的老手这篇都值得花几分钟看完。我会尽量把“为什么这样写”讲清楚而不是只丢给你一份属性清单。1. 从“布局神器”到“数据表格”先说清 table 的定位转变1.1 为什么我们总说“别用 table 布局”但 table 本身没做错什么这事得从上世纪九十年代说起。那时候 CSS 还不成熟浏览器对float、position的支持也是一言难尽想要实现一个多栏布局最稳妥的办法就是用table把每一行每一列都砌出来。很多老网站的页面源码打开一看table 嵌套 table一层套一层改个间距能让人崩溃。后来 CSS 逐渐成熟div CSS布局成了主流前端社区形成了“不要用 table 做布局”的共识。但这里有个容易被误解的点——table被否定的场景是“页面布局”而不是“数据展示”。你想想财务报表、成绩单、商品规格表这种东西天然就是二维的有行有列有关系。用表格展示二维数据是符合人类阅读直觉的也是 HTML 设计 table 这个标签的初衷。我个人的体会是这几年每跳一次槽接手的项目里几乎都少不了表格的复杂业务尤其是后台管理和中台系统简直是表格的重灾区。与其纠结“用不用表格”不如花时间把表格这套属性吃透该用的时候用得干脆利落。1.2 table 的标准结构别只写table里面这几层才是精华先看一个最基础的表格结构table thead tr th姓名/th th部门/th th入职时间/th /tr /thead tbody tr td张三/td td技术部/td td2021-03-15/td /tr tr td李四/td td产品部/td td2022-07-01/td /tr /tbody /table这里涉及几个关键标签caption表格标题、thead表头、tbody表体、tfoot表尾、tr行、th表头单元格、td数据单元格。很多人写表格喜欢省略thead、tbody直接堆tr这不影响显示但对语义化和样式控制不利。比如你想让表头固定在页面顶部或者给表体单独设置背景色没有thead和tbody结构就很难精准选中。真正的实战项目里表格数据通常是大批量动态渲染的明确区分thead和tbody几乎是必须的。2. 表格级属性解析哪些还能用哪些必须换写法2.1 border、cellpadding、cellspacing表格外观的“老三家”这三个属性是表格最经典的属性也是很多新手写表格的第一行代码。在 HTML4 时代它们的写法是这样的table border1 cellpadding10 cellspacing5border1表示给表格和单元格都加上 1px 的黑色边框。cellpadding控制单元格内容与单元格边框之间的内边距cellspacing控制单元格与单元格之间的距离也就是外边距。但到了 HTML5情况变了。cellpadding和cellspacing被正式废弃border虽然在 HTML5 中仍然被允许但它的唯一有效值变成了1或空字符串作用只是“表示这个表格用于布局”而不是给你画边框。那现在怎么做边框和间距用 CSStable { border-collapse: collapse; /* 合并相邻单元格边框去掉双线 */ border-spacing: 0; /* 单元格间距设为0 */ width: 100%; } table, th, td { border: 1px solid #ccc; padding: 8px 12px; }border-collapse: collapse是最常用的一招它把相邻单元格的边框合并成一条线视觉效果干净很多。如果你还想要间隔效果别用cellspacing可以用border-spacing但这个属性有个坑——它只在border-collapse: separate时生效。所以实际写的时候要么用collapse加边框要么用separate加border-spacing两个属性混着用容易出一些莫名其妙的样式问题。实操心得我做后台表格时基本是一个 reset 样式通吃——border-collapse: collapseborder-spacing: 0然后通过给th、td单独设置padding和border来控制外观。这样浏览器默认的表格样式完全被覆盖掉各端表现一致。2.2 width、height、align控制表格尺寸与对齐的旧姿势HTML4 里给 table 设置宽度高度和对齐方式是特别常见的需求当时可以直接写在标签上table width600 height300 aligncenter这三个属性今天都被废弃了。原因很简单HTML5 希望把页面结构和表现分离尺寸、对齐这类视觉相关的东西统统交给 CSS。现代写法是table { width: 100%; /* 或者固定宽度 width: 600px */ margin: 0 auto; /* 水平居中 */ }其实aligncenter这个属性特别坑因为它只对表格整体生效而且在不同的 DOCTYPE 下表现还不一样。以前不少人在 table 上写aligncenter发现表格没居中最后还得包一层div加text-align:center才能解决。现在有了 Flexbox 或 Grid居中一个表格简直不要太简单。div styledisplay: flex; justify-content: center; table.../table /div高度方面也一样直接用min-height或height配合tbody滚动之类的方式来控制比写死height灵活得多。2.3 bgcolor、background、frame、rules、summary这些属性背后的细节值得聊一聊这几个属性相对冷门但偶尔会遇到历史代码不搞清楚会很困惑。bgcolor和background是以前给表格添加背景色和背景图的现在都废弃了改用 CSS 的background-color和background。这个比较容易理解不多说。frame和rules是控制表格内外边框显示区域的。frame控制表格外边框可选值有void无外框、above仅上框、below仅下框、hsides上下框、vsides左右框、lhs左框、rhs右框、box/border全框。rules控制内部分隔线可选值有none、groups组间分隔、rows行间分隔、cols列间分隔、all。这两个属性看着挺细的但在 HTML5 里同样被废弃了。你想要什么样的线用 CSS 完全能实现还更精确。summary是表格内容摘要给屏幕阅读器使用的辅助属性。它的情况有点特殊HTML5 规范里它被废弃了因为规范作者觉得应该用caption加文本代替。但实际测试中一些屏幕阅读器对summary的caption的朗读方式是不一样的而且summary在浏览器里不可见不会影响视觉效果。我个人的建议是如果一个表格内容比较复杂光靠caption说不清楚你可以在表格前面加一段说明文字用 CSS 隐藏或可见都行或者使用aria-describedby关联一段描述文本比纠结已废弃的summary靠谱。3. 行与单元格属性跨行跨列与无障碍细节3.1 rowspan 和 colspan表格里最“能打”的跨行列组合如果你做过复杂一点的报表一定会遇到要合并单元格的场景。rowspan让一个单元格纵向跨多行colspan让一个单元格横向跨多列。这两个属性在 HTML5 里依然有效也是 table 标签几乎不可替代的核心能力之一。基本写法table border1 tr td rowspan2合并两行/td td第一行第二列/td /tr tr td第二行第二列/td /tr tr td colspan2合并两列/td /tr /table使用时要格外小心当一个单元格设置了rowspan之后它占据了下几行的一个列位置那么下面那些行里对应位置就不能再写这个单元格了。很多人第一次用rowspan合并后发现数据全部错位就是因为这个原因。我自己写过很多动态合并单元格的需求经验是先把不带rowspan/colspan的完整二维数组构建出来再根据数据内容计算出需要合并的位置和跨度最后生成表格。必要时可以在 JS 里先画一个二维占位数组用空对象填充被合并的单元格对应的位置渲染时遇到空对象直接跳过这样能把错位率降到最低。3.2 scope、axis、headers、abbr容易被忽略的无障碍属性这几个属性平时用得少但对屏幕阅读器用户来说很重要。scope是th上的属性用来明确表头的方向。可选值有row、col、rowgroup、colgroup。比如你有一个表头在第一列那就在那个th上写scoperow。这样屏幕阅读器可以准确地读出“某一行某一列是什么含义”。table thead tr th scopecol商品/th th scopecol价格/th /tr /thead tbody tr th scoperow键盘/th td199/td /tr /tbody /tableaxis和headers是更早时代的产物HTML5 里已被废弃。headers的思路是通过 ID 关联表头和数据单元格用于打破简单行列关系的复杂表格。虽然headers被废弃了但在一些特别复杂的表格中idheaders的组合依然是无障碍方案中唯一能精确描述“这个单元格由哪些表头共同决定”的办法。如果你做的项目对无障碍要求高比如政务、无障碍标准测试相关项目可以继续用headers普通业务项目里先把scope用好就够了。abbr属性本来是让表头可以提供一个简短版本用于屏幕阅读器重复朗读时节省时间。现在浏览器对它支持得不太好实际项目里基本靠scope加良好的文案设计来替代。3.3 nowrap、valign、width、height单元格颗粒度的样式属性这几个也是老属性值得拿出来单独说。nowrap让单元格内容不换行HTML5 废弃后用white-space: nowrap代替。valign控制单元格内容的垂直对齐方式HTML5 废弃后用vertical-align代替。td和th上的width、height属性同样废弃改用 CSS 的width、height。不过这里有个细节表格的列宽分配有一套自己的算法给td设置width不一定等于实际渲染宽度。这可能也是很多人觉得表格宽度很难控制的原因之一。现代 CSS 提供了更多控制表格布局的手段table { table-layout: fixed; /* 固定布局列宽由第一行或 col 决定溢出更好控制 */ }table-layout: fixed是解决表格列宽失控的利器。默认的auto布局会让浏览器根据内容自动分配宽度内容一多就把列撑得乱七八糟fixed模式下列宽以第一行或按colgroup指定的宽度为准内容超出会溢出或截断这样布局就稳定多了。为了配合fixed我通常会显式声明colgroup给每一列分配宽度尤其是大数据量的表格这种确定性对性能也有好处。4. 现代表格改造从“能看”到“好用”的实践4.1 用 CSS 取代废弃属性一份属性对照清单为了让你快速从“老写法”切换到“新写法”我整理了下面这个对照表平时写代码时可以对照着看废弃属性作用现代替代方案cellpadding单元格内边距th, td { padding: ... }cellspacing单元格间距table { border-spacing: ... }align水平对齐margin: auto或 Flexbox/Gridvalign垂直对齐vertical-align: ...bgcolor背景颜色background-color: ...background背景图片background: url(...) ...nowrap禁止换行white-space: nowrapwidth/height宽高width/heightCSSframe外边框样式border相关 CSS 属性rules内部分隔线border相关 CSS 属性summary内容摘要caption 描述文本 /aria-describedby这并不是说老属性“绝对不能写”浏览器为了向前兼容大部分仍然能解析。但从可维护性和标准化的角度讲能不用就不用。我见过不少老项目里表格样式混乱原因就是这个属性在 HTML 里写一份那个样式又在 CSS 里覆盖一份最后到底哪个生效全靠浏览器心情。避坑提示当你接到一个老项目发现 table 上既写了废弃属性又有 CSS 样式改样式之前一定先看一眼标签上有没有写死这些属性。有时候 CSS 改了半小时没生效最后发现是cellpadding10在捣乱。4.2 表格语义化与无障碍不只是给“盲人”用的表格语义化这事我多说几句。很多人觉得无障碍离自己很远实际上良好的表格语义对所有人都友好。一个清晰的thead/tbody结构不仅屏幕阅读器能正确识别搜索引擎也能更好理解表格内容甚至你写 CSS 选择器都更方便。关于caption和th的使用我还有两个实际经验第一caption默认显示在表格上方如果不想让它显示可以用 CSS 把它裁剪到视觉不可见但仍能被屏幕阅读器读取的状态而不是直接display: none。因为display: none会让屏幕阅读器直接忽略。.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }第二给表头和数据建立关联时不光可以用scope还能用id headers。这种写法特别适合“小计”“总计”这种特殊行或者多级嵌套表头的场景。4.3 响应式表格小屏上怎么救表格在桌面端怎么都好说一旦到了手机端宽表格简直是灾难。我见过最蠢的做法是把页面整体缩放字体小到看不清。这里分享几个我踩过坑后沉淀下来的方案。方案一外层包div横向滚动div styleoverflow-x: auto; table.../table /div这是最省事、也最保底的方案。优点是不改变表格结构数据完整缺点是横向滚动在小屏上体验一般用户要左右拖。方案二隐藏次要列通过媒体查询在手机上隐藏一些不重要的列media (max-width: 768px) { .hide-on-mobile { display: none; } }这个方案适合“只要核心信息”的业务表格。比如订单表格里有商品图、名称、单价、数量、小计、操作手机上可以只保留名称、价格、操作。方案三小屏转卡片式布局利用>media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } thead tr { display: none; } td { position: relative; padding-left: 50%; } td::before { content: attr(data-th); position: absolute; left: 0; width: 45%; } }HTML 里每个td要带着对应的表头名称td>