不是“画格子”，而是语义化二维数据结构，必须包含、和，用明确行列关系，否则导致可访问性断裂、响应式失效；非数据场景应改用flexbox或grid。
直接用 <table> 就能创建结构化数据矩阵，但多数人栽在语义缺失、可访问性断裂和响应式失效上。
<h3>为什么 <code><table> 不只是“画格子”
<p>浏览器默认渲染 <code><table> 时，会按行列逻辑构建 DOM 树，屏幕阅读器依赖 <code><thead>、<code><th>、<code><scope></scope> 等语义标签识别表头与数据关系。纯靠 <tr><td> 堆砌，表格对残障用户就是一串无意义的单元格。
<ul>
<li>缺少 <code><caption></caption>：表格无标题，WCAG 2.1 AA 级不达标
<th> 没加 <code>scope="col" 或 scope="row"：多维表头无法被读屏软件正确映射
<div> + CSS 模拟表格：语义丢失，打印/导出 Excel 时结构崩溃
<h3><code><table> 必须包含的最小语义结构
<p>一个可访问、可维护的表格至少要包含 <code><caption></caption>、<thead> 和 <code><tbody> —— 即使只有一行数据。
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024 年各季度营收（万元）</caption>
<thead><tr>
<th scope="col">季度</th>
<th scope="col">华东</th>
<th scope="col">华南</th>
</tr></thead>
<tbody><tr>
<th scope="row">Q1</th>
<td>128</td>
<td>96</td>
</tr></tbody>
</table>
<ul>
<li>
<code><caption></caption> 是表格的唯一主标题，不可省略或用 <h2></h2> 替代<th scope="col">，行头（如 Q1）必须用 <code><th scope="row">
<li>即使只有一行数据，<code><tbody> 也要显式写出 —— 浏览器会自动补全，但手动写明更可控
<h3>响应式表格怎么不“挤成一团”</h3>
<p>小屏下横向滚动是底线方案，但体验差；真正可用的方式是把二维结构转为单列卡片流，靠 CSS 重排而非隐藏列。</p>
<ul><li>避免 <code>overflow-x: auto 包裹 <table>：触屏滑动卡顿，且无法双指缩放
<li>用 <code>@media + display: grid 或 display: block 重构布局，把每行 <tr> 变成带标签的块级项
<li>关键：保留原始 <code><table> DOM 结构，仅用 CSS 改变视觉呈现 —— 打印、爬虫、读屏仍能获取完整语义
<p>示例思路（简化）：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">@media (max-width: 768px) {
table, tbody, tr, th, td { display: block; }
th { position: sticky; left: 0; background: #f5f5f5; }
td::before { content: attr(data-label) ": "; font-weight: bold; }
}</pre>
<p>配合在 <code><td data-label="华东"> 上加属性，就能实现“Q1：华东 128”这样的竖排展示。
<h3>什么时候不该用 <code><table><p>当内容没有明确的行列逻辑关系时，<code><table> 就是错误选择 —— 比如商品列表、人员卡片、表单布局。
<ul>
<li>商品网格：用 <code><ul></ul> + grid 或 flex，语义是“列表”，不是“矩阵”<form></form> + <fieldset></fieldset> + <label></label>，表格会破坏 label 关联和键盘导航顺序<table> 增加 DOM 复杂度和可访问负担
<p>判断标准很简单：能否用“第 X 行第 Y 列”准确描述每个单元格的意义？不能，就别碰 <code><table>。</table>
