<tr>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023