2. Язык гипертекстовой разметки

• История развития HTML и CSS
• Общая структура HTML
• Структура HTML-документа
• Формирование текста
• Организация ссылок
• Списки
• Графика
• Таблицы
• Мультимедиа

2.8. Таблицы

HTML-таблицы необходимы в случаях, когда на веб-странице нужно отобразить данные, организованные в строки и столбцы. Таблицы могут понадобиться при создании, например, расписаний или статистики. Ячейки таблицы могут содержать любую информацию, включая числа, текстовые элементы, даже изображения и мультимедийные объекты.

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, т. к. была в основном предназначена для написания простого текста. С развитием Всемирной паутины стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Поддержка табличного представления данных изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.

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

Описание таблиц должно располагаться внутри раздела документа body. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тегом <table> и завершаться тегом </table>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тегом <tr> и завершается тегом </tr>. Отдельная ячейка в строке обрамляется парой тегов <td>…</td> или <th>…</th>. Тег <th> используется обычно для ячеек-заголовков таблицы, а <td> – для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и располагается по центру. Ячейки, определенные тегом <td> по умолчанию отображают данные, выровненные влево и посередине в вертикальном направлении.

Теги <td> и <th> не могут появляться вне описания строки таблицы <tr>. Завершающие коды </tr>, </td> и </th> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тег таблицы </table> является обязательным.

Количество строк в таблице определяется числом открывающих тегов <tr>, а количество столбцов – максимальным количеством <td> или <th> среди всех строк. Если в какой-либо строке количество ячеек задано меньшим, чем в остальных строках, то браузер должен дополнять строки пустыми ячейками.

Таблица может иметь заголовок, который заключается в пару тегов <caption>…</caption>. Элемент <caption> необязательный, однако если он все же используется, то должен располагаться сразу же после тега <table> и до первого <tr>. Тег заголовка таблицы имеет единственный допустимый параметр align, принимающий значения top (заголовок над таблицей) или bottom (заголовок под таблицей). Параметр align может быть опущен, что соответствует значению над таблицей. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру.

Тег <table> имеет рядом необязательных атрибутов, основными из которых являются:

• border – управляет изображением рамки таблицы;
• cellspacing – определяет расстояние между ячейками в пикселах;
• cellpadding – определяет расстояние между содержимым ячейки и ее границами в пикселах;
• width – определяет ширину таблицы в пикселах или в процентах от всего размера окна.

Атрибут border может иметь численное значение, которое определяет толщину рамки в пикселах. По умолчанию рамка не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы.

Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри раздела body.

Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью параметров colspan и rowspan, задаваемых в <td> или <th>. Форма записи: colspan="num", где num – числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение параметра rowspan аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали.

Невнимательное задание значений параметров раздвижки ячеек может привести к их взаимному перекрытию и конфликтам, при которых результат непредсказуем. Характерное применение протяженных ячеек – общий заголовок для нескольких смежных колонок или строк.

Листинг 6. Пример создания таблицы.

Показать результат листинга 6