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