HTML тег `<tr>`

Значение и применение

Каждая строка таблицы помещается в элемент <tr>...</tr>.

Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Ячейка заголовка таблицы помещается в элемент <th>...</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>...</td>.

Наименование таблицы, если оно требуется размещается внутри элемента <caption>...</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.tr
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`tr`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`align`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`bgcolor`	✓1	✓12	✓1	✓≤15	✓1	✓18	✓4	✓≤14	✓1	✓1.0	✓4.4	✓1
`char`	×	×	×	×	×	×	×	×	×	×	×	×
`charoff`	×	×	×	×	×	×	×	×	×	×	×	×
`valign`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Ещё 3 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`align`	`right left center justify char`	Не поддерживается в HTML5. Выравнивает содержимое в строке таблицы.
`bgcolor`	`rgb(x,x,x) #xxxxxx colorname`	Не поддерживается в HTML5. Задает цвет фона для строки таблицы.
`char`	`character`	Не поддерживается в HTML5. Выравнивает содержимое в строке таблицы по заданному символу. Атрибут `char` может быть использован только если атрибут `align =` `"char"`.
`charoff`	`number`	Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут `charoff` может быть использован только если атрибут `align =` `"char"`.
`valign`	`top middle bottom baseline`	Не поддерживается в HTML5. Вертикальная выравнивает содержимое в строке таблицы

Примеры, попробуйте сами

Структура таблицы

Измените tr и сравните заголовки, основную часть и итог таблицы.

base.css

CSS

/* Границы помогают увидеть ячейки и их объединение. */
table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid;
    padding: 4px;
}

index.html

HTML

<table>
  <caption>
    Заказ
  </caption>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Блокнот</th>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Карандаш</th>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Всего</th>
      <td>5</td>
    </tr>
  </tfoot>
</table>

Отличия HTML 4.01 от HTML 5

В HTML 5 прекращена поддержка всех атрибутов тега.

Значение CSS по умолчанию

CSS

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <tr>