Элемент | ||||||
<tr> | 3+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
HTML тег <tr>
Элемент <tr> (от англ. "table row" ‒ «строка таблицы») служит контейнером для создания строки таблицы. Он может содержать один или несколько тегов <th> или <td>.
Элемент <tr> используется только внутри таблиц (элемент <table>) и может содержать только теги для создания ячеек, любое содержимое таблицы (текст, списки, изображения и прочие HTML-элементы) помещается внутрь тегов <td> и <th>, которые определяют содержимое ячеек.
Примечание: Все строки таблицы будут содержать такое же количество ячеек, которое содержится в самой длинной из всех строк. Браузер автоматически добавит пустые ячейки в строки с меньшим количеством ячеек.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Закрывающий тег
Не обязателен.
Атрибуты
- alignУстарел в HTML5
- Выравнивает содержимое в строке таблицы:
left - выравнивание содержимого ячейки по левому краю
center - выравнивание по центру
right - выравнивание по правому краю
justify - выравнивание по ширине (одновременно по правому и левому краю)
char - выравнивание по указанному символу - bgcolorУстарел в HTML5
- Задает цвет фона для строки таблицы.
- bordercolorУстарел в HTML5
- Устанавливает цвет рамки.
- charУстарел в HTML5
- Выравнивает содержимое в строке таблицы по заданному символу.
Пример: <tr char="c" align="char">...</tr> - charoffУстарел в HTML5
- Задает смещение содержимого строки относительно заданного символа.
- valignУстарел в HTML5
- Вертикальная выравнивает содержимое в строке таблицы:
top - выравнивание содержимого ячейки по верхнему краю строки
middle - выравнивание по середине
bottom - выравнивание по нижнему краю
baseline - выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии
Для этого элемента доступны глобальные атрибуты и не доступны события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <tr> со следующими значениями CSS по умолчанию:
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Различия между HTML 4.01 и HTML5
В HTML 5 прекращена поддержка всех атрибутов тега.
Пример использования:
Пример HTML:
Попробуй сам <table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
Спецификации
Спецификация | Статус |
---|---|
WHATWG HTML Living Standard (WHATWG) | Живой стандарт |
HTML 4.01 (W3C) | Рекомендация |
HTML5 (W3C) | Рекомендация |
HTML 5.1 (W3C) | Рекомендация |
Поддержка браузерами
Попробуйте сами - Примеры
Как добавить рамку вокруг таблицы:
Граница таблицы
Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы
Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы
Как изменить ширину таблицы:
Ширина таблицы
Как объединить столбцы таблицы:
Объединение столбцов
Как создать заголовок таблицы:
Заголовок таблицы
Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц
Учебник HTML
HTML уроки: HTML Табицы