thead в HTML

HTML тег thead

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

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

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

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

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

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

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

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

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

HTML пример

HTML таблица с элементами

, и :

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

Большинство браузеров будут отображать тег

со следующими стилями

в HTML

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

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

Атрибуты

  • align — Задает положение содержимого ячеек по горизонтали.
  • valign — Положение содержимого по вертикали.
  • bgcolor — Устанавливает фоновый цвет для группы рядов.
  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: может располагаться внутри элемента , но только в одном экземпляре перед тегами и .

Должен содержать: один или более тегов .

Открывающий тег: необходим. Закрывающий тег: не обязателен.

thead

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

IE Opera Chrome Firefox Safari
+ + + + +

Пример

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

Описание и использование

Тег

используется для группировки контента шапки таблицы.

Элемент tbody должен быть использован вместе с элементами tfoot и tbody.

Элемент tfoot используется для группировки контента в футере таблицы, а tbody — в теле таблицы.

Примечание: должен находится перед

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

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

html tables: thead vs th

It looks like (according to the examples on this page, anyways) that if you’re using THEAD, you don’t need to use TH.

Is that true? If so, what are the advantages/disadvantages of THEAD vs TH?

7 Answers 7

The

tag is used to group the header content in an HTML table. The thead element should be used in conjunction with the tbody and tfoot elements.

You use

to encapsulate an entire row (or rows) to designate them as the Table Header. According to the spec,

«This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.»

, on the other hand, is used to style a specific cell as a header cell rather than an ordinary data cell.

actually is a replacement for

when you want to mark a cell as a header cell.

If you want to use

and don’t forget to nest inside . Otherwise the code may not be valid.
Example:

th is more specific than what may reside inside of thead . A th cell is to specify the header of the corresponding td cells. In fact you can add a headers attribute to a td cell which points to the id of a th cell (for screen readers). So th is directly related to the td s of that column.

However, thead can include any information. commonly yes it does include the th cells but it can also include anything that you might deem to be appropriate as information at the top of the table (other than a caption, because this has its own tag as well).

is special in that it can be used to repeat the header row at the top of the page in printed versions.

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD , TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table’s columns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.

Table cells may contain two types of information: header information and data. This distinction enables user agents to render header and data cells distinctly, even in the absence of style sheets. For example, visual user agents may present header cell text with a bold font. Speech synthesizers may render header information with a distinct voice inflection.

The TH element defines a cell that contains header information. User agents have two pieces of header information available: the contents of the TH element and the value of the abbr attribute. User agents must render either the contents of the cell or the value of the abbr attribute. For visual media, the latter may be appropriate when there is insufficient space to render the full contents of the cell. For non-visual media abbr may be used as an abbreviation for table headers when these are rendered along with the contents of the cells to which they apply.

HTML :: Таблицы

Создание таблицы

Информация, структурированная в виде таблиц, представляется в HTML 5 элементом ‘table’ , в дополнение к которому предоставляется целый набор тегов, позволяющих создать заголовок, разбить таблицу на логические секции, сформировать и, при необходимости, объединить строки, столбцы и отдельные ячейки. Давайте посмотрим на код простейшей таблицы, показанный в примере №1, а затем разберем все элементы по порядку.

Пример №1. Использование элемента ‘table’

Итак, для формирования таблицы используется парный тег (от англ. table – таблица). По умолчанию браузеры рисуют таблицу вообще без границ. Но если указать атрибут border , который в качестве равнозначных значений принимает пустую строку или «1» , то будут нарисованы все границы ячеек и рамка вокруг таблицы.

Создание заголовка таблицы

Если у таблицы предполагается заголовок, то сразу же после открывающего тега

необходимо разместить элемент ‘caption’ , формирующийся парным тегом (от англ. caption – заголовок). По умолчанию браузеры отображают заголовок над таблицей с выравниванием по центру. Однако изменить внешний вид и расположение заголовка, опять же, весьма просто при помощи CSS .

Формирование строк и ячеек таблицы

Деление строк таблицы на логические секции

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

Для группировки строк таблицы разбиваются элементами ‘thead’ , ‘tbody’ и ‘tfoot’ на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами: (от англ. table head – шапка таблицы), (от англ. table body – тело таблицы) и (от англ. table foot – подвал таблицы).

Элемент ‘thead’ предназначен для группирования одной или нескольких строк вверху таблицы. По логике вещей в данной секции нужно размещать строки с заголовочными ячейками ‘th’ , однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS . Допускается применение только одного элемента ‘thead’ в пределах одной таблицы, который должен располагаться после элементов ‘caption’ или ‘colgroup’ , если они конечно присутствуют, но перед элементами ‘tbody’ , ‘tfoot’ или ‘tr’ . При чем секция может вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а, соответственно, и описывать такие ситуации не станем ни здесь, ни далее.

Элемент ‘tfoot’ предназначен для группирования одной или нескольких строк внизу таблицы. Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками ‘td’ , однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS . Допускается применение только одного элемента ‘tfoot’ в пределах одной таблицы, который разрешается располагать, как непосредственно перед элементом ‘tbody’ , так и сразу же после него. Мы будем использовать второй вариант и всегда располагать ‘подвал’ таблицы после ее ‘тела’ . Если итоговых ячеек нет, то элемент ‘tfoot’ можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы ‘thead’ и ‘tbody’ .

Cекций ‘tbody’ может быть несколько. Располагаются они друг за другом после секции ‘thead’ . Все они предназначены для размещения обычных строк с данными, как правило сгруппированных по каким-либо признакам, если секций несколько. Кроме того, допускается отсутствие строк в секциях ‘tbody’ , но если секции созданы, то использовать строки вне ‘thead’ , ‘tbody’ и ‘tfoot’ не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то нужно соответствовать своим устремлениям до конца.

Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример №2).

Пример №2. Разбиение таблицы на секции

Может показаться, что введение элементов ‘thead’ , ‘tbody’ и ‘tfoot’ излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент ‘div’ , применяя к нему нужные стили CSS . Однако давайте не будем забывать, что ‘div’ – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку. Конечно, без стилей CSS они, также как и ‘div’ свое содержимое никак не изменяют, зато для поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных, располагающихся в соответствующих разделах.

Объединение колонок в группы

Для объединения колонок по общему признаку применяются элементы ‘col’ и ‘colgroup’ . Первый из них является пустым и формируется одиночным тегом (от англ. column – колонка), второй формируется парным тегом (от англ. column group – группа колонок). Оба элемента должны располагаться сразу после элемента ‘caption’ или, при его отсутствии, после открывающего тега

.

Каждый элемент ‘col’ представляет одну или несколько колонок, отсчет которых происходит слева направо и соответствует порядку следования элементов ‘col’ в коде. Если нужно, чтобы элемент представлял несколько колонок, то используется атрибут span , который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок. Рассмотрим использование элемента ‘col’ подробнее на примере №3.

Пример №3. Использование элемента ‘col’

Таким образом, если мы, например, хотим применить общий стиль CSS для колонок с четвертой по восьмую включительно, то необходимо сперва создать элемент ‘col’ , указать в нем атрибут span=»3″ , а затем сформировать еще один элемент ‘col’ с атрибутом span=»5″ , привязав к нему необходимые стили CSS .

Столбцы таблицы ‘col’ могут также быть объединены в лексические группы при помощи элемента ‘colgroup’ . Если мы, например, хотим задать столбцам желтый цвет фона, то необходимо перечислить их внутри контейнера ‘colgroup’ , указав в его открывающем теге атрибут style=»background-color: yellow» . В результате отпадает необходимость указывать этот атрибут во всех элементах ‘col’ . Кроме того, ‘colgroup’ может использоваться аналогично элементу ‘col’ , и, следовательно, вперемешку с ним. В этом случае для выделения нескольких столбцов также используется атрибут span (см. пример №4).

Пример №4. Использование элементов ‘col’ и ‘colgroup’

Физическое объединение ячеек таблицы

Итак, со строками и столбцами разобрались, теперь рассмотрим ячейки. На практике довольно часто возникает необходимость физического объединения сразу нескольких ячеек в одну. Для этих целей в тегах

Tag

The HTML

tag is used for adding a header to a table.

Note: If you use the

tag, it must be used in the following context:

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to prov >style=»color:black;» .

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

и предусмотрены атрибуты colspan (от англ. column span) и rowspan (от англ. row span), которые в качестве значений принимают, соответственно, число объединяемых ячеек по горизонтали и вертикали. Рассмотрим различные варианты объединения ячеек на примере №5.

Пример №5. Использование атрибутов colspan и rowspan

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

Понятие табличной верстки

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

HTML 5

Attribute Description
None

Global Attributes

The following attributes are standard across all HTML 5 tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

thead

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

IE Opera Chrome Firefox Safari
+ + + + +

Пример

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

Описание и использование

Тег

используется для группировки контента шапки таблицы.

Элемент tbody должен быть использован вместе с элементами tfoot и tbody.

Элемент tfoot используется для группировки контента в футере таблицы, а tbody — в теле таблицы.

Примечание: должен находится перед

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

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

Почему в семантичной верстке html порядок тегов table thead, tfoot, tbody?

Внутри таблицы TFOOT должен идти перед TBODY, чтобы браузер пользователя мог отобразить TFOOT до получения всех остальных строк из TBODY, которых может оказаться очень много.

Представьте, что у вас очень большая таблица:

В таком случае, браузер быстренько отобразит пользователю THEAD и TFOOT (обычно они не содержат много строк), и пользователь будет ждать, пока не загрузится остальная часть строк из TBODY. Если бы TFOOT шёл после TBODY, пользователю пришлось бы ждать полного отображения TBODY и лишь затем он бы увидел TFOOT.

В HTML5 допустим и такой порядок: thead, tbody, tfoot.

Thead & tbody

If you want, you can leave your tables like this, but if you appreciate content that are highly semantically structured I am glad to introduce you to the

element. The element structures the headings in your table and this tells browsers what e.g. each column contains. The element structures all of the content, so that the browser knows what the actual content of the table is. Using the same example as before, the and the elements are to b used like this:

Additionally, there is one more element I would like to introduce to you – the

element. This tag, which stands for table cell heading, is to be used instead of the element when the content of the cell is a heading instead of actual cell data.

This means that it is the obvious choice inside the

element (which should contain e.g. the first row of your table) but you can also use it for the very first column to indicate the headings — table row headers.

Let’s look at an example – it is very similar to the previous but I have used meaningful content to make clear to you how to use the

element.

As you probably notice when you try out the examples yourself, you cannot see any difference. This is because the thead, tbody, and the tableheadings only add semmantic value. But you can always use CSS to style your table and then these elements actually make the styling easier!

Border для th в thead

Не получается в файле css передать border для th (который в thead).
А напрямую в html получается, но так не хочется.

Border должен быть здесь:

— но так небогоугодно и просто некошерно.

20.03.2020, 15:20

два css класса к тегу
Есть такая часть таблицы

Некорректная работа свойств border и border-radius на мобильных устройствах
Доброго времени суток, произошла интересная вещь: использовала border-radius:50% и border:6px.

CSS border-right как убрать крайний правый border
делаю сайт http://medi-clinic.ru и столкнулся с такой проблемой, в меню пункты разделены рамкой.

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; — будут.

Илон Маск рекомендует:  Живые примеры
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL