Тег <tr>

Тег <tr> (укр. – “рядок таблиці”) використовується для визначення рядка таблиці в HTML-документах. Він є важливим елементом при створенні таблиць, оскільки в ньому містяться клітинки (елементи <td> та <th>), які організовують та структурують дані в таблиці. Тег <tr> зазвичай розташовується між тегами <thead>, <tbody> або <tfoot> для позначення різних частин таблиці.

Кожен рядок таблиці складається з кількох клітинок, де можуть бути розміщені дані або заголовки. Рядки таблиць зазвичай використовуються для візуальної організації даних у вигляді сітки, що робить інформацію більш зрозумілою.

Атрибути

Специфічні атрибути

Тег <tr> не має специфічних атрибутів.

Глобальні атрибути

Тег <tr> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор елемента. Наприклад:
<tr id="row-1">
  • class — клас, який використовується для стилізації або групування елементів. Наприклад:
<tr class="highlighted-row">
  • style — інлайн-стилізація елемента. Наприклад:
<tr style="background-color: #f0f0f0;">
  • lang — вказує мову вмісту рядка. Наприклад:
<tr lang="en">
  • title — додатковий опис рядка таблиці, що може бути корисним для доступності. Наприклад:
<tr title="Рядок з основними даними">

Приклад використання

<table>
  <thead>
    <tr>
      <th>Назва</th>
      <th>Ціна</th>
      <th>Кількість</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Товар 1</td>
      <td>$10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Товар 2</td>
      <td>$15</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

У цьому прикладі ми використовуємо тег <tr> для створення рядків таблиці. Перший рядок містить заголовки стовпців, а два наступних — дані для кожного товару.

Додаткові моменти

  • Тег <tr> є блочним елементом, але не має власних стилів, тому для налаштування зовнішнього вигляду рядка таблиці необхідно використовувати CSS.
  • Якщо ви хочете виділити окремі рядки таблиці або застосувати різні стилі до парних чи непарних рядків, можна використовувати псевдокласи CSS, такі як :nth-child().
  • У великих таблицях, де є багато рядків, рекомендується використовувати атрибут scope в заголовках таблиці для покращення доступності.