HTML <tr> 元素 - 表格行元素

HTML <tr> 元素定义表格中的一行单元格。在 <tr> 元素中可以混合使用 <td>（数据单元格）和 <th>（标题单元格）元素来建立行的单元格。

一个简单的 HTML 表格，包含两列两行：

<table>
  <tr>
    <th>月份</th>
    <th>存款</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>600元</td>
  </tr>
</table>

尝试一下 »

截图

一个简单的 HTML 表格，包含两列两行

特性

内容类别 无。
允许的内容 零到多个 <td> 和/或 <th> 元素； 也允许脚本相关元素（<script> 和 <template>）
标签省略 必须有开始标签。如果 <tr> 元素之后紧跟着 <tr> 元素，或者当前行是其父表格组（<thead>，<tbody> 或 <tfoot>）元素中的最后一个元素，则可以省略结束标签。
允许的父元素 <table>（仅当表格中没有 <tbody> 子元素）；否则，父项必须为 <thead>，<tbody> 或 <tfoot>。
允许的 ARIA 角色 任意
DOM 接口 HTMLTableRowElement

HTML <tr> 元素指定了 <tr> 块中包含的标记属于表格中的一行，其中 <th> 和 <td> 分别在行内创建标题和数据单元格。每个单元格放置在它自己的列中；用户代理遵循特定规则来确定每行中的单元格如何与其他行中的单元格放在列中。

为了额外控制单元格如何适配（或跨越）列，<th> 和 <td> 都支持 colspan 属性，可以让您指定单元格应该占多少列，默认值为 1。同样，您可以在单元格上使用 rowspan 属性来表示它们应该跨越多个表格行。

属性

该元素包含了全局属性。还有几个废弃的属性，你应该避免它，但在阅读旧代码时可能需要知道。

废弃的属性

下面的属性仍然在一些浏览器中有实现，但不再是 HTML 规范的一部分，可能有一些会缺失或可能无法按预期工作。应该避免使用它们。

align

已废弃 HTML4.01，已过时 HTML5

该枚举属性指定如何处理每个单元格内容的水平对齐。可能的值是：

  • left，将内容对齐到单元格的左侧
  • center，将内容对齐到单元格的中间
  • right，将内容对齐到单元格的右边
  • justify，在文本内容中插入空格以便内容在单元格左右对齐
  • char，通过 char 和 charoff 定义的最小偏移量，将特定字符的文本内容对齐未实现 (查看 Mozilla bug 2212)。

如果未设置该属性，则默认是 left 值。

注意： 不要使用该属性，因为它在最新标准中已过时（不支持）。

  • 要实现与 left ，center，right 或 justify 值相同的效果，请使用 CSS text-align 属性。
  • 在 CSS3 中，要实现与 char 值相同的效果，可以使用 char 的值作为 text-align 属性未实现。

bgcolor

已过时 HTML5

该属性定义了列的每个单元格的背景颜色。它是 sRGB 中定义的 6 位十六进制代码之一，以 '#' 为前缀。也可以使用十六种预定义颜色字符串中的一种：

black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

使用说明： 不要使用该属性，因为它是非标准的，只在一些版本的 Microsoft Internet Explorer 中实现了。<tr> 元素应该使用 CSS 来设置样式。要实现与类似 bgcolor 属性的效果，可以在相关的 <tr> 元素上设置 background-color 属性。

char

已废弃 HTML4.01，已过时 HTML5

该属性用于指定字符来对齐单元格中的内容。典型的值包括使用一个点号（.）来尝试调整数字或货币值。如果 align 未设置为 char，则该属性将被忽略。

说明： 不要使用该属性，因为它在最新标准中已过时（不支持）。在 CSS3 中，要实现与 char 相同的效果，可以使用 char 属性的值作为 text-align 属性的值。未实现

charoff

已废弃 HTML4.01，已过时 HTML5

该属性用于指示从 char 属性指定的对齐字符中偏移的字符数。

说明： 不要使用该属性，因为它在最新标准中已过时（不支持）。

valign

已废弃 HTML4.01，已过时 HTML5

该属性指定了表格标题的每行单元格内文本的垂直对齐方式。该属性的可能值为：

  • baseline，将文本尽可能接近单元格的底部，但将其对准在字符的基线上，而不是它们的底部。如果字符大小一致，它与 bottom 的效果相同；
  • bottom，将文本尽可能靠近单元格底部；
  • middle，将文本在单元格中居中；
  • top，将文本尽可能靠近单元格的顶部。

说明： 不要使用该属性，因为它在最新标准中已过时（不支持）。改为在其上设置 CSS vertical-align 属性。

事件属性

<tr> 元素支持 HTML 的事件属性。

更多实例

有关 <tr> 的实例，请参阅 <table>。

实例1：基本例子

这个简单的例子显示了一张表格，列出了人们的姓名以及关于俱乐部或服务的会员资格的各种信息。

HTML

这里的 HTML 演示了表格的最基本结构。没有组，没有跨越多行或多列的单元格，没有标题，只有在表格组件的周围增加了线条，使整体更加清晰。

它只有四行（包括一个标题行），每行有四列（包括一个标题列）。甚至没有使用表格章节元素；在下一个示例中，我们将添加 <thead>，<tbody> 和 <tfoot>。

<table>
  <tr>
    <th>姓名</th>
    <th>编号</th>
    <th>加入时间</th>
    <th>余额</th>
  </tr>
  <tr>
    <td>玛格丽特 阮</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010-06-03</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>爱德华 加林斯基</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011-01-13</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>中村星</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012-07-23</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

这里的简单 CSS 只是在表格周围和每个单元格周围增加了一个黑色边框，包括使用 <th> 和 <td> 来指定边框。这样，标题和数据单元就很容易区分开来。

table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

结果

列出了人们的姓名以及关于俱乐部或服务的会员资格的各种信息的表格。

<style>
table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>编号</th>
    <th>加入时间</th>
    <th>余额</th>
  </tr>
  <tr>
    <td>玛格丽特 阮</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010-06-03</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>爱德华 加林斯基</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011-01-13</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>中村星</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012-07-23</time></td>
    <td>15.00</td>
  </tr>
</table>

尝试一下 »

截图

列出了人们的姓名以及关于俱乐部或服务的会员资格的各种信息的表格。

实例2：行和列跨越

现在，让我们介绍另一种列，其中将 “加入” 和 “到期” 的标题合并为 “会员有效期”。这涉及将行和列跨度添加到表格，以便标题单元格可以放在正确的位置。

结果

我们这次首先看看输出：

包含行和列跨越的表格

<style>
table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th rowspan="2">编号</th>
    <th colspan="2">会员有效期</th>
    <th rowspan="2">余额</th>
  </tr>
  <tr>
    <th>加入</th>
    <th>到期</th>
  </tr>
  <tr>
    <th>玛格丽特 阮</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010-06-03</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>爱德华 加林斯基</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011-01-13</time></td>
    <td><time datetime="2017-04-08">2017-04-08</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>中村星</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012-07-23</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

尝试一下 »

截图

包含行和列跨越的表�

请注意，这里的标题区域实际上是两行，一个是 “姓名”，“编号”，“会员有效期” 和 “余额”，另一个是 “加入” 和 “到期”，它们是 “会员有效期” 下面的子标题。这是通过下面的方法实现的：

  • 使用 rowspan 属性将第一行的 “姓名”，“编号” 和 “余额” 标题单元格跨两行，使它们每个都为两行高。
  • 第一行的 “会员有效期” 标题单元格使用 colspan 属性跨两列，这会导致该标题实际上为两列。
  • 在第二行的 <th> 元素，其中只包含 “加入” 和 “到期” 标题。由于其他列已被第二行的第一行单元格占用，因此它们会正确地放置在 “会员有效期” 标题下。

HTML

HTML 和前面的实例类似，除了在每个数据行中添加新列以及对标题进行更改之外。这些更改使 HTML 看起来像这样：

<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th rowspan="2">编号</th>
    <th colspan="2">会员有效期</th>
    <th rowspan="2">余额</th>
  </tr>
  <tr>
    <th>加入</th>
    <th>到期</th>
  </tr>
  <tr>
    <th>玛格丽特 阮</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">2010-06-03</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>爱德华 加林斯基</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">2011-01-13</time></td>
    <td><time datetime="2017-04-08">2017-04-08</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>中村星</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">2012-07-23</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

这里的重要区别在上面代码的前几行。注意使用 rowspan 来使 “姓名”，“编号” 和 “余额” 标题占用两行而不是一行，并且使用 colspan 来使 “会员有效期” 标题单元跨越两列。

CSS 与之前没有任何变化。

实例3：基本的样式

与表格的所有部分一样，您可以使用 CSS 更改表格行及其内容的外观。应用于 <tr> 元素的任何样式都将影响行内的单元格，除非被应用于这些单元格的样式覆盖。

让我们在表格中应用基本样式来调整正在使用的字体，并为标题行添加背景颜色。

结果

让我们再先看看结果。

为表格行设置基本样式：

<style>
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

thead > tr {
  background-color: rgb(228, 240, 245);
}

th, td {
  border: 1px solid black;
  padding:4px 6px;
}
</style>
<table>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th rowspan="2">编号</th>
      <th colspan="2">会员有效期</th>
      <th rowspan="2">余额</th>
    </tr>
    <tr>
      <th>加入</th>
      <th>到期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup">玛格丽特 阮</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010-06-03</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">爱德华 加林斯基</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011-01-13</time></td>
      <td><time datetime="2017-04-08">2017-04-08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">中村星</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012-07-23</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

尝试一下 »

截图

为表格行设置基本样式

CSS

这一次，HTML 保持不变，所以让我们直接设置 CSS。

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

thead > tr {
  background-color: rgb(228, 240, 245);
}

th, td {
  border: 1px solid black;
  padding:4px 6px;
}

我们在 <table> 元素中添加了 font 属性，以设置更具视觉吸引力的字体（或可恶的无衬线字体，具体取决于您的个人意见）。而有趣的部分是这里的第二个样式，我们在其中定义了位于 <thead> 内的元素 <tr> ，让它们具有淡蓝色背景色。这是一种快速将背景颜色一次性应用于标题区域中的所有单元格的方法。

实例4：高级的样式

现在我们全面出击，为标题和正文区域的行中设置样式，包括交替行的颜色，在不同的行内位置的单元格设置不同的颜色等等。

结果

以下是最终的外观。

为表格行设置高级样式：

<style>
  table {
    border: 1px solid black;
    font: 16px "Open Sans", Helvetica, Arial, sans-serif;
    border-spacing: 0;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid black;
    padding: 4px 6px;
  }

  th {
    vertical-align: bottom;
  }

  thead>tr {
    background-color: rgb(228, 240, 245);
  }

  thead>tr:nth-of-type(2) {
    border-bottom: 2px solid black;
  }

  thead>tr:last-of-type>th:nth-of-type(1) {
    background-color: rgb(225, 255, 225);
  }

  thead>tr:last-of-type>th:nth-of-type(2) {
    background-color: rgb(255, 225, 225);
  }

  tbody>tr:nth-of-type(even) {
    background-color: rgb(237, 238, 242);
  }

  tbody>tr>th:first-of-type {
    text-align: left;
    background-color: rgb(225, 229, 244);
  }

  tbody>tr>td:last-of-type {
    text-align: right;
  }
</style>

<table>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th rowspan="2">编号</th>
      <th colspan="2">会员有效期</th>
      <th rowspan="2">余额</th>
    </tr>
    <tr>
      <th>加入</th>
      <th>到期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup">玛格丽特 阮</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">2010-06-03</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">爱德华 加林斯基</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">2011-01-13</time></td>
      <td><time datetime="2017-04-08">2017-04-08</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">中村星</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">2012-07-23</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

尝试一下 »

截图

为表格行设置高级样式

HTML 依然没有改变，让我们看看如何为您的 HTML 设置更好看的外观。

CSS

CSS 这次涉及更多。这并不复杂，但有很多事情要做。让我们把它们分解开来。

表格和基础样式
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

在这里，我们添加了 border-spacing 和 border-collapse 属性来消除单元格之间的间距，并折叠彼此接触的边界以代替默认的双边框。

th, td {
  border: 1px solid black;
  padding:4px 6px;
}

th {
  vertical-align: bottom;
}

接着这里是所有表格单元格的默认样式。现在让我们开始定制！

顶部标题：总体

我们将分两部分来看看顶部标题。首先，标题的整体样式：

thead > tr {
  background-color: rgb(228, 240, 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;
}

这里将设置表格标题中所有 <tr> 元素的背景颜色（如 <thead> 所指定）。接着我们将顶部标题的底部边框设置为一条两像素宽的线。但是，请注意，我们使用了 :n-type-type 选择器将 border-bottom 应用于标题中的第二行。为什么呢？因为标题是由一些单元格跨越的两行组成的。这意味着实际上有两行；如果将样式应用到第一行不会给我们预期的结果。

“加入” 和 “到期” 标题

让我们用绿色和红色来表示这两个标题单元格。

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225, 255, 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255, 225, 225);
}

在这里，我们深入到表格的标题栏的最后一行，并给它的第一个标题单元（“加入” 标题）设置为绿色背景，并在其中的第二个标题单元（“到期” 标题）设置为红色背景。

为主体中的其他行设置不同的颜色

通过交替排列颜色来提高表格数据的可读性是很常见的。让我们为每一个偶数行添加一点颜色：

tbody > tr:nth-of-type(even) {
  background-color: rgb(237, 238, 242);
}
给左侧标题设置一些样式

由于我们希望第一列也很突出，我们也会在这里添加一些自定义样式。

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225, 229, 244);
}

这使用 text-align 将表格的每一行中的第一个标题单元格设置为左对齐成员名称，并使用不同的背景颜色。

调整余额内容的样式

最后，由于在表格中对货币值进行右对齐是标准做法，因该我们在这里执行该操作。

tbody > tr > td:last-of-type {
  text-align:right;
}

这只是将每个表格主体行中最后一个 <td> 的 CSS text-align属性设置为 right。

规范

规范 状态 备注
HTML Living Standard
tr element 的定义		 现行的标准 WHATWG 现行标准
HTML5
tr element 的定义		 推荐 W3C HTML5

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 1 支持 1 支持 支持 支持
align 未知 支持 不支持1 支持 未知 未知
bgcolor 未知 不支持 不支持 支持 未知 未知
char 未知 支持 不支持2 支持 未知 未知
charoff 未知 支持 不支持2 支持 未知 未知
valign 未知 支持 不支持1 支持 未知 未知

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 1 支持 支持 支持
align 未知 未知 支持 不支持1 支持 未知 未知
bgcolor 未知 未知 不支持 不支持 支持 未知 未知
char 未知 未知 支持 不支持2 支持 未知 未知
charoff 未知 未知 支持 不支持2 支持 未知 未知
valign 未知 未知 支持 不支持1 支持 未知 未知

1. See bug 915

2. See bug 2212

相关链接