Тег tr HTML

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

Тег <tr> - синтаксис и код

Тег <tr> представлен парами. Содержимое записывается между открывающим (<tr>) и закрывающим (</tr>) тегами.

Пример простой таблицы HTML с тремя строками, двумя ячейками заголовков и четырьмя ячейками данных:

<table>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>10000 ₽</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>5000 ₽</td>
  </tr>
</table>

Определение и использование

• HTML - тег <tr> определяет строку в таблице HTML;
• Элемент <tr> содержит один или несколько элементов <th> или <td>.

Теги <td> и <th> поддерживают атрибут colspan для дополнительного контроля над тем, как ячейки распределяются по столбцам или помещаются в них. Этот атрибут позволяет определить, сколько столбцов должна быть в ячейке (по умолчанию — 1). Вы можете использовать атрибут rowspan для ячеек, если хотите указать, что они должны охватывать более одной строки.

Некоторые таблицы также могут включать элементы <col>, <colgroup>, <caption>, <tfoot>, <tbody> и <thead>.

Все строки таблицы содержат одинаковое количество ячеек, что соответствует количеству ячеек в самой длинной строке. Если в строке меньше ячеек, то браузер автоматически заполнит строку, разместив в конце ее пустые ячейки.

Ячейки, добавленные браузером, не имеют границ, и если они идут друг за другом, они будут отображаться как одна интегрированная ячейка.

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

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

Тег <tr> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <tr> также поддерживает атрибуты событий в HTML

Еще примеры

При помощи свойства border-style вы можете установить внешний вид границы.

 th, td {
border-style: dotted;
}

С помощью свойства border-color вы можете установить цвет границы:

  th, td {
border-color: #89abcc;
}

Связанные страницы

Руководство по HTML: таблицы HTML

Настройки CSS по умолчанию

Большинство браузеров отображают элемент tr со следующими значениями по умолчанию:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.