源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 表格添加行

2025/12/29
19
0

HTML <tr> 标签：表格行的核心构建单

学习目标

  • 理解 <tr> 标签在 HTML 表格中的作用与定位

  • 掌握 <tr> 与 <th>、<td> 的嵌套关系

  • 了解 <tr> 支持的属性（包括已废弃的属性）及其现代替代方案

  • 能够正确使用 <tr> 构建结构清晰、语义合理的表格

什么是 <tr> 标签

<tr> 是 Table Row（表格行） 的缩写，用于在 HTML 表格中定义一行。它是 <table> 元素的直接子元素，作为 <th>（表头单元格）或 <td>（数据单元格）的容器。

基本语法

<tr>
  <th>表头内容</th>
  <td>数据内容</td>
  <!-- 可包含多个 th 或 td -->
</tr>

每个 <tr> 代表表格中的一行，从左到右依次排列单元格。

核心特性

特性

说明

必须嵌套在 <table> 中

不能单独使用，需位于 <table> 内部

子元素只能是 <th> 或 <td>

不能直接包含文本或其他块级元素

支持全局属性和事件属性

如 id、class、onclick 等

可配合 <thead>、<tbody>、<tfoot> 使用

提升表格语义结构

基础示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户信息表</title>
  <style>
    table, th, td {
      border: 1px solid #333;
      border-collapse: collapse;
      padding: 8px;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <table>
    <!-- 表头行 -->
    <tr>
      <th>姓名</th>
      <th>用户名</th>
    </tr>
    <!-- 数据行 1 -->
    <tr>
      <td>李明</td>
      <td>@liming_dev</td>
    </tr>
    <!-- 数据行 2 -->
    <tr>
      <td>编程教程网</td>
      <td>@codehub</td>
    </tr>
  </table>
</body>
</html>

此例中：

  • 第一个 <tr> 包含两个 <th>，构成表头行；

  • 后续 <tr> 各包含两个 <td>，表示具体数据行。

<tr> 的属性

历史与现状

HTML 规范曾为 <tr> 定义了一些表现层属性，但在现代开发中已被废弃，应使用 CSS 替代。

属性（已废弃）

作用

现代替代方案

align

水平对齐（left/center/right）

text-align on <th>/<td>

bgcolor

设置行背景色

background-color in CSS

valign

垂直对齐（top/middle/bottom）

vertical-align in CSS

char / charoff

按字符对齐（极少使用）

不推荐，无通用替代

不推荐的写法

过时

<tr align="center" bgcolor="#e6f2ff" valign="top">
  <td>旧式写法</td>
</tr>

推荐写法

CSS 控制

<style>
  .highlight-row td {
    text-align: center;
    background-color: #e6f2ff;
    vertical-align: top;
  }
</style>

<tr class="highlight-row">
  <td>现代写法</td>
</tr>

最佳实践：将样式与结构分离，用 CSS 控制外观，HTML 专注语义。

语义化增强

结合 <thead>、<tbody>

虽然 <tr> 可直接放在 <table> 下，但更推荐使用语义化分组：

<table>
  <thead>
    <tr>
      <th>水果</th>
      <th>颜色</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>红色</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>黄色</td>
    </tr>
  </tbody>
</table>

优势：

  • 提升可访问性（屏幕阅读器可识别表头）

  • 便于 CSS 选择器控制（如 tbody tr:hover）

  • 支持打印时自动重复表头（部分浏览器）

重点总结

要点

说明

作用

定义表格中的一行

父元素

必须是 <table>、<thead>、<tbody> 或 <tfoot>

子元素

仅限 <th> 或 <td>

样式控制

应通过 CSS 实现，避免使用已废弃的 HTML 属性

语义结构

配合 <thead>/<tbody> 使用更规范

思考题

  1. 为什么不能在 <tr> 中直接写文本（如 <tr>姓名</tr>）？会有什么后果？

  2. 如果一个表格有 100 行数据，如何通过 CSS 为奇数行和偶数行设置不同背景色？（提示：使用伪类）

  3. 在响应式设计中，当屏幕很窄时，传统表格可能溢出。有哪些策略可以优化移动端的表格显示体验？