HTML-тег `<thead>`

Тег <thead> определяет заголовок HTML-таблицы. Этот тег используется вместе с тегами <tbody> и <tfoot>, которые задают тело и подвал таблицы соответственно.

Тег <thead> должен использоваться как дочерний элемент элемента <table>, после элементов <caption> и <colgroup>, но перед элементами <tfoot>, <tbody> и <tr>. (Внутри <table> можно использовать только один тег <thead>).

Обратите внимание, что тег <tfoot> должен располагаться перед <tbody>, чтобы браузер мог корректно отобразить подвал таблицы.

DANGER

Тег <thead> должен содержать как минимум один элемент <tr>.

TIP

Элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Используйте свойства CSS, чтобы настроить внешний вид таблицы.

Синтаксис

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

HTML-тег <thead>

html

<table>
  <thead>
    <tr>
      <th> ... </th>
    </tr>
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </tbody>
</table>

Пример использования HTML-тега `<thead>`:

HTML-тег <thead>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Результат

thead example

Атрибуты

Атрибут	Значения	Описание
align	right left center justify char	Задает выравнивание содержимого внутри элемента `<thead>`. Не поддерживается в HTML5
bgcolor	bgcolor	Устанавливает цвет фона строк внутри элемента `<thead>`. Не поддерживается в HTML5
char	character	Задает выравнивание содержимого внутри элемента `<thead>` по символу. Используется только при атрибуте align="char". Не поддерживается в HTML5.
charoff	number	Задает количество символов, на которое содержимое внутри элемента `<thead>` будет смещено от символа, указанного в атрибуте char. Используется только при атрибуте align="char". Не поддерживается в HTML5.
valign	top bottom middle baseline	Задает вертикальное выравнивание содержимого внутри элемента `<thead>`. Не поддерживается в HTML5.

Тег <thead> поддерживает глобальные атрибуты и атрибуты событий.

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

css

thead {
  background-color: #f2f2f2;
  font-weight: bold;
}

Практика

Какова функция HTML-тега <thead>?

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

HTML-тег <thead> ​

Синтаксис ​

Пример использования HTML-тега <thead>: ​

Результат ​