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 Табицы

HTML Элементы



Contema