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