Глава 12

И снова таблицы..

Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и "неповоротливой".. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!

Ладно, вернёмся к таблицам..

В качестве "полигона" для изучения нового материала возьмём вот такую жутко скучную таблицу:

Ну что ж, давайте поколдуем над ней..

Заголовки таблиц.

Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>.

Например, вот так:

Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.

Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:

К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:

• width - Ширина ячейки в процентах или пикселях.
• height - Высота ячейки в процентах или пикселях.
• align - Выравнивает текст в ячейке:
  • left - по левому краю.
  • right - по правому краю.
  • center - по центру.
  • justify - по левому и правому краю.
• valign - Выравнивает текст в ячейке по вертикали:
  • top - по верхнему краю.
  • middle - по центру.
  • bottom - по нижнему краю.
  • baseline - по базовой линии.
• colspan - количество столбцов занимаемое ячейкой.
• rowspan - количество рядов занимаемое ячейкой.
• bgcolor - Цвет фона ячейки.
• background - Задает фоновый рисунок в ячейке.
• bordercolor - Цвет бордюра.
• title - Всплывающая подсказка
• nowrap - Запрещает перенос строк в ячейке.

Думаю понятно, а посему идем дальше..

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

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

Вот пример:

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

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

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

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

Вот так:

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

Пример:

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

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

Так:

• Тег <thead> - (От Англ. table head - "голова" таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым "шапку" таблицы.
• Тег <tbody> - (От Англ. table body - "тело" таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.
• Тег <tfoot> - (От Англ. table footer - нижний колонтитул таблицы) Определяет "подвал" таблицы, состоящий из одной или нескольких нижних строк.

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

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

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

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

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

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

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

• char - Выравнивание относительно заданного символа.
• charoff - Смещение относительно указанного символа.

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

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

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

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

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

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

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

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

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

• width - Ширина столбца в процентах или пикселях.
• align - Выравнивает текст в ячейке:
  • left - по левому краю.
  • right - по правому краю.
  • center - по центру.
  • justify - по левому и правому краю.
• valign - Выравнивает текст в ячейке по вертикали:
  • top - по верхнему краю.
  • middle - по центру.
  • bottom - по нижнему краю.
  • baseline - по базовой линии.
• bgcolor - Цвет фона ячейки.
• span - Количество столбцов, к которым следует применять параметры.

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

• void - не отображать границы вокруг таблицы.
• border - отображать границы вокруг таблицы (по умолчанию).
• hsides - отображать только горизонтальные границы сверху и снизу.
• vsides - отображать только вертикальные границы слева и справа.
• above - отображать только верхнюю границу таблицы.
• below - отображать только нижнюю границу таблицы.
• lhs - отображать только левую границу.
• rhs - отображать только правую границу.

Пример:

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

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

• all - отображать все границы между ячейками.
• none - не отображать границы между ячейками.
• rows - отображать границы только между строками.
• cols - отображать границы только между стобцами.
• groups - отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup>.

Пример:

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

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

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

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

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

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