HTML тег - tr - определение и примеры использования
Меню
Веб-разработка
Мои услуги на Kwork
Тег 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>
Месяц Экономия
Январь 10000 ₽
Февраль 5000 ₽

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

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

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

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

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

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

Примечание: чтобы настроить внешний вид таблицы, используйте свойства CSS.

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

Crome Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

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

Тег <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.

 

Поделиться ссылкой