Тег <tr>
указывает строку в таблице HTML. Ячейки внутри него определяются с помощью элементов <th>
(ячейка заголовка) или <td>
(стандартная ячейка). Элемент <tr>
объявляется внутри тега <table>
.
Тег <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 ₽ |
<tr>
определяет строку в таблице HTML;<tr>
содержит один или несколько элементов <th> или <td>.Теги <td>
и <th>
поддерживают атрибут colspan
для дополнительного контроля над тем, как ячейки распределяются по столбцам или помещаются в них. Этот атрибут позволяет определить, сколько столбцов должна быть в ячейке (по умолчанию — 1). Вы можете использовать атрибут rowspan
для ячеек, если хотите указать, что они должны охватывать более одной строки.
Некоторые таблицы также могут включать элементы <col>, <colgroup>, <caption>, <tfoot>, <tbody> и <thead>.
Все строки таблицы содержат одинаковое количество ячеек, что соответствует количеству ячеек в самой длинной строке. Если в строке меньше ячеек, то браузер автоматически заполнит строку, разместив в конце ее пустые ячейки.
Ячейки, добавленные браузером, не имеют границ, и если они идут друг за другом, они будут отображаться как одна интегрированная ячейка.
Поддерживает | |
Поддерживает | |
Поддерживает | |
Поддерживает | |
Поддерживает |
Тег <tr>
также поддерживает глобальные атрибуты в HTML
Тег <tr>
также поддерживает атрибуты событий в HTML
При помощи свойства border-style
вы можете установить внешний вид границы.
th, td {
border-style: dotted;
}
С помощью свойства border-color
вы можете установить цвет границы:
th, td {
border-color: #89abcc;
}
Руководство по HTML: таблицы HTML
Большинство браузеров отображают элемент tr
со следующими значениями по умолчанию:
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.