W3docs
ru
Войти

HTML <tr> тег

Тег HTML <tr> определяет строку в таблице, содержащую ячейки <th> и <td>. Атрибуты и стилизация с примерами.

Тег HTML <tr> определяет строку в таблице. Это контейнер: <tr> содержит ячейки данной строки, и каждая ячейка записывается с помощью <th> (ячейка заголовка) или <td> (стандартная ячейка данных). Таблица строится путём укладки строк <tr>, и браузер выравнивает ячейки каждой строки по столбцам.

На этой странице рассматривается, что делает <tr>, где он располагается в таблице, его атрибуты (и почему старые атрибуты упразднены), а также как стилизовать строки с помощью CSS.

<tr> должен располагаться внутри элемента <table> — либо непосредственно, либо внутри одного из элементов группировки строк: <thead>, <tbody> или <tfoot>. Элемент <tr> может содержать только ячейки <td> и <th>.

Каждая строка может содержать разное количество ячеек. Браузер отображает ровно те ячейки, которые вы написали; он не добавляет автоматически пустые ячейки в короткую строку. Чтобы оставить ячейку пустой, добавьте пустой элемент <td> или <th>.

Примечание: <tr> сам по себе никогда не охватывает столбцы или строки. Атрибуты colspan и rowspan, объединяющие ячейки по столбцам или строкам, применяются к ячейкам, а не к строке — см. <td> и <th>.

Совет

Для управления внешним видом строк и таблиц (цвета, границы, выравнивание) используйте свойства таблиц CSS, а не HTML-атрибуты.

Синтаксис

Тег <tr> используется парно. Содержимое записывается между открывающим (<tr>) и закрывающим (</tr>) тегами.

Синтаксис HTML-тега <tr>

<table> 
  <tr> 
    <td>...</td> 
  </tr> 
</table>

Пример HTML-тега <tr>:

Пример HTML-тега <tr>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>March</td>
        <td>10.09.2018</td>
      </tr>
      <tr>
        <td>June</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Первый <tr> содержит две ячейки заголовка <th>; каждый последующий <tr> содержит две ячейки данных <td>. Поскольку в каждой строке одинаковое количество ячеек, они аккуратно выстраиваются в два столбца.

Группировка строк с помощью <thead>, <tbody> и <tfoot>

Для таблиц крупнее самых простых следует группировать строки. Строки заголовка помещаются внутрь <thead>, строки тела — внутрь <tbody>, а строки итогов/подвала — внутрь <tfoot>. Строки <tr> располагаются внутри этих групп. Это делает разметку понятнее, позволяет вспомогательным технологиям правильно объявлять таблицу и даёт удобные точки для применения CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      tfoot {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Item</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Coffee</td>
          <td>$3</td>
        </tr>
        <tr>
          <td>Tea</td>
          <td>$2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$5</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Атрибуты

Тег <tr> не имеет собственных атрибутов. Он поддерживает только стандартные глобальные атрибуты (такие как class, id, style) и атрибуты событий.

Перечисленные ниже презентационные атрибуты были доступны в старых версиях HTML, но являются устаревшими в HTML5. Вместо них следует использовать CSS.

Устаревший атрибутЧто он делалЗамена в CSS
alignГоризонтальное выравнивание содержимого ячейкиtext-align: left / center / right;
valignВертикальное выравнивание содержимого ячейкиvertical-align: top / middle / bottom;
bgcolorЦвет фона строкиbackground-color: …;
bordercolorЦвет границыborder-color: …;
char / charoffВыравнивание содержимого по символуНет CSS-эквивалента (редко требуется)
Внимание

Не используйте align, valign, bgcolor, bordercolor, char или charoff в <tr>. Браузеры могут игнорировать их, и они недействительны в HTML5. Используйте вместо этого text-align, vertical-align и background-color в CSS.

Как стилизовать HTML-тег <tr>

Стилизуйте строки с помощью CSS, обращаясь к элементу <tr>. Распространённый приём — зебра-полосатость (чередующаяся закраска строк), которая облегчает чтение длинных таблиц. Селектор tr:nth-child(even) выбирает каждую вторую строку:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
      }
      thead tr {
        background-color: #333;
        color: #fff;
      }
      tbody tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      tbody tr:hover {
        background-color: #e0f0ff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>Designer</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>Developer</td>
        </tr>
        <tr>
          <td>Carol</td>
          <td>Manager</td>
        </tr>
        <tr>
          <td>Dave</td>
          <td>Tester</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Здесь thead tr окрашивает строку заголовка, tbody tr:nth-child(even) закрашивает 2-ю и 4-ю строки тела, а tbody tr:hover подсвечивает строку, на которую наведён указатель.

Практика

Практика
Какова цель тега tr в HTML?
Какова цель тега tr в HTML?
Was this page helpful?