<tr>: Элемент строки таблицы

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

Этот элемент включает глобальные атрибуты.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и только для ознакомления с историей.

align Устарел

Указывает горизонтальное выравнивание каждой ячейки строки. Возможные значения перечисления — left, center, right, justify, и char. В поддерживаемых браузерах значение char выравнивает текстовое содержимое по символу, определённому в атрибуте char, и по смещению, определённому в атрибуте charoff. Используйте свойство CSS text-align вместо этого атрибута, так как он устарел.

bgcolor Устарел

Определяет цвет фона каждой ячейки строки. Значение — HTML-цвет; либо 6-значный шестнадцатеричный код RGB, префикс которого '#', либо ключевое слово цвета. Другие значения CSS <color> не поддерживаются. Используйте свойство 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>
  <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 используется для выбора каждой odd строки и установки background-color этих строк на немного более тёмный оттенок, создавая эффект «полос зебры». Это чередование фона облегчает чтение данных в таблице — представьте, у вас много строк и столбцов, и вам нужно найти данные в определенной строке. Кроме того, ячейки заголовка строки (<th>) выделяются background-color, чтобы отличить их от ячеек данных (<td>).

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

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

Результат

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

HTML

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

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

Результат

Для сортировки строк (элементов <tr> ) таблицы (<table> ) нет встроенных методов. Но с помощью Array.prototype.sort(), Node.removeChild и Node.appendChild можно реализовать пользовательскую sort() функцию на JavaScript для сортировки набора (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));

Результат

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

HTML

В тело таблицы (<tbody> элемент) каждой строке (элемент <tr> ) добавляется дополнительная ячейка данных (элемент <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 для выбора необходимых ячеек строк