HTML 表格行标签 - <tr>

什么是 <tr> 标签？

<tr> 标签用于定义HTML表格中的一行（table row）。它是表格的基本构建块之一，包含一个或多个表格单元格（<td>或<th>）。

基本语法

html 
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
    <td>数据4</td>
  </tr>
</table>

父元素与子元素

父元素

<tr> 标签必须作为以下元素的子元素：

  • <table>
  • <thead>
  • <tbody>
  • <tfoot>

子元素

<tr> 标签可以包含以下子元素：

  • <th>：表头单元格（通常在表格的第一行）
  • <td>：数据单元格

属性

基本属性

属性 描述
align 行内内容的水平对齐方式（left、center、right、justify）
valign 行内内容的垂直对齐方式（top、middle、bottom、baseline）
bgcolor 行的背景颜色
bordercolor 行边框的颜色

已废弃的属性

以下属性在HTML5中已被废弃，建议使用CSS替代：

  • align：使用 text-align CSS属性
  • valign：使用 vertical-align CSS属性
  • bgcolor：使用 background-color CSS属性
  • bordercolor：使用 border-color CSS属性

全局属性

<tr> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为行指定类名
id 为行指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定行内容的语言

示例

基本使用

html 
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>设计师</td>
  </tr>
</table>

使用CSS样式

html 
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  tr.header {
    background-color: #4CAF50;
    color: white;
  }
  
  tr.data:hover {
    background-color: #f5f5f5;
  }
  
  tr.even {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr class="header">
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr class="data">
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
  <tr class="data even">
    <td>李四</td>
    <td>32</td>
    <td>设计师</td>
  </tr>
  <tr class="data">
    <td>王五</td>
    <td>25</td>
    <td>产品经理</td>
  </tr>
</table>

语义化结构中的使用

html 
<table>
  <thead>
    <tr> <!-- 表头行 -->
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- 数据行 -->
      <td>笔记本电脑</td>
      <td>¥5999</td>
      <td>20</td>
    </tr>
    <tr> <!-- 数据行 -->
      <td>智能手机</td>
      <td>¥3999</td>
      <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr> <!-- 总计行 -->
      <td>总计</td>
      <td></td>
      <td>70</td>
    </tr>
  </tfoot>
</table>

最佳实践

1. 使用语义化结构

将 <tr> 标签放在 <thead>、<tbody> 或 <tfoot> 中，以提高表格的语义化和可访问性。

2. 使用CSS样式

避免使用HTML属性来设置行样式，改用CSS进行样式控制，这更灵活且符合现代Web开发实践。

3. 保持一致性

确保表格中的行具有一致的结构，每行包含相同数量的单元格（除非使用了 colspan 或 rowspan）。

4. 交替行样式

为交替行添加不同的背景色（斑马条纹），可以提高表格的可读性：

css 
tr:nth-child(even) {
  background-color: #f2f2f2;
}

5. 悬停效果

为表格行添加悬停效果，可以增强用户体验：

css 
tr:hover {
  background-color: #e9e9e9;
  cursor: pointer;
}

浏览器兼容性

<tr> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<tr> 标签是HTML表格中的行元素，用于组织表格数据的水平行。通过合理使用 <tr> 标签及其相关元素，可以创建结构清晰、语义化良好的表格。记住要使用CSS进行样式设置，避免使用已废弃的属性，并遵循最佳实践来确保表格的质量和可维护性。

最后更新：2026-02-07