HTML <tr> 标签-代码号

HTML tr 标签使用教程：表格行的完整指南

在HTML表格结构中，<tr>标签扮演着非常重要的角色，它用于定义表格中的行。每个<tr>元素包含一个或多个<td>（标准单元格）或<th>（表头单元格），共同构建出完整的数据展示体系。

tr标签的基本概念与作用

<tr>标签是表格的骨架单元，必须嵌套在<table>容器内使用。它可以作为<thead>、<tbody>或<tfoot>的直接子元素，也可以直接放在<table>中（虽然不推荐这种做法）。

从语义化角度分析，正确使用<tr>标签能够：

明确表格行级结构，增强代码可读性
便于CSS针对行级别进行样式控制
提升无障碍访问体验
有利于搜索引擎理解表格内容层次

基础语法与结构

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>编程语言</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>Python</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>JavaScript</td>
  </tr>
</table>

个人经验分享：在项目开发中，我建议始终将<tr>放在<tbody>、<thead>或<tfoot>中，而不是直接放在<table>下。这种做法虽然在某些浏览器中也能正常显示，但从语义化和标准符合性角度来看更为规范。

行列合并的高级应用

colspan属性 - 列合并

<table>
  <tr>
    <th colspan="2">代码号学员信息</th>
    <th>学习进度</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>完成课程数</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>22</td>
    <td>12/15</td>
  </tr>
</table>

rowspan属性 - 行合并

<table>
  <tr>
    <th rowspan="2">课程类别</th>
    <th>基础课程</th>
    <th>进阶课程</th>
  </tr>
  <tr>
    <!-- 第一个单元格被上一行的rowspan占用 -->
    <td>HTML/CSS</td>
    <td>Vue.js</td>
  </tr>
  <tr>
    <td>后端开发</td>
    <td>Node.js</td>
    <td>Spring Boot</td>
  </tr>
</table>

个人建议：在使用行列合并时，一定要仔细计算单元格位置，避免出现结构错乱。我通常会在设计阶段先画出示意图，再编写代码。

CSS样式定制技巧

虽然<tr>标签本身不支持直接设置背景色或边框（需要通过单元格实现），但通过CSS我们可以创建丰富的行级视觉效果。

基础行样式

<style>
.student-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.student-table tr {
  transition: background-color 0.3s ease;
}

.student-table tr:hover {
  background-color: #f5f5f5;
}

.student-table th,
.student-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.student-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.student-table tr.header-row {
  background-color: #2c3e50;
  color: white;
}

.student-table tr.highlight {
  background-color: #ffeaa7;
}
</style>

<table class="student-table">
  <tr class="header-row">
    <th>学号</th>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>001</td>
    <td>张三</td>
    <td>92</td>
  </tr>
  <tr class="highlight">
    <td>002</td>
    <td>李四</td>
    <td>88</td>
  </tr>
  <tr>
    <td>003</td>
    <td>王五</td>
    <td>95</td>
  </tr>
</table>

高级交互效果

/* 斑马纹效果 */
.zebra-table tr:nth-child(odd) {
  background-color: #f8f9fa;
}

.zebra-table tr:nth-child(even) {
  background-color: #e9ecef;
}

/* 行展开效果 */
.expandable-row {
  cursor: pointer;
}

.expandable-row + tr.details-row {
  display: none;
}

.expandable-row.expanded + tr.details-row {
  display: table-row;
}

/* 行选择效果 */
.selectable-row {
  cursor: pointer;
}

.selectable-row.selected {
  background-color: #d4edda;
  border-left: 4px solid #28a745;
}

项目应用示例

示例1：课程安排表

<table class="course-schedule">
  <thead>
    <tr>
      <th>时间</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>09:00-10:30</td>
      <td>HTML基础</td>
      <td>CSS布局</td>
      <td>JavaScript语法</td>
      <td>DOM操作</td>
      <td>项目实战</td>
    </tr>
    <tr>
      <td>10:45-12:15</td>
      <td>CSS动画</td>
      <td>响应式设计</td>
      <td>ES6特性</td>
      <td>事件处理</td>
      <td>代码 review</td>
    </tr>
    <tr>
      <td>13:30-15:00</td>
      <td>Git版本控制</td>
      <td>前端框架介绍</td>
      <td>API调用</td>
      <td>调试技巧</td>
      <td>项目部署</td>
    </tr>
  </tbody>
</table>

示例2：学员成绩统计

<table class="score-report">
  <caption>2025年代码号学员期末成绩统计</caption>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th colspan="3">技术能力</th>
      <th colspan="2">项目实践</th>
      <th rowspan="2">总评</th>
    </tr>
    <tr>
      <th>前端</th>
      <th>后端</th>
      <th>数据库</th>
      <th>个人项目</th>
      <th>团队项目</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>92</td>
      <td>88</td>
      <td>85</td>
      <td>90</td>
      <td>87</td>
      <td>89</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>95</td>
      <td>82</td>
      <td>79</td>
      <td>93</td>
      <td>85</td>
      <td>87</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>88</td>
      <td>91</td>
      <td>94</td>
      <td>86</td>
      <td>92</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>91.7</td>
      <td>87.0</td>
      <td>86.0</td>
      <td>89.7</td>
      <td>88.0</td>
      <td>88.7</td>
    </tr>
  </tfoot>
</table>

本节课程知识要点

<tr>必须包含在<table>或其子元素（<thead>、<tbody>、<tfoot>）中
每行应包含相同数量的单元格，或使用colspan/rowspan进行合并
使用<th>定义表头单元格，<td>定义数据单元格
通过CSS伪类（如:nth-child）实现斑马纹等视觉效果
合理使用行列合并可以创建复杂的表格布局

常见问题与解决方案

问题1：行高不一致

/* 确保所有单元格具有相同的行高 */
tr td, tr th {
  height: 50px; /* 或者使用min-height */
  vertical-align: middle;
}

问题2：空行处理

<!-- 明确表示空数据 -->
<tr>
  <td colspan="5" style="text-align: center; color: #999;">
    暂无数据
  </td>
</tr>

问题3：响应式表格行

@media (max-width: 768px) {
  tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
  tr td {
    display: block;
    text-align: right;
  }
  tr td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

<tr>标签作为HTML表格的基础构建单元，其正确使用对整个表格的结构和表现非常重要。通过掌握行列合并技巧和CSS样式控制，可以创建出既美观又功能丰富的表格组件。

在项目开发过程中，我建议始终遵循语义化原则，合理使用表格相关标签。对于复杂的数据展示需求，可以考虑结合JavaScript实现动态行操作功能。

本文标签：

HTML <tr> 标签