属性对比表必须用而非布局，因其天然表达二维关系（行=参数项、列=对象），保障语义正确、辅助技术可读及打印/响应式稳定，且需严格遵循结构、合理使用colspan/rowspan、避免css模拟表格。
为什么属性对比表必须用 <table> 而不是 <code><div> 布局
<p>因为属性对比的本质是二维关系：行是参数项（如“内存”“接口类型”），列是不同对象（如“iPhone 15”“Pixel 8”）。<code><table> 天然表达这种结构，浏览器和屏幕阅读器能准确识别“第2行第3列 = Pixel 8 的接口类型”，而 <pre class="brush:php;toolbar:false;"><div class="row"><div class="cell">USB-C</div></div> 完全丢失语义，键盘导航会跳过整个区块，VoiceOver 朗读顺序混乱。
</pre>
<ul><li><code><thead> 必须存在，且只包首行 —— 用来声明各列代表哪个对象，每个 <code><th scope="col"> 写产品名
<li>首列必须用 <code><th scope="row">，比如 <pre class="brush:php;toolbar:false;"><th scope="row">无线充电</th>
</pre>
<li>中间所有交叉数据一律用 <code><td>，哪怕内容是 ✅ 或链接，别为了“好看”写成 <code><th>
<li>不要用 <code>display: grid 或 float 模拟表格 —— 它们无法被辅助技术解析，打印时也容易错行
colspan 和 rowspan 在对比表里怎么用才不崩
colspan 和 rowspan 在对比表里怎么用才不崩乱用 colspan/rowspan 是导致错列、打印截断、小屏滚动错位的头号原因。它们只在两类场景下必要：多级表头（如“网络”大类下分“4G”“5G”子项）、跨行说明（如“摄像头”组统一备注“支持光学防抖”）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 首行商品名一律用普通
<th scope="col">，不加 <code>colspan；需要分组时，用嵌套<thead>：外层 <code><tr> 写大类（带 <code>colspan），内层<tr> 写具体商品（<code>colspan="1"显式写出） -
rowspan值必须等于它要覆盖的<td> 行数，且后续对应位置必须留空 —— 否则浏览器自动补 <code><td>，造成列偏移 <li>某参数不适用于某产品时，填“-”或“不支持”，别留空或用 <code>colspan跳过，否则列数对不上 - 移动端堆叠布局下，
colspan/rowspan会被 CSS 重排逻辑忽略，所以别依赖它们做响应式控制 - 让表格水平居中：用
margin: 0 auto，同时确保父容器没设text-align: right等干扰样式 - 避免用
width: 100%强撑表格 —— 小屏下文字换行错乱，列宽失衡；改用min-width控制关键列（如参数名列最小 120px） - 单元格内容对齐靠
text-align和vertical-align：参数名列常用text-align: left; vertical-align: top，数值列用text-align: center - 边框统一用
border-collapse: collapse，再单独给th和td设border，避免双线缝 - 小屏（
max-width: 768px）下，把整个<table> 设为 <code>display: block，<tr> 变 <code>display: block，每行变成一个独立区块 - 用
td::before { content: attr(data-label); }补列名，前提是每个<td> 都带 <code>data-label="iPhone 15" - 参数名用
<th scope="row">，确保小屏朗读顺序是“无线充电 → iPhone 15值 → Pixel 8值”，而不是“iPhone 15全部参数 → Pixel 8全部参数” <li>别用 <code>transform或position: absolute移动单元格 —— 这会让 Tab 键焦点跳转和读屏器顺序彻底失效
表格结构一旦定型，后续增删列或接入后端数据就非常稳定；但把语义搞错，后期调试成本远高于初期多写几行 HTML。最易被忽略的是
清除浮动跟表格对齐根本不是一回事
“清除浮动”是针对 float 布局遗留问题的补救手段，而表格本身不参与浮动流 —— 给 <table> 加 <code>clear: both 或父容器设 overflow: hidden 不仅无效，还会破坏表格渲染。真正要解决的是表格自身居中与对齐。
移动端窄屏下怎么让对比表可读又不靠横向滚动
直接套 overflow-x: auto 是偷懒方案：用户得反复缩放+拖拽，关键参数常被切掉，且焦点顺序错乱。真正可用的是媒体查询驱动的 DOM 重排。
scope 属性缺失和小屏下朗读顺序验证 —— 这两个点不测，等于没做完。
