TR标签仅定义表格行，对齐和排列由TD/TH及CSS控制；必须保证每行TD数量一致，用colgroup和类名精准控制列样式，避免语义错误与渲染异常。
TR 标签本身不负责排列，真正控制商品信息对齐的是 TD/TH 和 CSS
直接用 <tr> 套数据不会自动“排列整齐”——它只是定义一行。表格是否对齐、列宽是否一致、文字是否居中，全靠 <td> / <th> 内容 + 简单 CSS 控制。常见错误是只写 <tr><td>A</td><td>¥99</td></tr> 就以为排好了，结果各列文字挤在一起、价格右对齐失效、移动端完全错位。
-
<th>必须用在表头行（<thead>），否则语义错误，屏幕阅读器和 SEO 都会忽略“这是标题列” - 所有
<tr>下的<td>数量必须严格一致，少一个就会导致整行错位，浏览器不会报错但视觉混乱 - 价格数字建议用
<span class="price">¥128.00</span>包裹，方便后续加粗、右对齐或货币单位样式分离
用 CSS 控制价格右对齐和列宽稳定
纯 HTML 表格默认左对齐、列宽自适应内容，价格列容易被长商品名挤变形。关键不是改 <tr>，而是给列加类或用 <col>：
<colgroup> <col span="1"> <!-- 商品名 --> <col span="1"> <!-- 规格 --> <col class="price-col" span="1"> <!-- 价格 --> </colgroup>
然后配 CSS：
.price-col {
text-align: right;
width: 120px; /* 固定宽度防抖动 */
}
.price-col .price {
font-weight: bold;
}- 不用
width写在<td>上——HTML 属性已废弃，且无法继承 - 避免用
white-space: nowrap强制不换行，会导致窄屏溢出，改用word-break: break-word - 如果价格含折扣价（原价/现价），别塞进一个
<td>，拆成两个带 class 的<span>，方便单独控制删除线和颜色
TR 标签嵌套常见错误：误用 div 或遗漏 tbody
很多人为了“看着整齐”，在 <tr> 里塞 <div> 或 <p>，这违反 HTML 表格规范，会导致渲染异常甚至被浏览器自动闭合修正：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<tr><td><div>iPhone 15</div></td></tr> - ✅ 正确：
<tr><td>iPhone 15</td></tr>，样式用 CSS 处理 - 必须显式写
<tbody>—— 不是可选，现代框架（如 Vue/React 渲染表格）常自动补，但手写时漏掉会导致 JS 操作table.tBodies[0]报undefined - 多页价格单慎用
<tr>嵌套<tr>（比如展开详情行），应改用<tr class="detail-row">并用 JS 切换显示，否则语义和可访问性全崩
移动端价格单要隐藏非关键列，而不是删 TR
PC 端显示“商品名｜规格｜单价｜库存”，手机屏只留“商品名｜价格”，不能靠删 <tr> 实现——那会破坏数据完整性。正确做法是用 CSS 控制列显隐：
@media (max-width: 768px) {
.spec-col, .stock-col { display: none; }
.price-col { text-align: center; }
}- 给每列
<th>和对应<td>加统一 class（如spec-col），比用:nth-child(2)更可靠 - 不要用
visibility: hidden，它仍占布局空间；必须用display: none - 如果价格列在最后，移动端想让它紧贴商品名下方，用
flex替代表格更稳妥，但那就不是“用 TR 排列”的范畴了
表格结构越简单，TR 越不容易出问题；复杂交互和响应式需求一多，TR 就开始暴露局限——这时候该考虑换方案，而不是硬调 CSS。
