Thead table: : The Table Head element — HTML: HyperText Markup Language

Leave a Comment / Разное / 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>

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4. 01 SpecificationРекомендация

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

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

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

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

Браузеры

31213.511
1161

Браузеры

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

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

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

Таблицы

См. также

  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <tr>
  • Структура таблицы
  • Таблицы в HTML

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

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

Последнее изменение: 10. 10.2018

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

HTML тег thead

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

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

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

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

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

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

Разница между HTML 4.01 и HTML5

В HTML5 не поддерживается ни один атрибут для HTML 4.01.

Атрибуты тега <thead>

АтрибутОписание
alignОпределяет горизонтальное выравнивание содержимого элемента
charОпределяет символ выравнивания, по которому будет выравниваться содержимое внутри элемента
charoffОпределяет количество символов смещения относительно символа выравнивания
valign		Определяет вертикальное выравнивание содержимого элемента <thead>

Общие атрибуты

Тег <thead> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <thead> со следующими стилями

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

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

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

<table>
   <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>

&двоеточие; Элемент заголовка таблицы — HTML: Язык гипертекстовой разметки

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

элементов. сразу следует или элемент.,

Элемент

используется для идентификации одной или нескольких строк таблицы, которые содержат метки столбцов, а не данные. Он должен быть прямым потомком элемента
Категории контента Нет.
Разрешенный контент Ноль или более
Отсутствие тега Начальный тег обязателен. Конечный тег может быть опущен, если За элементом
Разрешенные родители Элемент . должен стоять после любого <заголовок>
 или элемент, даже неявно определенный, но перед любым , и элемент.
Неявная роль ARIA группа строк
Разрешенные роли ARIA Любой
Интерфейс DOM HTMLTableSectionElement

Этот элемент включает глобальные атрибуты.

Устаревшие атрибуты

выравнивание Устаревший

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

  • left     , выравнивание содержимого по левому краю ячейки
  • center , центрирование содержимого в ячейке
  • right , выравнивание содержимого по правому краю ячейки
  • по ширине , вставляя пробелы в текстовое содержимое, чтобы содержимое в ячейке 9 было по ширине0100
  • char , выравнивание текстового содержимого по специальному символу с минимальным смещением, определяемым атрибутами char и charoff .

Если этот атрибут не установлен, предполагается значение слева .

Предупреждение: Не используйте этот атрибут, так как он устарел (не поддерживается) в последнем стандарте.

  • Для выравнивания значений используйте свойство CSS text-align .
bgcolor Устаревший

Этот атрибут определяет цвет фона каждой ячейки столбца. Он принимает 6-значный шестнадцатеричный цвет или именованный цвет. Альфа-прозрачность не поддерживается.

Примечание: Не используйте этот атрибут, так как он нестандартен. Элемент thead должен быть оформлен с использованием свойства CSS background-color , которое можно применить к любому элементу, включая элемент 9.0004 thead ,

и элементов.

символ Not for use in new websites.»> Устаревший

Этот атрибут используется для установки символа для выравнивания ячеек в столбце. Типичные значения для этого включают точку (.) при попытке выровнять числа или денежные значения. Если для

align не установлено значение char , этот атрибут игнорируется.

Примечание: Не используйте этот атрибут, так как он устарел (и не поддерживается) в последнем стандарте.

уголь Устаревший

Этот атрибут используется для указания количества символов для смещения данных столбца от символов выравнивания, заданных атрибутом char .

Примечание: Не используйте этот атрибут, так как он устарел (и не поддерживается) в последнем стандарте.

валайн Not for use in new websites.»> Устаревший

Этот атрибут определяет вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения этого атрибута:

.
  • baseline , что поместит текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не по их нижней части. Если все символы одного размера, это имеет тот же эффект, что и 9.0004 снизу .
  • нижний , что поместит текст как можно ближе к нижней части ячейки;
  • средний , который будет центрировать текст в ячейке;
  • top , что поместит текст как можно ближе к верхней части ячейки.

Примечание: Не используйте этот атрибут, так как он устарел (и не поддерживается) в последнем стандарте: вместо этого установите CSS вертикальное выравнивание свойство на нем.

См.

для примеров на .

Загрузка таблиц только в браузере. Включите JavaScript для просмотра данных.

  • Другие HTML-элементы, связанные с таблицами:
, ,
Спецификация
Стандарт HTML
# the-thead-element
,
, , ,

5;

  • свойств CSS и псевдоклассов, которые могут быть особенно полезны для стилизации элемента
    • :
    • псевдокласс :nth-child для установки выравнивания по ячейкам столбца;
    • свойство text-align для выравнивания содержимого всех ячеек по одному и тому же символу, например '.'.

    Последнее изменение: , участниками MDN

    Теги HTML »

    В тегах HTML

    Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

    Элемент
    HTML-таблицы: узнайте, когда их использовать (и когда следует избегать)
    Что делает
    HTML-тег ?
    Элемент
     используется для идентификации одной или нескольких строк таблицы, которые содержат метки столбцов, а не данные таблицы.
    Дисплей
    Встроенный

    Пример кода 

     <таблица>
    <тело> <тд>96,1% <тд>17,0% <тд>14,3% <тд>70,4% <тд>12,4% <тд>10,5%

    ,
    ,
    Три самые популярные библиотеки JavaScript
    Библиотека JQuery Самозагрузка Модернизр
    Доля рынка
    Абсолютное использование
    Доля рынка — это процент сайтов, использующих любую библиотеку JavaScript, использующую указанную библиотеку. Абсолютное использование – это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, но использующие указанную библиотеку. Все данные взяты из W3Techs и были точными на июнь 2016 года.
    The Three Most Popular JavaScript Libraries
    Library jQuery Bootstrap Modernizr
    Market Share 96.1% 17.0% 14.3%
    Absolute Usage 70,4% 12,4% 10,5%
    Доля рынка относится к проценту сайтов, использующих любую библиотеку JavaScript, использующую указанную библиотеку. Абсолютное использование — это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку. Все данные получены от W3Techs и были точными на июнь 2016 года.

    Как использовать

    и стоять после таблицы 9.0004 элементов. Кроме того, также должны быть перед любыми элементами или . Важно отметить, что каждая таблица может иметь только один элемент . Если вам нужны две строки для заголовков столбцов, добавьте оба элемента в один элемент следующим образом:
    и любые
    < td>$47,000,000
    Компания A Компания B
    Основана Годовой объем продаж Основана Годовой объем продаж
    2008 2004 $27,000,000
    Компания A Компания B
    Основана Годовые продажи Основана Годовой объем продаж
    2008 $47 000 000 2004 27 000 000 долларов США

    Давайте посмотрим, что ваш браузер сделает из-за неправильного использования элемента .

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

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