写前端这么多年table标签是我见过被吐槽最多、但根本绕不开的一个标签。早年被拿来做整页布局后来被 Flexbox、Grid 按在地上摩擦现在大家提到 table十有八九是 antd、element-plus 里的 Table 组件。可不管上层封装成什么样浏览器最终渲染出来的还是table那几个字母。这个标签的属性看着不多实际用起来却容易踩坑尤其是很多属性在 HTML5 里已经不推荐了但老代码、邮件模板、旧系统里还到处都是。这篇文章就把table标签的常见属性彻底讲明白哪些能用、哪些该用 CSS 替代、怎么排查“属性明明写了却没效果”这种问题。不管是刚学 HTML 的新人还是要维护老项目的朋友读这一篇基本够了。1. table 标签的基本结构和属性到底在哪一层想搞清楚 table 的属性得先知道一个表格是由哪些标签“拼”出来的。一个完整的表格不是只有table它只是最外层的容器里面还有thead、tbody、tfoot、tr、th、td这些标签。平时我们说的“table 标签的常见属性”其实分成两层看第一层是写在table自己身上的属性比如border、cellpadding、cellspacing、align、bgcolor、background、width、frame、rules、summary这些它们控制的是整个表格的外框、间距、背景、宽度和对齐方式。第二层是写在td、th身上的单元格属性比如colspan、rowspan、scope、headers这些控制的是单个单元格的跨行跨列和语义关系。很多人一搜“table 属性”把 colspan 也当成 table 的属性严格讲不对但它确实是表格体系里的核心属性后面我会单独讲。先看一个最基础的结构代码table border1 cellpadding6 cellspacing0 width100% thead tr th产品/th th单价/th /tr /thead tbody tr td拿铁/td td32/td /tr /tbody /table这里border给表格加了边框cellpadding控制单元格内边距cellspacing控制单元格之间的间隙width让表格撑满容器。老式写法能让表格在没有任何 CSS 的情况下也能“长得像个表格”代价是样式全写在 HTML 里后期改起来非常痛苦。这就是我为什么建议你先认识这些属性但不要急着在生产项目里乱堆。2. 常见属性逐项拆解这些属性分别控制什么我把table上真正出现过的常见属性整理成了一张表逐项说清楚它的作用、状态和替代方案。这里的“状态”指的是在 HTML5 里还正不正规很多属性虽然浏览器还认但官方已经判定为“过时属性”。属性作用HTML5 状态现代替代方案border设置表格和单元格边框宽度不推荐使用CSSborderborder-collapsecellpadding设置单元格内容与边框之间的内边距已过时CSSpaddingcellspacing设置单元格之间的间距已过时CSSborder-spacingalign设置表格水平对齐方式已过时CSSmargin: autobgcolor设置表格背景色已过时CSSbackground-colorbackground设置表格背景图片已过时CSSbackground-imagewidth设置表格宽度已过时CSSwidthheight设置表格高度已过时CSSheight不推荐直接写在 table 上frame控制表格外边框显示哪些边已过时CSS 边框选择器rules控制表格内部行和列的分隔线已过时CSS 边框选择器summary为表格提供无障碍摘要已过时caption和th的scopeid/class/style/title/>table { border-collapse: collapse; } th, td { border: 1px solid #333; padding: 8px; }border属性在 HTML5 里不是完全不能写很多邮件模板和低代码平台还在用它做降级兜底。我的建议是日常网页里不要用写邮件模板时为了兼容老 Outlook可以保留border0或border1做基础样式核心样式再用内联 CSS 补上。2.2 cellpadding 和 cellspacing一个管“家里空间”一个管“邻居距离”cellpadding是单元格内容到单元格边框的距离相当于给每个单元格“家里”留出呼吸空间。加了cellpadding10之后文本不会紧贴 cell 边缘视觉效果会舒服很多。现代 CSS 里对应的是th, td { padding: 10px; }。cellspacing是单元格与单元格之间的距离相当于“邻居与邻居之间的间隔线”默认不是 0不同浏览器默认值不太一样。如果你发现 table 的 cell 之间总有一条缝尤其是用 border 的时候出现双线多半是 cellspacing 没清零。CSS 里对应的是border-spacing但要注意它只在border-collapse: separate模式下生效。如果你用了border-collapse: collapseborder-spacing会被忽略。这里有个很经典的坑很多人看到 cellspacing 以为是“单元格之间的边框距离”就给它设成 0结果发现本来的双线边框也没了其实是 cellspacing 为 0 后两条边叠在一起视觉上看起来像是“边框变细了”。这不是 bug是表格边框机制的问题。2.3 align、bgcolor、background旧时代的样式三兄弟aligncenter写在table上是让整个表格居中。但 HTML5 以后align对 table 已经过时推荐用margin-left: auto; margin-right: auto;。为什么不是text-align: center因为text-align管的是文本和内联元素table默认是块级盒子块级盒子要居中得靠水平方向的 margin 自适应。你写margin: 0 auto;才是真正的“表格居中”。如果你把text-align: center写在 table 上可能只会让里头的文字居中表格本身没动。bgcolor和background就更好理解了一个是背景色一个是背景图现在全部交给 CSS。需要注意bgcolor是写在 table 上的背景色它会被单元格自身的背景覆盖。如果只想让某一行变色不要写table的 bgcolor应该写在tr或td上但现代项目里还是建议用 class 控制。2.4 frame 和 rules最容易被忽略的两个“外行”属性frame和rules是老版本 HTML 里控制表格边框显示规则的属性现在基本没人用但老系统里偶尔能看到。frame控制的是表格最外边这一圈该显示哪几条边取值有void、above、below、hsides、vsides、lhs、rhs、box、border。听名字就知道它是来描述边框的“残缺美”。比如framebelow只显示表格底边framevsides只显示左右两条竖边。想用 CSS 实现通常用border-top/bottom/left/right分别控制四条边或者用伪元素。rules控制的是表格内部的行列分隔线取值有none、groups、rows、cols、all。rulesrows的效果就是只在行与行之间画线类似常见的数据报表样式rulescols只在列与列之间画竖线。现在想实现这个效果用 CSS 给指定的tr或td加border-top或border-left即可可控性高得多。2.5 width 和 height不是不能写是很容易写出“迷之行为”width100%写在 table 上在只有简单结构的表格里很直观就是撑满容器。但 table 的实际宽度由内容、table-layout、单元格宽度共同决定一旦单元格内容过长或过少width不一定是最终结果。CSS 里width也一样但搭配table-layout使用更可控。height写在 table 上更不靠谱。table 的高度是自动计算的强行给 table 设定 height未必能让所有行跟着变高反而可能出现“上下留白”或者“内容顶到最上面”的怪异效果。真需要定高建议把样式写在tbody或具体行上或者用 CSS 的min-height做兜底。3. 现代写法怎么用 CSS 替代 table 的旧属性我知道很多人不是要考古是真要在项目里写一个表格。所以这一节直接给“新旧对照方案”把最常用的几个旧属性换成现代 CSS。3.1 最常用的属性替换对照旧属性老写法新写法外框线border1table { border: 1px solid #ccc; }单元格边框自动由 border 生成th, td { border: 1px solid #ccc; }单元格内边距cellpadding8th, td { padding: 8px; }单元格间距cellspacing0table { border-collapse: collapse; }表格居中aligncentertable { margin: 0 auto; }表格背景色bgcolor#f5f5f5table { background: #f5f5f5; }表格宽度width100%table { width: 100%; }这里很多人会把padding记成内边距但写着写着就写到了td上。注意table上的 padding 只对“表格容器”生效不会给每个单元格加内边距。给单元格加内边距必须写在th, td上。cellspacing0对应的新写法并不是把 padding 设为 0而是用border-collapse: collapse。这个属性是很多新手第一次做表格时的救星写完边框后发现两条线变粗、中间有缝只要加上这一行瞬间清爽。3.2 一个完整的花式表格示例下面是一个现代写法的表格包含斑马纹、悬浮高亮、表头背景和响应式处理div classtable-wrap table classdemo-table caption2024 年 Q4 销售统计/caption thead tr th scopecol季度/th th scopecol订单数/th th scopecol销售额/th /tr /thead tbody tr tdQ4-10/td td1280/td td586,200/td /tr tr tdQ4-11/td td1420/td td653,300/td /tr tr tdQ4-12/td td1660/td td782,400/td /tr /tbody /table /div.table-wrap { overflow-x: auto; } .demo-table { width: 100%; border-collapse: collapse; background: #fff; } .demo-table caption { text-align: left; padding: 8px; font-weight: bold; } .demo-table th, .demo-table td { border: 1px solid #e0e0e0; padding: 10px 12px; } .demo-table thead th { background: #f2f2f2; } .demo-table tbody tr:hover { background: #fafafa; }这个写法里没有border1没有cellpadding没有align但效果比老属性精确得多。border-collapse: collapse让边框合拢padding控制内边距caption替代了summary做表格标题scopecol让屏幕阅读器知道表头是纵向一列还是横向一行。3.3 响应式表格移动端不要把 table 硬塞进小屏幕移动端最常遇到的场景是一个表格有七八列手机屏幕一窄内容全部挤在一起字都看不清。老属性里没有专门解决这个问题的方案现代做法是把 table 放进一个overflow-x: auto的容器里允许横向滚动而不是强行压缩列宽。如果数据量不大还可以考虑在窄屏时把每行变成一张“卡片”用 CSSdisplay: block重新组织单元格布局。但这种做法只适合简单的两列、三列表格复杂表格还是老老实实横向滚动。4. 别漏了单元格上的属性colspan、rowspan、scope 这些怎么用表格体系里光会写table是不够的表头、单元格上的属性同样得掌握。colspan和rowspan是高频考点也是很多人问“table 属性”时真正想问的东西。colspan写在td或th上表示这个单元格横跨几列。比如商品表里想做一个合并单元格展示“促销价格”就让它横跨两列table border1 styleborder-collapse: collapse; tr th名称/th th原价/th th促销价/th /tr tr td美式咖啡/td td colspan2第二杯半价/td /tr /tablerowspan则表示一个单元格跨几行常用于合并左侧分类栏table border1 styleborder-collapse: collapse; tr td rowspan2咖啡/td td拿铁/td /tr tr td美式/td /tr /tablescope是给屏幕阅读器用的写在th上取值为col、row、colgroup、rowgroup。它告诉读屏软件这个表头是作用于整列还是整行。视觉上无差别但对无障碍体验非常重要。headers属性则更进阶它通过 id 把单元格和表头显式关联起来适合复杂表头场景。这些属性虽然不在table标签上但只要你写表格百分之百会用到。不要以为“table 的常见属性”就只是border和cellpadding真正的实战里colspan、rowspan才是处理复杂表格的关键。5. 常见坑和排查经验属性明明写了却没效果这部分是我实际维护老项目时踩过最多的坑。整理成一张速查表遇到问题直接对着查。现象原因排查方向写了aligncenter表格没居中浏览器不支持或 CSS 优先级覆盖了改用 CSSmargin: 0 auto检查父容器宽度cellspacing0写了单元格之间还有缝浏览器默认边距或 CSS 里设置了border-spacing检查border-collapse和border-spacingtable 上下出现一条多余白线table 默认border-collapse: separate加上 border 后会有外框间隙加border-collapse: collapse背景色bgcolor在某个浏览器里失效现代浏览器对过时属性兼容性参差不齐换成 CSSbackground-colorwidth100%但表格没有撑满table-layout: fixed或单元格内容撑破了检查table-layout给 td 设置合理宽度屏幕阅读器读表格很乱缺少caption、scope或用了过时的summary加caption给th加scope两个 td 之间的边框变成 2px默认 border 叠加用 CSSborder-collapse: collapse单独说两个高频问题。5.1 border 写成 1结果出现“双倍边框”这个我真的见太多次了。新手写border1然后发现单元格之间的线特别粗其实是两个单元格各自画了一条 1px 边框紧挨在一起就变成 2px。解决办法有两个老写法是cellspacing0把单元格间距设为 0新写法是border-collapse: collapse让相邻边框合并。二选一不要同时纠结。5.2 table 里的图片或内容把表格撑破有一种情况单元格里放了一张大图比如img src...图片宽度 800px父容器只有 600pxtable 直接撑破页面。这个跟 table 属性关系不大但会影响你所有的 width 设置。解决办法是给img设置max-width: 100%或者给table外层加overflow-x: auto。还有一类老代码喜欢用tableimg srca2 height50 width50/table这种拼接字符串的方式输出图片和表格好处是灵活坏处是很容易混入奇怪的属性、缺少引号久而久之页面结构就乱了。碰到这种情况优先清理生成逻辑别在属性堆里打补丁。6. 一个完整的实操案例从“属性堆叠”改成“现代可维护写法”最后给一个看得见摸得着的改造案例你可以拿它当模板。老代码可能是这样的table width100% border1 cellpadding8 cellspacing0 bgcolor#ffffff aligncenter tr bgcolor#f0f0f0 td姓名/td td部门/td td入职时间/td /tr tr td张三/td td研发/td td2022-03-15/td /tr /table这段代码不是不能用但 bgcolor、align、cellpadding 全堆在标签上别人接手根本分不清哪些是业务属性、哪些是布局属性。现代排版方式是拆开HTML 只负责语义CSS 负责样式。改造后table classstaff-table caption员工列表/caption thead tr th scopecol姓名/th th scopecol部门/th th scopecol入职时间/th /tr /thead tbody tr td张三/td td研发/td td2022-03-15/td /tr /tbody /table.staff-table { width: 100%; border-collapse: collapse; background: #fff; } .staff-table th, .staff-table td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; } .staff-table thead th { background: #f0f0f0; }改造之后功能完全一致但你可以很清楚地给表头加悬浮效果、给特定列加宽、给特定行高亮不会因为 HTML 里的 bgcolor 和 CSS 背景色互相打架。真要说现代 CSS 比老属性强在哪就是“职责分离”四个字CSS 可以精确命中任何一行、一列、一个单元格而旧属性只能做全局粗粒度控制。我个人在实际项目里的经验是两类场景会保留旧属性一类是邮件模板因为 Outlook 这类客户端的 CSS 支持很玄幻另一类是低代码平台导出代码不得不兼容老引擎。普通网页项目里凡是遇到bgcolor、cellpadding、align这类属性直接改成 CSS 是最省心的选择。如果你还在维护一个 table 铺满全站的老系统也不用一夜之间全改掉可以先把新增页面改成现代写法老页面等有 bug 时顺手清理。至少下次再看到table border1 cellpadding8 cellspacing0 aligncenter你能一眼看出它在干嘛也知道该往哪个方向改。