Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.
Прежде всего, с помощью парного тега <caption> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <table> (листинг 5.7).
Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись тегами:
<caption><strong>Это таблица<strong></caption>
Обычно тег <caption> помещается сразу после открывающего тега <table> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее "шапку";
секцию тела, где находятся строки таблицы, составляющие основные данные;
секцию завершения со строками, формирующими "поддон" таблицы (обычно в "поддоне" располагают итоговые данные и различные примечания).
Секцию заголовка таблицы формирует тег <thead>
,
секцию тела — <tbody>,
секцию завершения — <tfoot>.
Все эти теги парные, помещаются непосредственно в тег <table> и содержат теги <tr>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).
Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web-странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением.
На заметку
Тег <table> поддерживает необязательный атрибут summary, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, напри-мер, Web-обозревателями для слабовидящих, зачитывающими содержимое Web-страниц. Так или иначе, примечание к таблицам практически никогда не задается.
Цветные таблицы
Чтобы проверить свои знания, давайте рассмотрим пару вариантов цветных таблиц. До этого времени мы создавали банальные таблицы, без заливки и практически без рамок. Приведенные ниже примеры больших и малених таблиц, помогут вам окончательно закрепить свои знания.
В листинге 5.9 представлен более упращенный вариант HTML-кода, который создает эту таблицу.
Как мы видим в обозревателе, таблица у нас состоит из цветного заголовка и двух сторок. Для начало это не плохо. Но потом все равно придется учится создавать более сложные таблицы. Так давайте научимся создавать их сейчас. Тем более, что с такой разноцветной таблицей, страничке выглядит куда более привлекательно, чем с однотонной!
С помощью тега <bgcolor> мы можем задавать любой цвет ячейки, а применив тег <bordercolor> мы зададим цвет рамки нашей таблицы. Итак приступим. В листинге 5.10 как раз такой более подходящий для учебы пример.
Как показано в таблице, надписи в строчках выравнены в разные стороны. Если отредактировать немного таблицу, т.е изменить атрибуты left, right, на center, то весь текст в таблице будет выравнет одинакого.
В листинге 5.11 мы рассмотрим миниатюрный вариант разноцветной таблицы. Где для каждой ячейки задан свой персональный цвет. По своему усмотрению их можно сделать другим цветом или задать для всех ячеек один и тот-же цвет.
Смотриться очень красиво. Но не стоит увлекаться интенсивностью на странице. Она мешает сосредоточить внимание, а так-же отвлекает во время чтения. Поэтому на Web-страничке лучше всего размещать более спокойные оттенки.
Последние, что я вам сейчас расскажу, это оформление рамки. Используя уже давно знакомые нам теги, мы внутрь парного тега <td> поместистим любой текст. Запятые указывать не нужно, когда будете задавать параметры цветов.
Листинг 5.12
<table style="border-width: 10; width: 250; border-color: red green blue yellow; border-style: ridge">
<tbody><tr>
<td>Моя первыя цветная рамка</td>
</tr>
</tbody>
</table>
