<tr>

Что делает тег

Тег <tr> создаёт в таблице строку, которая содержит ячейки <td> или заголовки <th>.

Синтаксис тега <tr>

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <tr> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Создание простой таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

Добавление стилей для строки:

<table>
  <tr style="background-color: lightblue;">
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Петр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

Для чего использовать тег <tr>

• Создать строки таблицы.
• Создать заголовки — для этого используется тег <th> внутри <tr>.
• Добавить стили к строкам таблицы — для этого используется атрибут style.

Атрибуты тега <tr>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <tr> является дочерним элементом тега <table> и может содержать только элементы <td> или <th>, которые создают ячейки в строке.

Нюансы

• Не рекомендуется использовать тег <tr> за пределами таблицы.
• Все ячейки строки должны быть заполнены, иначе таблица может отображаться некорректно.
• При необходимости можно объединить ячейки строки с помощью атрибута colspan.
• Если таблица содержит заголовки столбцов, то первая строка таблицы должна содержать элементы <th> вместо <td>.

Поддержка браузерами

Тег <tr> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега tr> не существует.

Чем заменить тег

Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например, <div>, <ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.

Актуальность

Тег <tr> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.