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

⇐ Предыдущая 25 262728 29 30 31 32 Следующая ⇒

Знакомимся с тегами: <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" "http://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.. но это всё материал из другого учебника: (http://www.webremeslo.ru/css/glava0.html), поэтому здесь мы говорить об этом не будем.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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.

⇐ Предыдущая 25 262728 29 30 31 32 Следующая ⇒

Поделиться с друзьями:

Дата добавления: 2014-10-31; Просмотров: 286; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2025) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.008 сек.