HTML 的 ＜tr＞ 元素

1. 什么是 <tr> 元素

<tr> 是 HTML 中用于定义表格行的标签，全称是 Table Row （表格行）。它必须作为 <table> 或 <thead>、<tbody>、<tfoot> 的直接子元素使用，用来包裹一行中的单元格。

一个 <tr> 元素内部通常包含若干个 <td>（标准单元格）或 <th>（表头单元格），它们共同构成表格的一行。

2. 基本语法

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

浏览器渲染效果：

第一行第一列	第一行第二列
第二行第一列	第二行第二列

3. 常用属性

3.1 全局属性

<tr> 支持所有 HTML 全局属性，如 class、id、style、title 等，常用于配合 CSS 或 JavaScript 操作行。

3.2 事件属性

<tr> 也支持标准事件属性，例如 onclick、onmouseover、onmouseout 等，可用于实现行级交互。

4. 与 <th> 和 <td> 的配合

• <th>：表头单元格，默认加粗并居中显示，用于标识列或行的含义。
• <td>：标准数据单元格，默认左对齐。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

5. 使用 <thead>、<tbody>、<tfoot> 分组

在实际项目中，推荐用 <thead>、<tbody>、<tfoot> 对 <tr> 进行分组，便于样式控制和语义化：

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>键盘</td>
      <td>199</td>
    </tr>
    <tr>
      <td>鼠标</td>
      <td>89</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>288</td>
    </tr>
  </tfoot>
</table>

6. 行合并与列合并

在 <tr> 内部，可以通过 <td> 或 <th> 的 rowspan 和 colspan 属性实现跨行、跨列：

<table>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
</table>

7. 注意事项

• <tr> 不能直接包含文本内容，文本必须放在 <td> 或 <th> 中。
• <tr> 不能脱离 <table> 单独使用，否则浏览器不会正确渲染。
• 使用 CSS 的 :hover 伪类可以方便地实现鼠标悬停高亮整行。

8. 总结

<tr> 是构建 HTML 表格的核心行标签，配合 <td>、<th> 以及 <thead>、<tbody>、<tfoot> 分组，可以清晰、语义化地组织表格数据。掌握它的基本用法和属性，是前端开发的基础技能之一。