tr

<tr>

HTML<tr> 元素 指定包含在内部的标记<tr>块包括一个表，在其内部的一列<th>和<td>元素创建报头和数据单元，分别是行内。每个单元格放置在自己的列中; 所述用户代理将按照特定的规则，以确定如何在每行中的单元被置于列与那些从其它行的到来。

为了提供对单元格如何适合（或跨越）列的附加控制，<th>并<td>支持该colspan属性，使您可以指定单元格的宽度应为多少，默认值为1.同样，可以使用rowspan单元格上的属性以表明他们应该跨越多个表格行。

这可能需要一些练习，以便在建立表格时正确使用。我们在下面有一些例子，但是更多的例子和深入的教程，请参阅我们的学习Web开发领域的HTML表格系列，在这里你将学习如何使用表格元素及其属性来获得正确的布局和格式化您的表格数据。

属性

这个元素包括全局属性以及下面的属性。还有几个被弃用的属性，你应该避免，但是在阅读旧代码时可能需要知道。

cells只读只读HTMLCollection对象，其中包含行内单元格元素的列表。此集合中的每个项目都是<td>元素或<th>元素。

一个元素可以和通常有两个非负值rowIndex和colIndex，因为这是一个表的一部分的任何行会里其中一个部分，甚至在一个简单的表不明确使用<tbody>; 这是因为浏览器会自动添加一个<tbody>元素，如果缺少。

方法

这个元素支持在HTMLElement所有HTML元素派生的接口上定义的所有方法。另外，它支持以下方法：

deleteCell()从行的cells集合中删除指定数字索引处的单元格。

过时的属性

以下属性仍然可以在浏览器中实现，但不再是HTML规范的一部分，可能会丢失，也可能无法正常工作。他们应该避免。

align 由于HTML5 A DOMString已经过时，它指定了单元格的上下文应该如何在行中的单元格内水平对齐; 这是align在行中的每个单元格上单独使用的简写。可能的值是：left将每个单元格的内容对齐左边缘。

如果没有明确设置align值，则继承父节点的值。

而不是使用过时的align属性，则应该使用的CSS text-align属性来建立left，center，right，或justify该行的细胞排列。要应用基于字符的对齐，请将CSS text-align属性设置为对齐字符（如"."或","）。

bgcolor自HTML5以来已过时

一个DOMString指定的颜色应用到各行的细胞的背景。这可以是一个十六进制#RRGGBB或#RGB值（https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb（％29））或一个颜色关键字。忽略该属性或将其设置为nullJavaScript导致行的单元格继承行的父元素的背景颜色。

该<tr>元素应该使用CSS风格。为了提供与bgcolor属性类似的效果，请使用CSS属性background-color。

char自HTML5以来已过时

A DOMString设置字符对齐每行的列中的单元格（使用相同字符的每一行的居中使用相同的字符与其他字符对齐，典型的值包括period（"."）或逗号（","），当试图对齐数字或货币值，如果align未设置char，则忽略此属性。

这个属性不仅是过时的，而且很少实现。要达到与char属性相同的效果，请将CSS text-align属性设置为您要为char属性指定的相同字符串，例如text align: "."。

charoff自HTML5以来已过时

DOMString应该由指定的对齐字符之后显示在该列的数据的尾端的字符指示数char属性。例如，对于使用一个单元，以百分之货币显示货币值时（如美元，其被划分为100分）中，一般会指定为2的值，使得在与串联char被设置为"."，在值一列将小数点完全对齐，分数正确显示在小数点右侧。

这个属性已经过时了，而且从来没有得到广泛的支持。

valign自HTML5以来已过时

DOMString指定行中的每个单元内的文本的垂直对齐。这个属性的可能值是：

baseline将每个单元格的内容文本尽可能地与单元格底部对齐，通过沿行中使用的字体的基线对齐字符来处理不同字体和字体大小的对齐。如果该行中的所有字符都是相同的大小，效果是一样的bottom。

不要使用过时的valign属性。相反，将CSS vertical-align属性添加到该行。

例子

见<table>例子<tr>。

基本的例子

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

HTML

这个HTML演示了一个表的最基本的结构。没有组，没有跨越多行或多列的单元格，没有标题，只有最基本的样式才能在表格组件周围创建线条，以便看起来清晰。

只有四行（包括一个标题行），每行有四个列（包括一个标题列）。甚至不使用表格部分元素; 相反，浏览器可以自动确定。我们将增加<thead>，<tbody>以及<tfoot>在未来的例子。

<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

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

table {
  border: 1px solid black;
}

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

Result

行和列跨越

现在，让我们介绍另一列，显示用户的成员资格结束的日期，以及超过称为“成员日期”的“加入”和“取消”日期超级标题。这涉及将行和列跨度添加到表格，以便标题单元格可以在正确的位置。

Result

我们先来看看这个输出：

注意这里的标题区域实际上是两行，一个是“Name”，“ID”，“Membership Dates”和“Balance”标题，另一个是“Joined”和“Cancelled”，它们是下面的子标题“会员日期”。这是通过：

• 具有第一行的“名称”，“标识”和“平衡”标题单元格使用该rowspan属性跨两行，使它们每个都是两行高。

• 具有第一行的“成员日期”标题单元格使用该colspan属性跨两列，这导致此标题实际上是两列宽。

• 拥有<th>仅包含“已加入”和“已取消”标题的第二行元素。由于其他列已被第一行单元占据，所以这些列在“成员日期”标题下正确定位。

HTML

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

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td><time datetime="2017-04008">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

为了讨论行和列跨度，这里的重要区别在上面代码的前几行。请注意使用rowspanon来使“名称”，“ID”和“平衡”标题占用两行而不是一行，并且使用“ colspan使成员日期”标题单元跨越两列。

CSS从之前没有变化。

明确指定表格内容组

在真正进入样式表之前，让我们花点时间添加行和列组，以帮助我们简化CSS。

HTML

HTML就是这里的动作，而且动作非常简单。

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup">Margaret Nguyen</td>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">Edvard Galinski</td>
      <td>533175</td>
      <td><time datetime="2011-01013">January 13, 2011</time></td>
      <td><time datetime="2017-04008">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">Hoshi Nakamura</td>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

为了讨论行和列跨度，这里的重要区别在上面代码的前几行。请注意使用rowspanon来使“名称”，“ID”和“平衡”标题占用两行而不是一行，并且使用“ colspan使成员日期”标题单元跨越两列。

我们再一次没有触及CSS。

Result

输出完全不变，尽管下面增加了有用的上下文信息：

基本的造型

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

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

Result

再次，让我们先看看结果。

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;
}

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

这并没有影响到的风格<th>元素在第一列，不过，在这里我们把成员名称作为行标题。

先进的造型

现在我们将全力以赴，包括标题和正文区域中的行，包括交替的行颜色，取决于行内位置的不同颜色的单元格等等。

Result

以下是最后的外观：

再次没有HTML改变。看看你的HTML可以为你做什么适当的准备？

CSS

CSS这次涉及更多。这并不复杂，但还有很多事情要做。我们来分解一下。

表格和基础样式

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

Here we've added the border-spacing and border-collapse properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.

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>）。然后我们将顶部标题的底部边框设置为一个两像素宽的线。但是，请注意，我们正在使用:nth-of-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
}

在这里，我们深入到表格标题栏的最后一行，并给它的第一个标题单元格（“Joined”标题）一个绿色，第二个标题单元格（“Canceled”标题）一个微红的色调。

以不同的颜色为每个body的其他行填色

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

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

给左侧的标题一些风格

Since we want the first column to stand out as well, we'll add some custom styling here, too.

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

这种方式使表格正文的每一行中的第一个标题单元格与text-align左对齐的成员名称，并具有不同的背景颜色。

调整对齐

Finally, since it's standard practice to right-justify currency values in tables, let's do that here.

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

这只是将每个正文行中text-align的最后一个的CSS 属性设置<td>为"right"。

元素属性

规范

浏览器兼容性