怎样利用HTML表格展示商品列表？图文混排的电商排版方案

不合适。<table>语义错误、响应式难做、维护成本高，不适合商品列表；应使用<ul>或<p>配合Flex/Grid布局，并注意图片宽高、flex-grow、object-fit及加载失败兜底等细节。

用 <table> 展示商品列表，真的合适吗？

不合适。现代电商页面几乎不用 <table> 做商品列表——它语义错误、响应式难做、维护成本高，且无法灵活处理图片+文字+价格+按钮的混合结构。

常见错误现象：<table> 里硬塞 <img> 和按钮，结果小屏下横向滚动、图片被拉伸、点击区域错位；或者为“对齐”强行加 colspan，后续增删字段就全乱。

• 表格只适合真正意义上的二维数据（如订单明细、规格参数表）
• 商品卡片本质是「独立单元 + 并列排列」，<ul> 或 <p> + Flex/Grid 才是正解
• 若后端返回的是 CSV 数据需渲染成列表，也应先转成 JSON 再用语义化容器渲染，而非直接套 <table>

display: flex 实现左图右文商品卡片的最小可行结构

这是电商最常用的图文混排形式，核心是让图片和文字在同一个容器内水平对齐、间距可控、不换行。

关键点不在“怎么写”，而在“怎么防崩”：

立即学习“前端免费学习笔记（深入）”；

• <img> 必须设 width 和 height（或 aspect-ratio），否则加载中会塌陷，导致文字上跳
• 文字容器要用 flex-grow: 1 占满剩余空间，而不是靠 margin-left 推，后者在缩放时易溢出
• 避免对 <img> 设 vertical-align —— Flex 容器里它无效，改用 align-items: center 统一控制垂直居中

示例结构：

<p class="goods-item">
  <img src="shoe.jpg" alt="运动鞋" width="120" height="120">
  <p class="goods-info">
    <h3>轻量缓震跑鞋</h3>
    <p class="price">¥299</p>
    <button>加入购物车</button>
  </p>
</p>

CSS 只需四行：

.goods-item {
  display: flex;
  gap: 16px;
  align-items: center;
}
.goods-info {
  flex-grow: 1;
}

多列商品网格用 display: grid 而不是嵌套 flex

当一页要展示 3–4 列商品时，用 flex-wrap + min-width 容易在临界宽度下出现“最后一行只有一项”的错位，且列宽难以等分。

grid 的优势是声明式控制列数与响应断点，无需计算 flex-basis：

• grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) —— 自适应列数，每列不小于 280px
• 图片统一用 object-fit: cover 防止变形，配合固定宽高比容器（如 aspect-ratio: 1/1）
• 避免给 grid item 设 width: 100%，这会破坏自动分配逻辑

兼容性注意：IE 不支持 grid，但当前主流电商已基本放弃 IE 支持；若必须兼容，退化方案用 inline-block + calc()，而非 float。

图文混排中最容易被忽略的细节：图片加载失败兜底

电商页面图片多、CDN 不稳，<img> 加载失败时若没 fallback，就会只剩文字悬空，用户根本不知道该买什么。

纯 HTML/CSS 方案只能做到有限兜底：

• 必设 alt 属性，内容要描述商品（如 alt="Nike Air Zoom Pegasus 40 跑鞋"），不能写“图片”或留空
• 用 ::before 伪元素 + content 显示占位符图标（需字体图标或 base64 小图）
• 更可靠的做法是加轻量 JS 监听 onerror，动态插入 fallback 图片或提示文案

例如：

<img src="product.jpg" 
     alt="无线降噪耳机" 
     onerror="this.src='placeholder.svg'; this.alt='图片加载失败'">

这个 onerror 处理必须写在内联属性里，外链 JS 在图片加载完成前可能还没执行。