在HTML中，`标签定义表格行（table row），其内部的单元格（或）默认呈横向排列，即从左到右依次显示在同一行内，这是表格布局的基础特性，无需额外CSS即可实现，需嵌套在标签内，每个可包含多个（普通单元格）或（表头单元格），通过控制`的数量可构建表格的行结构，而单元格的横向排列则确保了表格数据的有序呈现。
HTML表格行（<tr>）中的横向布局：单元格排列与样式精控
在网页布局的演进中，HTML表格始终是结构化数据展示的基石，而表格行元素<tr>（Table Row）作为其核心骨架，其最本质的功能便是定义“行”的结构，通过<tr>包裹的单元格元素（<td> 或 <th>），数据得以在水平方向上有序排列，形成清晰的行视图，本文将深入剖析<tr>实现横向排列的内在机制,并探讨影响其布局的关键属性与CSS样式技巧。
<tr> 元素基础：表格行的“骨架”
在HTML表格结构中，<tr>（Table Row）是<table>的直接子元素，负责定义表格中的一行数据，每行内可包含一个或多个单元格元素：<td>（Table Data）用于呈现普通数据，而<th>（Table Header）则用于定义表头单元格（通常默认加粗并居中），浏览器会自动将<tr>内的所有单元格从左至右横向排列,构建出一行完整的表格数据流。
基本结构示例
<table border="1">
<!-- 表头行：tr包含3个th，水平排列 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<!-- 数据行：tr包含3个td，水平排列 -->
<tr>
<td>张三</td>
<td>28</td>
<td>前端工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>产品经理</td>
</tr>
</table>
上述代码中，两个<tr>元素分别定义了表头行和数据行，每个<tr>内的<th>或<td>元素均被浏览器默认从左到右横向排列，形成“姓名-年龄-职业”的三列水平布局，这正是<tr>横向排列最直观的体现。
<tr> 横向排列的实现原理
<tr>的横向排列根植于浏览器对表格模型的默认渲染规则，根据HTML表格布局规范，<tr>的display属性默认值为table-row，其子元素（<td>/<th>）的display属性默认为table-cell。table-row与table-cell的组合特性，强制子元素在水平方向上按顺序排列，并自动填充父容器的宽度（或根据内容自适应调整）。
关键渲染特性
- 自动水平排列：
<tr>内的<td>/<th>无需设置浮动（float）或定位（position），浏览器会将其视为“行内单元格”，从左至右依次排列，当内容超出容器宽度时，表格整体会横向拉伸或出现水平滚动条（取决于table-layout属性）。 - 单元格宽度分配机制：
- 若未显式设置单元格宽度，所有
<td>/<th>会自动平分<tr>的可用宽度（即列宽相等）。 - 若设置了某个单元格的宽度（如
width="100px"或style="width: 30%;"），其他单元格会自动调整以适应剩余空间,确保整行宽度合理分配。
- 若未显式设置单元格宽度，所有
影响<tr>横向排列的核心属性
单元格数量
<tr>中包含的<td>或<th>的数量直接决定了该行生成的**列数**，这是表格结构的基础：每行必须包含相同数量的单元格（除非使用colspan合并单元格），否则表格结构将混乱，一个包含3个单元格的<tr>会定义表格的宽度为3列。
