Тег th: Тег th | Справочник HTML CSS – seodon.ru | Теги HTML — Тег TH

Содержание

seodon.ru | Теги HTML - Тег TH

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <TH> применяется для создания заголовочных ячеек таблицы. В отличие от обычных ячеек (тег <TD>) — содержимое заголовочных браузеры располагают по центру ячеек и выводят текст полужирным шрифтом. В ячейках содержатся все данные таблицы. Спецификацией HTML допускается оставлять ячейки пустыми, но некоторые старые браузеры не отображают фон таких ячеек, даже если поставить в них пробел. Поэтому выходом будет указать в ячейке неразрывный пробел-мнемонику (&nbsp;). Если же необходимо сделать ее совсем маленькой, то можно вставить прозрачный рисунок с размером в один пиксель.

Атрибуты

Личные атрибуты:

  • align — Задает положение содержимого ячейки по горизонтали.
  • background — Устанавливает Фоновое изображение для ячейки.
  • bgcolor — Устанавливает фоновый цвет.
  • bordercolor — Цвет границы (рамки) ячейки.
  • colspan — Указывает количество ячеек объединенных в одну по горизонтали.
  • height — Задает рекомендуемую высоту ячейки.
  • nowrap — Запрещает переносить строки.
  • rowspan — Указывает количество ячеек объединенных в одну по вертикали.
  • valign — Задает положение содержимого ячеек по вертикали.
  • width — Рекомендуемая ширина.

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

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

Тип тега

Назначение: таблицы.

Модель тега: может располагаться внутри элемента <TR>.

Может содержать: block-теги и/или inline-теги, обычный текст и спецсимволы HTML (мнемоники).

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

Синтаксис

<table>
 <tr>
  <th>содержимое</th>
 </tr>
</table>

Пример HTML: применение тега TH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега TH</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th rowspan="2" bgcolor="#FFD700">Модель</th>
    <th colspan="2" bgcolor="gold">Двигатель</th>
   </tr>
   
   <tr><td>Мощность, л.c.</td><td>Объем, см<sup>3</sup></td></tr>
   
   <tr><td>Lamborghini Murcielago</td><td>640</td><td>6496</td></tr>
   
   <tr><td>Lamborghini Gallardo</td><td>500</td><td>4961</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Применение тега TH.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

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



Элемент <th> (от англ. "table header" ‒ «заголовок таблицы») определяет заголовочную ячейку HTML таблицы. Элемент <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

В HTML таблице может быть два вида ячеек:

  • Заголовочная ячейка ‒ содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>). По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
  • Стандартная ячейка ‒ содержит табличные данные (создается при помощи элемента <td>). По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.

Содержимым элемента <th> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.

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

Синтаксис

<table>
  ...
  <tr>
    ...
    <th> ... </th>
    ...
  </tr>
  ...
</table>

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

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

Атрибуты

abbrУстарел в HTML5
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

alignУстарел в HTML5
Указывает выравнивание содержимого ячейки по горизонтали:
left - выравнивание содержимого ячейки по левому краю
center - выравнивание по центру
right - выравнивание по правому краю
justify - выравнивание по ширине (одновременно по правому и левому краю)
char - выравнивание по указанному символу

axisУстарел в HTML5
Группирует ячейки связанные между собой похожей информацией.

backgroundУстарел в HTML5
Задаёт фоновый рисунок в ячейке.

bgcolorУстарел в HTML5
Назначает цвет фона ячейки.

bordercolorУстарел в HTML5
Устанавливает цвет рамки.

charУстарел в HTML5
Выравнивает содержимое ячейки по заданному символу.
Пример: <td char="c" align="char">...</td>

charoffУстарел в HTML5
Задает смещение содержимого ячейки относительно заданного символа.

colspan
Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.

headers
Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

heightУстарел в HTML5
Устанавливает высоту ячейки данных.

nowrapУстарел в HTML5
Запрещает перенос строк.

rowspan
Объединяет вертикальные ячейки.

scopeУстарел в HTML5
Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:
col - ячейка заголовка установлена для колонки
colgroup - ячейка заголовка установлена для группы колонок
row - ячейка заголовка задана для строки
rowgroup - ячейка заголовка установлена для группы строк

valignУстарел в HTML5
Назначает выравнивание содержимого ячейки по вертикали:
top - выравнивание содержимого ячейки по верхнему краю строки
middle - выравнивание по середине
bottom - выравнивание по нижнему краю
baseline - выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии

sortedОтсутствует в HTML 5.1
Определяет направление сортировки столбца:
reversed - реверсивное направление сортировки столбца
number - указывает обычную последовательность столбцов
reversed number - указывает обратную последовательность столбцов
number reversed - указывает реверсивную последовательность столбцов

widthУстарел в HTML5
Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.

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

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

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

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

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

В HTML 5 была прекращена поддержка 9 атрибутов и одного в 5.1.

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

Пример HTML:

Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

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

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

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

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

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

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

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

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

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

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

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


Учебник HTML

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

HTML Элементы



Тег | bookhtml.ru

 

 

 

Тег <th> - элемент языка html, используемый для создания заголовка таблицы и размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

Пример написания:

<table>

<tr>

<th>Заголовок</th>

</tr>

<tr>

<td>Текст</td>

<td>Текст</td>

</tr>

</table>

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

abbr....................Краткое описание содержимого ячейки.

align...................Определяет выравнивание содержимого ячейки по горизонтали.

axis....................Группирует ячейки связанные между собой похожей информацией.

background........Задает фоновый рисунок в ячейке.

bgcolor...............Цвет фона ячейки.

bordercolor..........Цвет рамки.

char....................Выравнивает содержимое ячейки по заданному символу.

charoff...............Смещает содержимое ячейки относительно заданного символа.

colspan...............Объединяет горизонтальные ячейки.

headers..............Позволяет связать ячейки таблицы с заголовками в речевых браузерах.

height................Высота ячейки.

nowrap...............Запрещает перенос строк.

rowspan..............Объединяет вертикальные ячейки.

scope..................Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.

valign..................Выравнивание содержимого ячейки по вертикали.

width..................Ширина ячейки.

 

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

Язык HTML - это круто.

Тег TH

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

Синтаксис
<table>
<tr>
<th>...</th>
</tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание содержимого ячейки по горизонтали.
background — задает фоновый рисунок в ячейке.
bgcolor — цвет фона ячейки.
bordercolor — цвет рамки.
colspan — объединяет горизонтальные ячейки.
height — высота ячейки.
nowrap — запрещает перенос строк.
rowspan — объединяет вертикальные ячейки.
valign — выравнивание содержимого ячейки по вертикали.
width — ширина ячейки.

Пример 1. Использование тега TH

<html>
<body>

<table border=0 cellpadding=7 cellspacing=0>
<tr>
<th colspan=2 bgcolor=#D3EDF6 align=center> ... </th>
</tr>
<tr>
<td valign=top align=center> ... </td>
<td valign=top> ... </td>
</tr>
</table>

</body>
</html>

Описание параметров тега TH

Параметр ALIGN

Описание
Задает выравнивание содержимого ячейки по горизонтали.

Синтаксис
<th align=left | center | right>...</th>

Аргументы
left — выравнивание по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;

Значение по умолчанию
left

Аналог CSS
text-align

Пример 2. Выравнивание содержимого ячейки

<html>
<body>
<table width=600 border=1>
<tr>
<th align=center> ... </th>
<th align=center> ... </th>
</tr>
</table>
</body>
</html>

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<th background=URL>...</th>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Аналог CSS
background-image

Пример 3. Фоновый рисунок для ячейки

<html>
<body>
<table width=600>
<tr>
<th background=/images/rules.gif> ... </th>
</tr>
</table>
</body>
</html>

Параметр BGCOLOR

Описание
Устанавливает цвет фона ячейки.

Синтаксис
<th bgcolor=цвет>...</th>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

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

Аналог CSS
background-color

Пример 3. Цвет фона ячейки

<html>
<body text=white>
<table bgcolor=black width=600>
<tr>
<th bgcolor=#ffcc00> ... </th>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр BORDERCOLOR

Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега TABLE.

Синтаксис
<th bordercolor=цвет>...</th>

Аргументы
См. параметр BGCOLOR.

Значение по умолчанию
Зависит от браузера и операционной системы.

Пример 4. Цвет границы вокруг ячейки

<html>
<body>
<table bordercolor=black border=1 width=100%>
<tr>
<th bordercolor=red> ... </th>
<td> ... </td>
</tr>
</table>
</body>
</html>

Параметр COLSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

ячейка 1
ячейка 2 ячейка 3

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

Синтаксис
<th colspan=число>...</th>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 5. Объединение ячеек по горизонтали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr bgcolor=#FBF0DB>
<th colspan=2>ячейка 1</th>
</tr>
<tr>
<th>ячейка 2</th>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>

Параметр HEIGHT

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

Синтаксис
<th height=значение>...</th>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.

Аналог CSS
height

Пример 6. Высота ячейки

<html>
<body>
<table cellpadding=10 bgcolor=#ffcc00 align=center width=100%>
<tr>
<th height=50> ... </th>
</tr>
</table>
</body>
</html>

Параметр NOWRAP

Описание
Добавление параметра nowrap к тегу TH заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Синтаксис
<th nowrap>...</th>

Аргументы
Нет.

Значение по умолчанию
По умолчанию параметр nowrap не установлен.

Пример 7. Запрет переносов в ячейке

<html>
<body>
<table width=400>
<tr>
<th nowrap> ... </th>
</tr>
</table>
</body>
</html>

Параметр ROWSPAN

Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.

ячейка 1 ячейка 2
ячейка 3

Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис.2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Синтаксис
<th rowspan=число>...</th>

Аргументы
Любое целое положительное число больше 2.

Значение по умолчанию
1

Пример 8. Объединение ячеек по вертикали

<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr>
<th rowspan=2 bgcolor=#FBF0DB>ячейка 1</th>
<th>ячейка 2</th>
</tr>
<tr>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>

Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис
<th valign=top | middle | bottom | baseline>...</th>

Аргументы
top — выравнивание по верхнему краю строки.
middle — выравнивание по середине.
bottom — выравнивание по нижнему краю.
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию
middle

Пример 9. Выравнивание содержимого ячеек

<html>
<body>
<table width=60%>
<tr bgcolor=#ffcc00 bordercolor=white>
<th valign=top> ... </th>
<th valign=bottom> ... </th>
</tr>
</table>
</body>
</html>

Параметр WIDTH

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

Синтаксис
<th width=ширина>...</th>

Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.

Аналог CSS
width

Пример 10. Ширина ячеек

<html>
<body>
<table cellpadding=10 border=1 bordercolor=red>
<tr>
<th width=20%> ... </th>
<th width=80%> ... </th>
</tr>
</table>
</body>
</html>

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

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

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

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

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

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

Четыре HTML-тега, о которых мы поговорим в этом видео, предназначены для разделения таблицы на части. То есть с их помощью мы сможем определить верхнюю часть таблицы, основную часть и нижнюю часть таблицы. Это теги <thead>, <th>, <tbody> и тег <tfoot>. C этими тегами все в принципе довольно понятно, однако тег <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.

Тег | 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>

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

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