价目表不该用<table>布局，因其本质是并列套餐卡片而非二维数据；应改用语义化<article>配合CSS Grid实现自适应、可访问、易维护的布局。
表格布局做价目表，现在不推荐——<table> 语义是“展示行列数据”，不是“控制页面结构”。强行用它排版，会损害可访问性、响应式表现和后期维护性。
为什么价目表不该用 <table> 布局
价目表本质是并列的套餐卡片（哪怕看起来像表格），不是统计报表。用 <table> 会导致：
- 屏幕阅读器把每个“套餐”读成“第1行第1列、第1行第2列……”，逻辑混乱
- 在手机上无法自然堆叠，必须加大量
@media强行重排，代码臃肿 -
<th>和<td>的语义错配：你并没有“行头/列头”的数据关系 - 后续想加动画、悬停效果、动态切换时，DOM 结构僵硬，CSS 难以干预
用 display: grid 实现真正灵活的价目表
现代方案是语义化容器 + CSS Grid 控制排列。HTML 只表达“这是几个定价方案”，样式交给 CSS。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<section aria-label="定价方案">
<article>
<h3>基础版</h3>
<p class="price">¥99</p>
<ul><li>支持2个用户</li></ul>
</article>
<article>
<h3>专业版</h3>
<p class="price">¥199</p>
<ul><li>支持10个用户</li></ul>
</article>
</section>
对应 Grid 样式只需几行：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
关键点：
-
auto-fit+minmax()让列数随容器自适应，小屏自动变单列 - 每张卡片独立，加
hover、scale或 JS 交互毫无压力 - 无障碍友好：
<article>是标准区域角色，配合aria-label清晰传达目的
如果非要用 <table>（比如导出 Excel 或后台生成）
那就严格守语义：只用于真实二维数据对比，且必须补全辅助信息。
必须包含：
-
<caption>描述表格用途，如<caption>各版本功能与价格对比</caption> -
<thead>中用<th scope="col">标明列头（如“版本”“价格”“用户数”） - 每行用
<th scope="row">标出套餐名，让屏幕阅读器知道“这是‘专业版’这一行” - 避免合并单元格（
rowspan/colspan），它会彻底破坏线性阅读顺序
错误写法：<tr><td colspan="3">推荐套餐</td></tr> —— 这会让读屏器跳过整行上下文。
真正难的不是怎么排齐，而是判断“这到底算不算表格数据”。多数价目表的答案是否定的。别为了省几行 CSS，把结构和语义一起牺牲掉。
