Thead html: | HTML | WebReference – : The Table Head element — HTML: Hypertext Markup Language

Leave a Comment / Html / By /

| HTML | WebReference

Элемент <thead> (от англ. table head — голова или шапка таблицы) предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после открывающего тега <table> или <caption> (если он есть).

Синтаксис

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

Закрывающий тег

Не обязателен.

Атрибуты

align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера <thead>.
valign
Выравнивание содержимого ячеек по вертикали.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>THEAD</title>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <td> ... </td>
     <td> ... </td> 
    </tr> 
   </thead>
   <tbody>
    <tr>
     <td> ... </td>
     <td> ... </td> 
    </tr> 
   </tbody>
  </table>
 </body>
</html>

Спецификация ?

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег | HTML справочник

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

Описание

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

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

Браузеры могут использовать эти элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула. Так же при выводе на печать большой таблицы, которая занимает несколько страниц, эти элементы могут включить заголовок и нижний колонтитул, которые будут напечатаны в верхней и нижней части каждой страницы.

Элемент <thead> должен быть расположен после элементов <caption> и <colgroup> (если таковые присутствуют), но до элементов <tbody> и <tfoot>.

Атрибуты

Тег <thead> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

Пример


<table border="1">
  <caption>Ежемесячные сбережения</caption>
  <colgroup>
    <col span="1">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Доход</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Сумма</td>
      <td>180р</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>100р</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>80р</td>
    </tr>
  </tbody>
</table>

Результат данного примера в окне браузера:

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

| Справочник HTML

Элемент <thead> (от англ. «table header» ‒ «заголовок таблицы») используется для группирования содержимого верхнего колонтитула HTML таблицы.

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

Браузеры могут использовать эти элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула. Так же при выводе на печать большой таблицы, которая занимает несколько страниц, эти элементы могут включать заголовок и нижний колонтитул, которые будут напечатаны в верхней и нижней части каждой страницы.

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

Примечание: Внутри элемента <thead> должен быть определен по крайней мере один элемент <tr>.

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

Синтаксис

<table>
  <caption> ... </caption>
  <colgroup> ... </colgroup>
  <thead>
    ...
    <tr> ... </tr>
    ...
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </tbody>
</table>

Закрывающий тег

Не обязателен.

Атрибуты

alignУстарел в HTML5
Выравнивает содержимое внутри элемента.
charУстарел в HTML5
Выравнивает содержимое в элементе по заданному символу. Атрибут char может быть использован только если атрибут align = «char».
charoffУстарел в HTML5
Атрибут, который позволяет произвести выравнивание в элементе с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char».
bgcolorУстарел в HTML5
Цвет фона ячеек, которые расположены внутри контейнера <thead>.
valignУстарел в HTML5
Вертикальное выравнивание содержимого внутри элемента.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

Различия между HTML 4.01 и HTML5

В HTML 5 были удалены все атрибуты тега.

Пример использования:

HTML таблица с элементами <thead>, <tfoot> и <tbody>:

Пример HTML:

Попробуй сам
<table>
<thead>  
<tr><th colspan="4">Это шапка таблицы</th></tr>

 </thead>
<tfoot>
<tr><td colspan="4">Это подвал таблицы</td></tr>
</tfoot>
<tbody>
<tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</tbody>  
</table>

Спецификации

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

Элемент
<thead> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<thead> 1+ 1+ 6+ 1+

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

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

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

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц

Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы


HTML-теги thead, tbody и tfoot. Разделение таблицы.

Доброго времени суток. Меня зовут Михаил.

Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.

Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.

В прошлом небольшом видео ролике мы поговорили о заголовке или подписи для таблицы. Узнали, как просто подписать таблицу для облегчения ориентирования посетителей.

В этом видео уроке продолжаем разговор о HTML-таблицах. И рассмотрим еще один интересный вариант действий, которые мы можем совершать для различных манипуляций над таблицами. Кстати, полученные далее знания очень удобно применять при оформлении таблиц.

Четыре HTML-тега, о которых мы поговорим в этом видео, предназначены для разделения таблицы на части. То есть с их помощью мы сможем определить верхнюю часть таблицы, основную часть и нижнюю часть таблицы. Это теги

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

HTML-теги <thead>, <th>, <tbody> и <tfoot>.

HTML-тег <thead>.

HTML-тег <thead> предназначен для определения верхней (заголовочной) части таблицы. Данный тег необходимо прописывать сразу после открывающего тега <table>, если нет заголовка указанного с помощью тега <caption>. Если же заголовок присутствует, то тег необходимо добавлять после него. Кроме того, при использовании данного элемента в коде обязательно должен присутствовать HTML-тег

<tbody>.

Опять рассмотрим пример применения данного тега внутри кода HTML-таблицы. Опять же мы возьмем код из прошлой статьи и добавим к нему тег <thead>:

Заголовок таблицы
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3
Ячейка 3-1Ячейка 3-2Ячейка 3-3
Здесь также стоит обратить внимание на то, что внутри тега <thead> мы можем сделать визуальное выделение текста с помощью жирного начертания текста. Тем самым мы обозначим верхнюю часть таблицы. Для того чтобы это делать необходимо воспользоваться еще одним тегом, это HTML-тег <th>.
HTML-тег <th>.
Тег <th> выполняет абсолютно ту же роль, что и тег <td>. То есть является обыкновенной ячейкой. Однако он предназначен для выделения жирным начертанием текста внутри такой ячейки. То есть если мы посмотрим на работу тега 
 
<td>. Мы увидим, что тег просто создает ячейку с текстом внутри и все на этом. А HTML-тег <th> создает ячейку и выделяет текст внутри этой ячейки жирным начертанием. Это очень удобно для выделения самых значимых ячеек внутри таблицы.
Также стоит отметить, что если мы используем тег <thead>, мы не обязаны использовать тег <th>. Мы также можем воспользоваться и тегом <td>.
Пример исходного кода с использованием тега <th>:
Заголовок таблицы
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3
Ячейка 3-1Ячейка 3-2Ячейка 3-3
Здесь я думаю все понятно. А вот про следующий HTML-тег следует всегда помнить.
HTML-тег <tbody>.
Дело в том, что если мы решили использовать в таблице тег <thead>, значит, мы обязательно должны использовать и тег <tbody>, который предназначен для выделения основной части таблицы. Можно его даже назвать аналогом тега <body> для HTML-документа в целом. Только тег <tbody> относится только к таблице, а не к целому документу.
Что касается примера. То здесь все просто. Сначала мы прописываем тег <thead>, так как он отвечает за верхнюю часть таблицы, а затем прописываем тег <tbody>:
Заголовок таблицы
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3
Ячейка 3-1Ячейка 3-2Ячейка 3-3
И последний тег, о котором мы сегодня поговорим, это тег <tfoot>, который отвечает за нижнюю часть таблицы. То есть ту часть, которая идет после основной.
HTML-тег <tfoot>.
Однако у этого HTML-тега есть одна особенность. Если смотреть на его предназначение и предназначение других тегов, которые делят таблицу на части, то можно сделать вывод, что раз он отвечает за нижнюю часть, то и прописать его мы должны после тега <tbody>. Однако это не так. На самом деле HTML-тег <tfoot> должен быть указан до <tbody>. Однако информацию внутри этого тега необходимо указать ту, которая будет снизу, так как веб-браузер выведет ее под основной информацией. Это следует всегда помнить, чтобы при написании кода не запутаться.
Ну и пример HTML-тега <tfoot>:
Заголовок таблицы
Ячейка 1-1Ячейка 1-2Ячейка 1-3
Ячейка 3-1Ячейка 3-2Ячейка 3-3
Ячейка 2-1Ячейка 2-2Ячейка 2-3
Обратите внимание на порядок строк в исходном коде. И на то, что в итоге выведет веб-браузер на экран.
Видео урок: HTML-теги <thead>, <th>, <tbody> и <tfoot>. Разделение таблицы.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с еще двумя тегами colgroup и col. И подведем итоги раздела, посвященного таблицам в HTML.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *