Название таблицы и её описание

⇐ ПредыдущаяСтр 6 из 6

Тег < caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после < table>

< table>
< caption> Название таблицы< /caption>
< tr>
< td> ячейка< /td>
< /tr>
< /table>

Вот пример:

<! 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>
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< 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>
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /table>
< /body>
< /html>

К тегу < caption> может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottom таблицы.

Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:

< caption align=" left" > Текст< /caption>

- для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.

Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега < table>

Вот так:

< table summary=" описание таблицы" >

Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.

Пример:

<! 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" summary=" Энергетическая ценность продуктов питания" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< 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>
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /table>
< /body>
< /html>

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

Знакомимся с тегами: < 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.

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

Группировать можно не только строки, но и столбцы таблицы с помощью тегов < col> и/или < colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:

· width - Ширина столбца в процентах или пикселях.

· align - Выравнивает текст в ячейке:

o left - по левому краю.

o right - по правому краю.

o center - по центру.

o justify - по левому и правому краю.

· valign - Выравнивает текст в ячейке по вертикали:

o top - по верхнему краю.

o middle - по центру.

o bottom - по нижнему краю.

o baseline - по базовой линии.

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

· span - Количество столбцов, к которым следует применять параметры.

Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега < table> следует написать, что-то типа:

< col width=" 140" bgcolor=" #deb887" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >

Для каждой колонки свой тег < col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег - группирует вторую колонку и далее по порядку..

Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=" 100" bgcolor=" #faebd7" так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:

< col width=" 140" bgcolor=" #deb887" >
< col span=" 3" width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >

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

Ну а вот собственно рабочий пример наших стараний:

<! 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 width=" 500" border=" 1" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< col width=" 140" bgcolor=" #deb887" >
< col span=" 3" width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >
< thead title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody align=" left" 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" title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

Тег < colgroup> практически идентичен тегу < col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:

< colgroup width=" 140" bgcolor=" #deb887" >
< colgroup span=" 3" width=" 100" bgcolor=" #faebd7" >
< colgroup width=" 60" bgcolor=" #f5f5dc" >

Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, < colgroup> может служить емкостью тля тегов < col>, конструкция такая:

< colgroup>
< col>
< /colgroup>

Во-вторых, если бы мы к тегу < table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании < colgroup>.

Больше никакой разницы между этими тегами нет.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> colgroup< /title>
< /head>
< body>
< table border=" 1" >
< colgroup bgcolor=" #deb887" align=" left" >
< col span=" 3" width=" 20" >
< /colgroup>
< colgroup bgcolor=" #faebd7" align=" center" >
< col span=" 2" width=" 40" >
< col width=" 60" >
< /colgroup>
< colgroup bgcolor=" #f5f5dc" align=" right" >
< col width=" 20" >
< col width=" 30" >
< col width=" 50" >
< /colgroup>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< /table>
< /body>
< /html>

Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью < colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов < col>, которые находятся внутри контейнеров < colgroup>.

Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.

Границы таблицы.

Ранее в главе 4 " Таблицы" мы с Вами познакомились с атрибутами border - ширина границы и bordercolor - цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.

Начнём с атрибута frame - рамка, данный атрибут применяется к тегу < table> и указывает на то, как следует отображать внешние границы таблицы, т.е. то есть вокруг самой таблицы, а не между её отдельными ячейками

Атрибут frame может принимать следующие значения:

· void - не отображать границы вокруг таблицы.

· border - отображать границы вокруг таблицы (по умолчанию).

· hsides - отображать только горизонтальные границы сверху и снизу.

· vsides - отображать только вертикальные границы слева и справа.

· above - отображать только верхнюю границу таблицы.

· below - отображать только нижнюю границу таблицы.

· lhs - отображать только левую границу.

· rhs - отображать только правую границу.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> frame< /title>
< /head>
< body>
< table border=" 8" frame=" hsides" 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>

А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.

Атрибут rules может принимать следующие значения:

· all - отображать все границы между ячейками.

· none - не отображать границы между ячейками.

· rows - отображать границы только между строками.

· cols - отображать границы только между стобцами.

· groups - отображать границы только между группами строк и группами столбцов образованными с помощью тегов: < thead>, < tbody>, < tfoot> и < colgroup>.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> rules< /title>
< /head>
< body>
< table border=" 1" rules=" groups" width=" 500" 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>

Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.

Полезные советы:

· Тег < col> помимо своей прямой задачи, решает еще одну полезную штуку..
При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега < col>, браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают " плясать" во время загрузки.

· По наблюдениям, на тег < th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший " вес", в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу.

· Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
- Веб-мастерам, для более простого управления таблицей через стили или скрипты.
- Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
- Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.

Так что не стоит пренебрегать тегами: < thead>, < tbody>, < tfoot>, < th>, < col>, < caption>, < colgroup> - они весьма полезны!

Глава 13

Фоновая музыка.

⇐ Предыдущая 1 2 3 4 56