<tr> – Елемент ряду таблиці

Елемент HTML <tr> (table row – ряд таблиці) визначає ряд комірок у таблиці. Комірки ряду можуть бути визначені за допомогою поєднання елементів <td> (комірка даних) та <th> (заголовкова комірка).

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

Нерекомендовані атрибути

Наступні атрибути – нерекомендовані й не повинні використовуватися. Вони описані для довідки при оновленні коду та з історичної цікавості.

align

Задає горизонтальне вирівнювання кожної комірки ряду. Можливі значення: left (ліворуч), center (по центру), right (праворуч), justify (по ширині) і char (за символом). Значення char, коли воно підтримується, вирівнює текст за символом, заданим атрибутом char, зі зсувом, визначеним атрибутом charoff. Замість цього атрибута використовуйте властивість CSS text-align, оскільки він нерекомендований.

bgcolor

Визначає фоновий колір кожної комірки ряду. Значення – колір HTML; це або 6-значний шістнадцятковий код RGB, з префіксом '#', або ключове слово кольору. Інші значення CSS <color&gt не підтримуються. Використовуйте замість цього атрибута властивість 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

Чотири елементи утворюють чотири ряди таблиці. Кожен рядок містить три комірки: одну заголовкову (<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>, що вказує, що це заголовок таблиці. У цьому ряду до кожної комірки заголовка (<th>) додається атрибут scope, аби чітко показати, що кожна комірка заголовка відповідає всім коміркам у своєму стовпці, попри те, що комірки розташовані в <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>). Але на JavaScript за допомогою Array.prototype.sort(), Node.removeChild і Node.appendChild можна реалізувати для сортування HTMLCollection елементів <tr> користувацьку функцію sort().

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

До кожного ряду (<tr>) в тілі таблиці (<tbody>) додається додаткова комірка даних (<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

До кожного заголовка таблиці (<th>) у кожному <table> в документі (document) додається обробник подій клацання. Він сортує всі ряди (<tr>) в <tbody> на основі вмісту комірок даних (<td>), що містяться в цих рядах.

[!NOTE] Це рішення передбачає, що елементи <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);
    });
  }
}

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

Результат

[!NOTE] Щоб заголовкова комірка кожного сортувального стовпця була доступною та зрозумілою, вона повинна мати вигляд кнопки сортування. Також потрібно візуально показати, чи стовпець відсортовано у порядку зростання, чи спадання, і скористатися атрибутом aria-sort. Для отримання додаткової інформації дивіться приклад сортування таблиці Посібника з авторських практик ARIA.

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Вивчення – Таблиці 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 для вибирання бажаних комірок ряду