Тег tr: Тег | HTML справочник – seodon.ru | Теги HTML — Тег TR

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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Тег TR в HTML таблицах — Таблицы — codebra

Атрибуты для тега tr

Атрибут align

Атрибут align задает выравнивание содержимого ячеек строки по горизонтали. Если применять атрибут к тегу <tr>, а мы знаем, что тег <tr> отвечает за разметку строки, то выравнивание происходит во всех ячейках данного тега. Далее таблица значений и пример:

Таблица взята с сайта htmlbook.ru
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 применяют для вертикального выравнивания содержимого ячеек в строке. Далее таблица значений и пример:

Таблица взята с сайта htmlbook.ru
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 Firefox 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *