现代商品网格不应使用布局，因其语义错误、响应式困难、维护成本高；推荐CSS Grid配合语义化结构，兼顾可访问性与灵活性。
用 <table> 做商品网格？先劝你别这么干<p>现代商品展示几乎不用 <code><table> 布局——它语义错误、响应式难做、维护成本高。浏览器渲染时会强制按表格模型计算列宽，导致图片缩放错乱、移动端撑破容器、<code>colspan 一加就崩。真要“简洁”，直接上 display: grid 或 flex 更靠谱。真正轻量又可控的替代方案：CSS Grid + 语义化结构
用 <section></section> 包裹商品项，配合 grid 控制行列，比硬套 <table> 清晰得多：<pre class='brush:php;toolbar:false;'><section class="product-grid">
<article class="product-item">
<img src="shoe.jpg" alt="运动鞋">
<h3>Air Zoom</h3>
<p class="price">¥399</p>
</article>
<!-- 更多 item -->
</section></pre><p>对应 CSS 只需几行：</p>
<ul>
<li><code>.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
@media (max-width: 600px) { grid-template-columns: 1fr; } 就自动单列<tr><td> 嵌套，每个 <code><article></article> 独立可访问、可聚焦、可键盘导航如果非要用 <table>（比如遗留系统或邮件模板）<p>必须守住三条底线，否则很快失控：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>删掉所有 <code>border、cellpadding、cellspacing 属性，全用 CSS 控制间距和边框
table-layout: fixed + width: 100% 防止内容撑开列宽<th> 只用于真正的表头（如“商品名｜价格｜库存”），商品卡片一律用 <code><td>，别滥用 <code><th>
<li>移动端加 <code>overflow-x: auto 到父容器，避免横向滚动条被截断容易被忽略的细节：图片裁剪与文字截断
商品图尺寸不一，表格单元格高度会参差不齐；标题过长也会破坏网格对齐。解决方式很直接：
- 图片统一用
object-fit: cover+ 固定aspect-ratio: 1/1（或设宽高），别只靠width: 100% - 标题截断用
line-clamp: 2+display: -webkit-box，纯 CSS，不用 JS - 价格文字加
white-space: nowrap，防止 ¥ 符号和数字被拆到两行 - 所有尺寸单位优先用
rem或em，别混用px和%
网格的“简洁”不在代码行数少，而在每一处样式都有明确意图，且能独立修改不牵连其他商品。一旦开始给 <td> 加 <code>rowspan 或嵌套 <div> 做布局，就等于放弃控制权了。</div>
