<tr> HTML-элемент строки таблицы

Элемент <tr> HTML задаёт строку ячеек таблицы. Ячейки строки можно создать с помощью элементов <td> (ячейка данных) и <th> (ячейка заголовка).

Попробуйте

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

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

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

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

td {
  text-align: center;
}

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

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. Вместо этого используйте CSS-свойство text-align, так как этот атрибут устарел.

bgcolor

Задаёт цвет фона каждой ячейки строки. Значение — цвет HTML: либо 6-значный шестнадцатеричный код RGB с префиксом #, либо ключевое слово цвета. Другие значения <color> CSS не поддерживаются. Вместо этого используйте CSS-свойство background-color, так как этот атрибут устарел.

char

Задаёт выравнивание содержимого каждой ячейки строки по символу. Обычно в качестве значения указывают точку (.), например, для выравнивания чисел или денежных значений. Если для align задано значение, отличное от char, этот атрибут игнорируется.

charoff

Задаёт смещение содержимого ячейки строки в символах относительно символа выравнивания, указанного атрибутом char.

valign

Задаёт вертикальное выравнивание каждой ячейки строки. Возможные перечисленные значения: baseline, bottom, middle и top. Вместо этого используйте CSS-свойство vertical-align, так как этот атрибут устарел.

Примечания по использованию

• Элемент <tr> может быть дочерним только для элемента <thead>, <tbody> или <tfoot>.
• Если <tr> размещён непосредственно внутри родительского элемента <table>, подразумевается родительский элемент <tbody>, и браузеры добавят <tbody> в разметку.
• Неявный родительский элемент <tbody> поддерживается, только если у <table> нет дочерних элементов <tbody>, а также если <tr> указан после любых элементов <caption>, <colgroup> и <thead>.
• Псевдоклассы CSS :nth-of-type, :first-of-type и :last-of-type часто полезны для выбора нужного набора строк и их ячеек данных и заголовков (элементов <td> и <th>).
• Когда <tr> включён непосредственно в <table>, браузер добавляет в разметку <tbody>, поэтому CSS-селекторы, такие как table > tr, могут работать не так, как ожидается, или не работать вовсе.

Примеры

Полный пример таблицы, в котором представлены общепринятые стандарты и лучшие практики, см. в статье <table>.

Базовая структура строк

В этом примере показана таблица с четырьмя строками и тремя столбцами, где первый столбец содержит заголовки для ячеек данных строк.

HTML

Для создания четырёх строк таблицы используются четыре элемента <tr>. Каждая строка содержит три ячейки — одну ячейку заголовка (<th>) и две ячейки данных (<td>), — образуя три столбца. Атрибут scope, заданный для каждой ячейки заголовка, указывает, к каким ячейкам она относится; в этом примере — ко всем ячейкам данных в row.

<table>
  <tbody>
    <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>
  </tbody>
</table>

CSS

Псевдокласс CSS :nth-of-type используется для выбора каждой odd строки и задания для неё более тёмного оттенка background-color, создавая так называемый эффект «зебры». Чередование цвета фона упрощает разбор и чтение строк данных таблицы — представьте, что строк и столбцов много и нужно найти данные в определённой строке. Кроме того, ячейки заголовков строк (элементы <th>) выделяются с помощью background-color, чтобы отличать их от ячеек данных (элементов <td>).

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

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

Результат

Строка заголовков

В этом примере базовая таблица из предыдущего примера дополнена строкой заголовков, добавленной в начало таблицы.

HTML

В начало таблицы добавлена ещё одна строка (<tr>) с ячейками заголовков столбцов (<th>), задающими заголовок для каждого столбца. Эта строка помещена в группирующий элемент <thead>, чтобы обозначить её как заголовок таблицы. Для каждой ячейки заголовка (<th>) в этой строке заголовков добавлен атрибут scope, явно указывающий, что ячейка заголовка относится ко всем ячейкам своего столбца, даже если эти ячейки находятся в <tbody>.

<table>
  <thead>
    <tr>
      <th scope="col">Symbol</th>
      <th scope="col">Code word</th>
      <th scope="col">Pronunciation</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

CSS

CSS почти не изменился по сравнению с предыдущим примером, кроме нескольких дополнительных стилей, выделяющих «строку заголовков», чтобы заголовки столбцов отличались от остальных ячеек.

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

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

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

Результат

Сортировка строк

Встроенных методов сортировки строк (элементов <tr>) в элементе <table> нет. Однако с помощью Array.prototype.sort(), Node.removeChild и Node.appendChild в JavaScript можно реализовать пользовательскую функцию sort() для сортировки <tr> элементов в объекте HTMLCollection.

HTML

В этой простой таблице для обозначения её основной части и включения трёх строк (элементов <tr>) с данными (элементами <td>) используется элемент <tbody>. В результате получается один столбец с числами в порядке убывания.

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

Результат

Сортировка строк нажатием на ячейки заголовков

В этом примере базовая таблица из предыдущего примера дополнена интерактивной сортировкой, работающей независимо для нескольких столбцов.

HTML

К каждой строке (элементу <tr>) в теле таблицы (элементе <tbody>) добавлена ещё одна ячейка данных (элемент <td>), чтобы создать второй столбец с буквами в порядке возрастания. С помощью элемента <thead> перед основной частью добавлена секция заголовков, содержащая строку заголовков с ячейками заголовков таблицы (элементами <th>). В приведённом ниже коде JavaScript эти ячейки заголовков становятся интерактивными: нажатие на них запускает соответствующую сортировку.

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</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

Для каждого заголовка таблицы (элемента <th>) каждой таблицы <table> в document добавляется обработчик события нажатия. Он сортирует все строки (элементы <tr>) элемента <tbody> на основе содержимого ячеек данных (элементов <td>) в этих строках.

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

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Изучение основ таблиц 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: псевдоклассы CSS для выбора нужных ячеек строк