HTML-тег <tr>
Тег <tr> определяет строку в таблице HTML. Ячейки внутри него задаются с помощью элементов <th> (заголовочная ячейка) или <td> (обычная ячейка). Оба тега <td> и <th> поддерживают атрибут colspan для дополнительного контроля над тем, как ячейки растягиваются или помещаются в столбцы. Этот атрибут позволяет определить, сколько столбцов в ширину должна занимать ячейка (по умолчанию — 1). Вы можете использовать атрибут rowspan для ячеек, если хотите указать, что они должны растягиваться более чем на одну строку.
Некоторые таблицы также могут включать элементы <col>, <colgroup>, <caption>, <tfoot>, <tbody> и <thead>.
Элемент <tr> объявляется внутри тега <table>.
Каждая строка может содержать разное количество ячеек. Браузер отображает ровно столько ячеек, сколько указано в разметке; он автоматически не заполняет строку пустыми ячейками. Если нужно оставить ячейку пустой, просто создайте элемент <td> или <th> без содержимого.
TIP
Чтобы настроить внешний вид таблицы, используйте свойства CSS.
Синтаксис
Тег <tr> используется парами. Содержимое записывается между открывающим (<tr>) и закрывающим (</tr>) тегами.
Синтаксис HTML <tr> Tag
<table>
<tr>
<td>...</td>
</tr>
</table>Пример HTML-тега <tr>:
Пример HTML-тега <tr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Результат
Атрибуты
Примечание: Следующие атрибуты устарели в HTML5 и не должны использоваться в современной веб-разработке.
| Атрибут | Значение | Описание |
|---|---|---|
| align | right left center justify char | Выравнивает содержимое в строке таблицы. Не поддерживается в HTML 5. |
| bgcolor | bgcolor | Задает цвет фона для строки таблицы. Не поддерживается в HTML 5. |
| bordercolor | bordercolor | Устанавливает цвет границы. Не поддерживается в HTML 5. |
| char | character | Выравнивает содержимое в строке таблицы по символу. Используется только если атрибут align="char". Не поддерживается в HTML 5. |
| charoff | number | Задает количество символов, на которое содержимое будет сдвинуто от символа, указанного в атрибуте char. Используется только если атрибут align="char". Не поддерживается в HTML 5. |
| valign | top middle bottom baseline | Задает вертикальное выравнивание содержимого внутри строки таблицы. Не поддерживается в HTML 5. |
Тег <tr> поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать HTML <tr> Tag
Практика
В чем назначение и использование тега <tr> в HTML?