不推荐用<table>展示商品列表，因其仅适用于参数对比表等强结构化数据；强行使用会导致响应式断裂、语义错位和维护成本高。
用 <table> 展示商品列表，真不推荐
现代电商页面里，<table> 仅适合展示强结构化、行列语义明确的数据（比如参数对比表、价格明细、库存台账），而不是商品列表本身。强行用 <table> 布局商品卡片，会带来三个硬伤：响应式断裂（小屏必须横向滚动）、语义错位（商品不是“表格数据”，而是独立内容单元）、维护成本高（每加一列都要改 <tr><td> 嵌套，JS 动态渲染也别扭）。
常见错误现象：<table class="product-list"> 里塞满 <tr><td><div class="card">.../td></tr> —— 这本质是用表格“模拟”布局，违背 HTML5 语义原则，也挡住了 CSS Grid/Flex 的自然流式能力。
dl + dt/dd 是图文混排商品列表的轻量解法
当商品项数量不多（≤20）、需严格图文对应（如“品牌：Apple”、“型号：iPhone 15 Pro”），定义列表 <dl> 是最贴切的语义选择。它天然表达“术语-描述”关系，比 <ul> 更精准，比 <table> 更灵活。
实操要点：
立即学习“前端免费学习笔记（深入）”；
-
<dt>放图或图标（<img src="..." alt="iPhone 主图">），<dd>放标题、价格、摘要等文本块 - 用 CSS 控制
<dl>为display: grid或flex，避免默认垂直堆叠导致图文分离 - 不要嵌套
<div>在<dt>或<dd>里破坏语义；若需按钮/交互，直接放<button>即可 - 兼容性注意：IE8+ 完全支持，无需 polyfill
示例片段：
<dl class="goods-dl">
<dt><img src="iphone.jpg" alt="iPhone 15 Pro"></dt>
<dd>
<h3>iPhone 15 Pro</h3>
<p class="price">¥7,999</p>
<button data-sku="A15P-256B">加入购物车</button>
</dd>
</dl>
真正要撑起电商商品流，用 grid + article 才对路
首页瀑布流、分类页网格、搜索结果页——这些场景下，商品是平等的独立内容实体，<article> 是唯一正确的容器语义，配合 CSS Grid 实现自适应布局才是工业级做法。
关键差异点：
-
<article>表明每个商品可被独立索引、分享、订阅；<section>或<div>不具备该语义 -
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))能自动适配从手机到4K屏，而repeat(3, 1fr)在 iPad mini 上直接溢出 - 图片必须用
<img>+srcset+sizes，不能靠 background-image —— 否则爬虫和读屏器无法识别 - 每个
<article>应有唯一id（如id="prod-1024"），方便 JS 定位、状态管理、SEO 锚点
性能提醒：Grid 布局本身无性能损耗，但若商品项超百个，务必配合 IntersectionObserver 做图片懒加载，否则首屏渲染卡顿。
表格只在一种场景下不可替代：商品参数对比
当用户需要横向比较 iPhone、Pixel、S24 的摄像头、电池、重量等离散属性时，<table> 是唯一符合语义且无障碍友好的方案。此时必须用 <thead> 包含产品名称行，<tbody> 每行一个参数项，<th scope="row"> 标注参数名，<th scope="col"> 标注产品名。
容易踩的坑：
- 遗漏
scope属性 → 读屏器无法关联行列，视障用户完全无法理解对比逻辑 - 用
colspan/rowspan合并单元格却未同步更新语义 → 辅助技术解析错乱 - 没加
<caption>→ 搜索引擎无法抓取表格主题，影响 SEO - 移动端不做响应式降级 → 强行缩小字体或出现横向滚动条，违反 WCAG 1.4.10
复杂点在于：纯 CSS 无法让表格在小屏转为“卡片堆叠”，必须靠 JS 切换 DOM 结构或用 @media 配合 display: contents（注意 Safari 15.4+ 才稳定支持）。这点常被忽略，导致移动端参数页体验断层。
