HTML <tr> тег

  • Предыдущая страница <title>
  • Следующая страница <track>

Определение и использование

<tr> теги определяют строки в HTML таблице.

<tr> Элемент содержит один или несколько <th> или <td> Элемент.

См. также:

Урок HTML:HTML таблица

Руководство по HTML DOM:Объект TableRow

Урок CSS:Настройка стиля таблицы

Пример

Пример 1

Простая таблица HTML с тремя строками; строка заголовка и две строки данных:

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

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

Пример 2

Как выровнять: <tr> содержимое (используя CSS):

<table style="width:100%">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr style="text-align:right">
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

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

Пример 3

Как добавить цвет фона к строке таблицы (используя CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
 </table>

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

Пример 4

Как выровнять по вертикали: <tr> содержимое (используя CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

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

Пример 5

Как создать заголовок таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

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

Пример 6

Как создать таблицу с заголовком:

<table>
  <caption>Месяц сбережений</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

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

Пример 7

Как определить ячейки таблицы, простирающиеся через несколько строк или столбцов:

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

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

Глобальные свойства

<tr> Тег также поддерживает Глобальные свойства в HTML.

Свойства событий

<tr> Тег также поддерживает Свойства событий в HTML.

Стандартные CSS настройки

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <tr> Элемент:

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

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <title>
  • Следующая страница <track>