HTML тег tr
Тег <tr> определяет строку HTML таблицы.
Тег <tr> содержит как минимум один элемент <th> или <td>.
Разница между HTML 4.01 и HTML5
В HTML5 все репрезентативные атрибуты не поддерживаются.Атрибуты тега <tr>
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента |
| bgcolor | Определяет фоновый цвет элемента |
| char | Определяет символ выравнивания содержимого строки таблицы |
| charoff | Определяет количество символов смещения |
| valign | Определяет вертикальное выравнивание содержимого строки таблицы |
Общие атрибуты
Тег <tr> поддерживает общие атрибуты и атрибуты-события.
HTML пример
Простая HTML таблица с двумя строками и двумя столбцами:
<table>
<tr>
<th>Месяц</th>
<th>Сэкономлено</th>
</tr>
<tr>
<td>Январь</td>
<td>$100</td>
</tr>
</table>
CSS стили по умолчанию
Большинство браузеров будут отображать тег <tr> со следующими стилями
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
seodon.ru | Теги HTML — Тег TR
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <TR> применяется для создания рядов (строк) таблицы. Он группирует все ячейки ряда и может использоваться для задания его единого оформления, чтобы повысить качество восприятия и удобство пользования таблицей. Естественно, к тегу <TR> можно применить не только его атрибуты, но и стили (CSS).
Атрибуты
Личные атрибуты:
- align — Задает положение содержимого ячеек ряда по горизонтали.
- bgcolor — Устанавливает фоновый цвет для ряда.
- bordercolor — Цвет границ (рамок) ячеек ряда.
- valign — Положение содержимого ячеек ряда по вертикали.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: таблицы.
Модель тега: может располагаться внутри элемента <TABLE>, либо внутри <THEAD>, <TBODY>, <TFOOT>. Но не оба варианта одновременно.
Должен содержать: теги <TD> или <TH>.
Открывающий тег: необходим. Закрывающий тег: не обязателен.
Синтаксис
<table>
<tr><th>...<th></tr>
<tr><td>...<td></tr>
</table>Пример HTML: применение тега TR
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега TR</title>
</head>
<body>
<table cellpadding="2" border="1">
<tr><th>Январь</th><th>Февраль</th><th>Март</th></tr>
<tr align="right">
<td>31 день</td><td>28 дней</td><td>31 день</td>
</tr>
</table>
</body>
</html>Результат примера
Результат. Применение тега TR.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Тег TR в HTML таблицах — Таблицы — codebra
Атрибуты для тега tr
Атрибут align
Атрибут align задает выравнивание содержимого ячеек строки по горизонтали. Если применять атрибут к тегу <tr>, а мы знаем, что тег <tr> отвечает за разметку строки, то выравнивание происходит во всех ячейках данного тега. Далее таблица значений и пример:
| left | Выравнивание содержимого ячеек по левому краю. |
| center | Выравнивание по центру. |
| right | Выравнивание по правому краю. |
| justify | Выравнивание по ширине (одновременно по правому и левому краю). |
Код HTML
<table width = "100%">
<tr align = "center">
<td>Строка 1</td>
<td>Строка 1</td>
</tr>
</table>Атрибут bgcolor
Атрибут bgcolor задает цвет фона строки. Цвета могут задаваться в шестнадцатеричном коде, в формате RGB или зарезервированными словами (red, black и т.д.). Удобнее всего цвета подбирать в Paint.net, лично я им пользуюсь, простой и удобный редактор. Далее пример:
Код HTML
<table>
<tr bgcolor = "green">
<td>Строка 1</td>
<td>Строка 1</td>
</tr>
<tr bgcolor = "#F1F1F1">
<td>Строка 2</td>
<td>Строка 2</td>
</tr>
</table>Атрибут bordercolor
Атрибут bordercolor указывает цвет рамки, но он бесполезен, так как его поддерживает только Internet Explorer.
Атрибут valign
Атрибут valign применяют для вертикального выравнивания содержимого ячеек в строке. Далее таблица значений и пример:
| top | Выравнивание содержимого ячеек по верхнему краю строки. |
| middle | Выравнивание по середине. |
| bottom | Выравнивание по нижнему краю. |
| baseline | Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии. |
Код HTML
<table>
<tr valign = "middle">
<td>Привет</td>
<td>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum at egestas orci. Vivamus
vitae pretium neque. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut finibus commodo nibh, in accumsan nulla
finibus at. Etiam nec lacus eu turpis volutpat sodales.
Ut pretium dui lacus, non commodo est malesuada placerat.
Nulla bibendum quam elit, in placerat ex placerat ut.
Curabitur non aliquet massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Nam gravida mi quis enim vulputate, sed convallis
magna ultrices. Proin purus enim, fermentum vel tincidunt id,
bibendum eget felis.
</td>
</tr>
</table>Заключение
Все эти атрибуты полезны и удобны, но лучше использовать CSS, он более универсален и рационален.
Атрибут align | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Android | iOS | |
| 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для тега <td> или <th>.
Синтаксис
<tr align="left | center | right | justify | char">...</tr>Значения
- left
- Выравнивание содержимого ячеек по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краю).
- char
- Выравнивание по указанному символу.
Значение по умолчанию
left
Аналог CSS
text-align
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TR, атрибут align</title>
</head>
<body>
<table border="1">
<tr align="center">
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.