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

ВИДЕОКУРС HTML. УРОК 46.

Рубрикатор статьи

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

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

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

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

HTML-тег <thead>.

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

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

<table border="1">
<caption>Заголовок таблицы</caption>
<thead>
<tr><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
</thead>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

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

HTML-тег <th>.

Тег <th> выполняет абсолютно ту же роль, что и тег <td>. То есть является обыкновенной ячейкой. Однако он предназначен для выделения жирным начертанием текста внутри такой ячейки. То есть если мы посмотрим на работу тега <td>. Мы увидим, что тег просто создает ячейку с текстом внутри и все на этом. А HTML-тег <th> создает ячейку и выделяет текст внутри этой ячейки жирным начертанием. Это очень удобно для выделения самых значимых ячеек внутри таблицы.

Также стоит отметить, что если мы используем тег <thead>, мы не обязаны использовать тег <th>. Мы также можем воспользоваться и тегом <td>.

Пример исходного кода с использованием тега <th>:

<table border="1">
<caption>Заголовок таблицы</caption>
<thead>
<tr><th>Ячейка 1-1</th><th>Ячейка 1-2</th><th>Ячейка 1-3</th></tr>
</thead>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Здесь я думаю все понятно. А вот про следующий HTML-тег следует всегда помнить.

HTML-тег <tbody>.

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

Что касается примера. То здесь все просто. Сначала мы прописываем тег <thead>, так как он отвечает за верхнюю часть таблицы, а затем прописываем тег <tbody>:

<table border="1">
<caption>Заголовок таблицы</caption>
<thead>
<tr><th>Ячейка 1-1</th><th>Ячейка 1-2</th><th>Ячейка 1-3</th></tr>
</thead>
<tbody>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</tbody>
</table>

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

HTML-тег <tfoot>.

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

Ну и пример HTML-тега <tfoot>:

<table border="1">
<caption>Заголовок таблицы</caption>
<thead>
<tr><th>Ячейка 1-1</th><th>Ячейка 1-2</th><th>Ячейка 1-3</th></tr>
</thead>
<tfoot>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</tfoot>
<tbody>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
</tbody>
</table>

Обратите внимание на порядок строк в исходном коде. И на то, что в итоге выведет веб-браузер на экран.

Видео урок: HTML-теги <thead>, <th>, <tbody> и <tfoot>. Разделение таблицы.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео уроке мы познакомимся с еще двумя тегами colgroup и col. И подведем итоги раздела, посвященного таблицам в HTML.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 4.0/10 (1 голос)
Автор: Михаил Веб Дата публикации: 24.06.2014