用搭建价格对比表需语义清晰、列对齐、响应式友好：首行定义列头，每产品一行，价格用nth-child定位列统一高亮；窄屏用.table-container包裹实现横向滚动；注重可访问性，如scope="col"、aria-label等。
用 HTML 表格标签快速搭出价格对比表结构
不需要框架或 JS，<table> 就够用。关键不是“怎么画表格”，而是让列对齐、语义清晰、移动端不横向滚动。<p>常见错误是直接用 <code><div> 堆砌，结果响应式失效、屏幕窄时内容挤成一团；或者把所有数据塞进一个 <code><tr>，导致无法按列排序或样式控制。<ul><li>第一行用 <code><thead> 包裹 <code><th>，标出产品名、基础版、专业版、企业版等列头<li>每款产品占一行 <code><tr>，价格、功能点等填在对应 <code><td> 里<li>价格数字加 <code><strong></strong> 或单独 class，方便后期加颜色/字体强调
<td> 里嵌套复杂结构（如按钮、图标 SVG），先保证表格可读性<h3>让价格单元格真正“突出显示”的 CSS 写法</h3>
<p>光靠加粗或变色不够，用户扫一眼要立刻识别出哪一列最划算。关键是利用列级样式控制，而不是给每个 <code><td> 单独写 class。<p>推荐用 <code>nth-child() 定位价格列（比如第 2、3、4 列），再统一设置背景和文字颜色：
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
background-color: #f8f9fa;
font-weight: bold;
text-align: center;
}
注意：如果表格有固定首行（<thead>），<code>nth-child 仍按 DOM 顺序计算，不会跳过 <th> —— 所以价格列的序号要从整个表格结构出发数，不是只看 <code><tbody>。<ul>
<li>不要用 <code>colspan 合并价格单元格，会破坏列对齐逻辑
float 或 display: inline-block 改表格布局，<table> 的默认渲染最稳定<li>如果某列要高亮推荐（比如“专业版”），给对应 <code><th> 加 class，再用 <code>th.recommended ~ td:nth-child(3) 这类组合选择器联动样式移动端窄屏下防止表格横向溢出
直接加 overflow-x: auto 到 <table> 没用，因为表格本身不会触发滚动；必须包一层容器，并设为块级 + 可滚动。<p>最简方案是套个 <code><div class="table-container">，CSS 写死：<pre class="brush:php;toolbar:false;">.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-container table {
min-width: 600px; /* 确保内容足够宽才触发滚动 */
}</pre>
<p>更稳妥的做法是放弃横向对比，在小屏下转为垂直堆叠卡片——但这需要 JS 判断宽度并切换 DOM 结构，对“简单”需求来说属于过度设计。</p>
<ul><li>别给 <code><table> 设 <code>width: 100%，它会强行压缩列宽导致文字换行混乱
white-space: nowrap 控制价格单元格不换行，但要在 <td> 上加，不能作用于整个表格<li>测试时真机打开，别只靠浏览器模拟器，iOS Safari 对 <code>overflow-x 支持略保守价格数字格式化与可访问性细节
写 和 .00 渲染一样，但后者更利于屏幕阅读器识别金额精度；用 <span></span> 包住货币符号还能单独控制字号或颜色。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
还有两个容易被忽略的点：
- 给价格列加
scope="col"属性，例如<th scope="col">专业版</th>，帮助残障用户理解表格关系 - 如果某项功能“不包含”，别写“—”或留空，用
<td aria-label="不包含">✘</td>，既保持视觉简洁又提供语义 - 避免把价格写成图片，搜索引擎和屏幕阅读器都读不到；也别用 JS 动态插入，
index.html是静态页，内容必须在 HTML 源码里存在
表格越简单，越容易维护。等哪天要加“点击跳转购买”或“实时汇率换算”，再考虑引入 JS —— 那时就不是“简单对比表”了。
