Группировка строк.

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

Так:

· Тег < thead> - (От Англ. table head - " голова" таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым " шапку" таблицы.

· Тег < tbody> - (От Англ. table body - " тело" таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.

· Тег < tfoot> - (От Англ. table footer - нижний колонтитул таблицы) Определяет " подвал" таблицы, состоящий из одной или нескольких нижних строк.

Следует отметить несколько правил использования данных тегов:

Данные теги могут быть расположены только внутри таблицы - контейнера < table>.

Теги < thead> и < tfoot> допускается использовать только один раз для одной таблицы, на тег < tbody> данное правило не распространяется.

Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так:

< table>
< thead>
< tr>
< td> голова< /td>
< /tr>
< /thead>
< tbody>
< tr>
< td> тело< /td>
< /tr>
< /tbody>
< tfoot>
< tr>
< td> подвал< /td>
< /tr>
< /tfoot>
< /table>

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

К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.

Просто ради информации.. есть ещё атрибуты:

· char - Выравнивание относительно заданного символа.

· charoff - Смещение относительно указанного символа.

Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока.

Так зачем спросите Вы вообще нужны теги группирования строк если с помощью них практически ничего не сделать? Отвечу чуть ниже, а пока смотрим пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Группировка строк< /title>
< /head>
< body>
< table border=" 1" width=" 400" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< thead bgcolor =" #deb887" title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody align=" left" bgcolor =" #faebd7" title=" Энергетическая ценность продуктов питания" >
< tr>
< th> Хлеб ржаной< /th> < td> 4, 7< /td> < td> 0, 7< /td> < td> 49, 8< /td> < td> 214< /td>
< /tr>
< tr>
< th> Молоко< /th> < td> 2, 8< /td> < td> 3, 2< /td> < td> 4, 7< /td> < td> 58< /td>
< /tr>
< tr>
< th> Картофель< /th> < td> 2< /td> < td> 0, 1< /td> < td> 19, 7< /td> < td> 83< /td>
< /tr>
< tr>
< th> Свинина< /th> < td> 11, 4< /td> < td> 49, 3< /td> < td> 9< /td> < td> 489< /td>
< /tr>
< /tbody>
< tfoot align=" left" bgcolor =" #f5f5dc" title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

Теперь отвечу, зачем вообще нужны < thead>, < tbody> и < tfoot>..

Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS..

Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style, с помощью которого можно сделать практически все, что касается дизайна того или иного элемента.. А еще есть не менее замечательный тег < style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника: (https://www.webremeslo.ru/css/glava0.html), поэтому здесь мы говорить об этом не будем.

Просто покажу пока что малопонятный для Вас пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Группировка строк и CSS< /title>
< style type=" text/css" >
table {width: 600px; margin: 30px; border: #b8860b 6px ridge; border-collapse: collapse; }
td, th, tr {border: #b8860b 2px outset; padding: 3px; }
caption{font: italic bold 16px Arial; padding: 10px; }
thead {background-color: #deb887; text-align: center; }
tbody {background-color: #faebd7; text-align: left; }
tfoot {background-color: #f5f5dc; text-align: left; font: italic 14px Arial; }
tr: hover {background-color: #b8860b; color: #ffffff; }
< /style>
< /head>
< body>
< table>
< caption> Энергетическая ценность продуктов питания: < /caption>
< thead title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody title=" Энергетическая ценность продуктов питания" >
< tr>
< th> Хлеб ржаной< /th> < td> 4, 7< /td> < td> 0, 7< /td> < td> 49, 8< /td> < td> 214< /td>
< /tr>
< tr>
< th> Молоко< /th> < td> 2, 8< /td> < td> 3, 2< /td> < td> 4, 7< /td> < td> 58< /td>
< /tr>
< tr>
< th> Картофель< /th> < td> 2< /td> < td> 0, 1< /td> < td> 19, 7< /td> < td> 83< /td>
< /tr>
< tr>
< th> Свинина< /th> < td> 11, 4< /td> < td> 49, 3< /td> < td> 9< /td> < td> 489< /td>
< /tr>
< /tbody>
< tfoot title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS.