HTML тег <thead>

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

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

Элемент <thead> должен содержать хотя бы один элемент <tr>.

По умолчанию элементы <thead>, <tbody> и <tfoot> не влияют на внешний вид таблицы, но его можно настроить с помощью стилей CSS.

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
   <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <thead style="background-color:#1c87c9; color:#fff;">
        <tr>
          <th>Услуга</th>
          <th>Стоимость</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Итого</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Стрижка</td>
          <td>500</td>
        </tr>
        <tr>
          <td>Укладка феном</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Результат

Атрибуты

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

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

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





Похожие статьи