<tr>：表格行元素

尝试一下

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

属性

此元素包含全局属性。

已废弃的属性

以下属性已被弃用，不应再使用。下文记录了这些属性，仅供更新现有代码时参考。

align

指定每行单元格的水平对齐方式。可能的枚举值包括 left、center、right、justify 和 char。如果支持，char 值将根据 char 属性中定义的字符和 charoff 属性定义的偏移量对文本内容进行对齐。请使用 text-align CSS 属性代替，因为该属性已被弃用。

bgcolor

定义每行单元格的背景颜色。值是 HTML 颜色；可以是以“#”为前缀的 6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。请使用 background-color CSS 属性代替，因为该属性已被弃用。

char

指定内容与每行单元格中一个字符的对齐方式。当尝试对齐数字或货币值时，典型值包括句号（.）。如果 align 未设置为 char，该属性将被忽略。

charoff

指定由 char 属性指定的对齐字符偏移行单元格内容的字符数。

valign

指定每行单元格的垂直对齐方式。可能的枚举值包括 baseline、bottom、middle 和 top。请使用 vertical-align CSS 属性代替，因为该属性已被弃用。

使用说明

• <tr> 可以作为其 <table> 父元素的直接子元素，但前提是 <table> 没有 <tbody> 子元素，并且只能位于任何 <caption>、<colgroup> 和 <thead> 元素之后。否则，父元素必须是 <thead>、<tbody> 或 <tfoot> 元素。
• CSS 伪类 :nth-of-type、:first-of-type 和 :last-of-type 通常用于选择所需的行集及其数据和标题单元格（<td> 和 <th> 元素）。

示例

参见 <table> 以获取介绍通用标准和最佳实践的完整表格示例。

基本行设置

本例演示了一个有四行三列的表格，其中第一列包含行数据单元格的标题。

HTML

四个 <tr> 元素用于创建四个表格行。每行包含三个单元格——一个标题单元格（<th>）和两个数据单元格（<td>）——形成三列。在每个标题单元格上设置的 scope 属性指定了它们与哪些单元格相关，在本示例中就是与 row（行）中的所有数据单元格相关。

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

CSS :nth-of-type 伪类用于选择每一个“奇数”行，并将这些行的 background-color 设置为稍暗的色调，从而产生所谓的“斑马条纹”效果。这种交替的背景使表格中的数据行更容易解析和阅读——想象一下有许多行和列，并试图在某一行中找到一些数据的情景。此外，行标题单元格（<th> 元素）用 background-color 突出显示，以区别于数据单元格（<td> 元素）。

tr:nth-of-type(odd) {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

结果

标题行

本示例扩展了上一示例中的基本表格，在表格的第一行添加了标题行。

HTML

我们添加了额外的表格行（<tr>）作为第一行，其中的列标题单元格（<th>）为每列提供了一个标题。我们将这一行放在 <thead> 分组元素中，以表示这是表格的表头。scope 属性被添加到该页眉行中的每个表头单元格（<th>）中，以明确指定每个表头单元格与其所在列中的所有单元格相关，即使这些单元格位于 <tbody> 中。

<table>
  <tr>
    <th scope="col">符号</th>
    <th scope="col">代码</th>
    <th scope="col">发音</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

CSS 与上一示例几乎没有变化，只是增加了一些样式来突出显示“标题行”，从而使各列的标题从其他单元格中脱颖而出。

tr:nth-of-type(odd) {
  background-color: #eee;
}

tr th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

结果

行排序

目前还没有对 <table> 的行（<tr> 元素）进行排序的原生方法。但是可以使用 Array.prototype.sort(), Node.removeChild 和 Node.appendChild 在 JavaScript 中实现自定 sort() 函数，对 HTMLCollection 的 <tr> 元素进行排序。

HTML

在这个基本表格中使用了 <tbody> 元素来标记表格的主体部分，并包含三行（<tr> 元素）数据（<td> 元素），创建了一列按降序排列的数字。

<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

JavaScript

在下面的 JavaScript 代码中，创建的 sort() 函数被附加到 <tbody> 元素上，这样它就能按照数值递增的顺序对表格单元格进行排序，并相应地更新显示内容。

HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

结果

点击表头单元格以进行排序

本示例扩展了上一示例中的基本表格，使排序具有交互性，并可独立于多列。

HTML

在表格主体（<tbody> 元素）中的每一行（<tr> 元素）上添加一个额外的数据单元格（<td> 元素），以创建第二列，按字母升序排列。使用 <thead> 元素，在主体部分之前添加标题部分，以引入包含表头单元格的标题行（<th> 元素）。在下面的 JavaScript 代码中使用这些标题单元格，使其可以点击，然后在每次点击激活时执行相应的排序。

<table>
  <thead>
    <tr>
      <th>数字</th>
      <th>字母</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

JavaScript

文档中的每个 <table> 的每个表头（<th>元素）都添加了一个点击事件处理程序；它会根据行中包含的数据单元格（<td> 元素）的内容对 <tbody> 的所有行（<tr> 元素）进行排序。

const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

th {
  background-color: #505050;
  color: #fff;
  cursor: pointer;
}

结果

技术概要

规范

浏览器兼容性

参见

• 学习：HTML 表格
• <caption>、<col>、<colgroup>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>：其他与表格相关的元素
• background-color：用于设置单元格背景颜色的 CSS 属性
• border：用于控制行单元格边框的 CSS 属性
• text-align：使每行单元格内容水平对齐的 CSS 属性
• vertical-align：使每行单元格内容垂直对齐的 CSS 属性
• :nth-of-type、:first-of-type、:last-of-type：选择特定单元格的伪类