HTML5中border属性必须弃用，因其仅作语义标识（"1"表数据表、空值表布局用途），不控制样式；精确边框需用CSS的border与border-collapse组合实现，且过时属性会干扰层叠逻辑、无法支持现代设计需求。
直接用 <table> 写统计表不难，但“专业”体现在语义清晰、可访问性强、样式可控、响应式可用——而不是边框粗细或颜色好看。
为什么 border 属性必须弃用
HTML5 已明确将 border、cellspacing、cellpadding 等属性标记为过时。它们会干扰 CSS 的层叠逻辑，且无法实现现代设计所需的边框合并、悬停状态、打印适配等效果。
- 浏览器渲染时，
border="1"会产生双线边框（单元格自带间距），必须靠border-collapse: collapse强制修复 - 屏幕阅读器无法从内联属性中提取语义，
scope="col"和scope="row"才是告诉辅助工具“这列标题管哪几行数据”的关键 - 移动端缩放时，硬编码的
width="560"会导致横向溢出，而table { width: 100% }+ 媒体查询才能真正响应
<thead>、<tbody>、<caption> 不是可选装饰
这三个标签不是“写不写都行”，而是统计表格可访问性和打印行为的基础设施。
-
<caption>必须紧跟在<table>后，内容要描述表格用途，比如<caption>2024年Q2各区域销售额统计（单位：万元）</caption> -
<thead>包裹列标题行，<th scope="col">显式声明该表头控制整列；若某行是“合计”，则用<th scope="row">合计</th> -
<tbody>是数据主体，多个<tbody>可用于分组（如按季度拆分），打印时浏览器默认每页重复<thead>
合并单元格的坑：colspan 和 rowspan 容易错位
合并不是“视觉上拉宽就行”，它直接影响表格的行列结构校验。错一个值，整个表格解析就会乱。
立即学习“前端免费学习笔记（深入）”；
-
colspan="2"表示当前单元格横跨 2 列，意味着它右侧不能再有<td>或<th>—— 否则实际列数会超出表头定义 -
rowspan="3"要求下方连续两行对应位置留空（即不写<td>），否则会被当成新单元格，导致错行 - 常见错误：
<th colspan="2">总销售额</th>后紧跟<td>华东</td><td>120</td>→ 实际变成 3 列，但表头只声明了 2 列，语义断裂
响应式统计表怎么不靠 JS 实现
纯 CSS 方案比 JS 插件更轻量、更可靠，关键是放弃“每行显示所有列”的执念。
- 小屏下用
@media screen and (max-width: 768px)将<tr>设为display: block，把每行转成卡片 - 每个
<td>加data-label="区域"属性，再用::before伪元素把 label 提出来，形成“字段名：值”的垂直布局 - 禁用
<thead>在小屏显示（position: absolute; top: -9999px），避免重复和干扰 - 外层加
<div class="responsive-table-container">并设overflow-x: auto，保证横向滚动可用但不破坏布局流
真正卡住专业度的，从来不是会不会写 <td>，而是能否让表格在盲人用读屏软件时被正确朗读、在打印时自动分页保留标题、在手机上滑动时不崩坏结构——这些细节，全藏在标签选择和属性组合里。
