不合适。<table>语义错误、响应式难做、维护成本高，不适合商品列表；应使用<ul>或<div>配合Flex/Grid布局，并注意图片宽高、flex-grow、object-fit及加载失败兜底等细节。
用 <table> 展示商品列表，真的合适吗？
不合适。现代电商页面几乎不用 <table> 做商品列表——它语义错误、响应式难做、维护成本高，且无法灵活处理图片+文字+价格+按钮的混合结构。
常见错误现象：<table> 里硬塞 <img> 和按钮，结果小屏下横向滚动、图片被拉伸、点击区域错位；或者为“对齐”强行加 colspan，后续增删字段就全乱。
- 表格只适合真正意义上的二维数据（如订单明细、规格参数表）
- 商品卡片本质是「独立单元 + 并列排列」，
<ul>或<div>+ Flex/Grid 才是正解 - 若后端返回的是 CSV 数据需渲染成列表，也应先转成 JSON 再用语义化容器渲染，而非直接套
<table>
display: flex 实现左图右文商品卡片的最小可行结构
这是电商最常用的图文混排形式，核心是让图片和文字在同一个容器内水平对齐、间距可控、不换行。
关键点不在“怎么写”，而在“怎么防崩”：
立即学习“前端免费学习笔记（深入）”；
-
<img>必须设width和height（或aspect-ratio），否则加载中会塌陷，导致文字上跳 - 文字容器要用
flex-grow: 1占满剩余空间，而不是靠margin-left推，后者在缩放时易溢出 - 避免对
<img>设vertical-align—— Flex 容器里它无效，改用align-items: center统一控制垂直居中
示例结构：
<div class="goods-item">
<img src="shoe.jpg" alt="运动鞋" width="120" height="120">
<div class="goods-info">
<h3>轻量缓震跑鞋</h3>
<p class="price">¥299</p>
<button>加入购物车</button>
</div>
</div>
CSS 只需四行：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.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 在图片加载完成前可能还没执行。
