9. Таблицы

Содержание

Минимальная структура. Заголовок и колонтитулы

• Элемент caption

• Элементы thead, tbody и tfoot

Группы столбцов. Объединение столбцов и строк

• Элементы colgroup и col

• Атрибуты colspan и rowspan

Динамическое создание таблиц

Вопросы

Таблица, как правило, представляет собой довольно большой объём структурированной информации. В HTML-разметке объём ещё и увеличивается, поскольку каждая строка и каждая ячейка представляет собой HTML-элемент с открывающим и закрывающим тэгами. Вообще говоря, для создания HTML-таблиц желательно использовать WYSIWYG-редактор (либо генерировать таблицу программно). Во всяком случае, для того, чтобы уметь использовать все полезные возможности таблиц, следует ознакомиться со стилями, применимыми к таблице и составляющим её элементам. В этом заключается задача данной лекции.

Минимальная структура. Заголовок и колонтитулы

Структура минимальной таблицы показана на рис. 9.1. Диаграмму в этих обозначениях (использована нотация UML) следует понимать так: каждой таблице может принадлежать неограниченное количество строк (но как минимум одна). Каждой строке может принадлежать неограниченное количество ячеек (также не меньше одной). Ячейка может быть заголовочной - такую ячейку браузер выделяет полужирным начертанием. Внутри же ячейки (как обычной, так и заголовочной) может быть помещено всё то же, что и в документе - текст, изображения, формы и даже другие таблицы.

Закрашенный ромб на линии связи означает "композиция", или "безраздельная принадлежность", что позволяет отличать композитную структуру (которой является и таблица HTML) от набора взаимно-информированных сущностей.

Рис. 9.1.  Структура таблицы (минимальный вариант)

table {

border-style: inset;

border-width: 6px;

}

td {

padding: 2px;

border: solid 1px black;

}

...

<table>

<tr>

<td>Фамилия </td><td>Телефон </td>

</tr>

<tr>

<td>Иванов </td><td>9094567 </td>

</tr>

<tr>

<td>Петров </td><td>9045732 </td>

</tr>

</table>

Листинг 9.1. Таблица минимальной структуры (html, txt)

Рис. 9.2.  Таблица минимальной структуры

Упражнения.

Увеличьте толщину линий сетки и сделайте их двойными (double).

Увеличьте поля ячеек.

Добавьте столбец "Имя".

Как видно из примера, в отсутствие стилевых определений браузер отображает таблицу без границ между ячейками. Очевидно, свойство border, будучи применённым к ячейке таблицы (т.е. к элементу td), создаст эти границы, а свойство padding добавит внутреннее поле. Несколько менее очевиден смысл свойства border-collapse: оно может принимать два значения - separate (по умолчанию) и collapse. Если выбрано значение separate (или не указано ничего), то между ячейками добавляется пустое пространство (при помощи свойства margin этого эффекта добиться не удастся). Если выбрано collapse, то таблица принимает более привычный вид.

К ячейкам (td и th) применимо большинство обычных стилевых правил, включая цвет, фон, выравнивание текста и т.п. Для содержимого ячейки также представляет интерес его вертикальное выравнивание - для этого определено CSS-свойство vertical-align, принимающее ряд значений, включая middle (середина - по умолчанию), top (верх) и bottom (низ). Этому CSS-свойству эквивалентен HTML-атрибут valign.

Упражнения.

Уберите стилевое правило border-collapse.

Измените цвет фона ячеек.

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

В варианте примера с внешней границей попробуйте следующие значения свойства border-style: solid, none, groove, double, ridge, inset, outset.

Уберите css-объявление толщины границы ячейки. Почему границы стали толще?

Элемент caption

Как правило, у таблицы имеется заголовок, и этот элемент специально предназначен для описания заголовка таблицы. Обычно его размещают сразу после тэга <table>. Если к элементу caption применить атрибут align="bottom", то он отобразится под таблицей. Как и ячейка, заголовок не имеет ограничений на содержимое.

Упражнение. Добавьте заголовок к таблице в предыдущем примере. Установите для заголовка (создав правило CSS) полужирное начертание и отступ снизу.

Элементы thead, tbody и tfoot

Обычно одна или несколько строк вверху таблицы содержит заголовки столбцов, образуя верхний колонтитул таблицы. Отличие верхнего колонтитула от остальных строк таблицы заключается, во-первых, в том, что он может каким-либо образом выделяться. Во-вторых, при распечатке длинных таблиц колонтитул должен появляться на каждой странице. HTML 4 предоставляет элемент thead для разметки верхнего колонтитула таблицы, и, поскольку он имеет как физический смысл (влияет на внешний вид), так и логический (влияет на понимание, а также на невизуальные методы воспроизведения), то рекомендуется его всегда использовать.

Аналогичный, но менее важный элемент - tfoot - нижний колонтитул таблицы, т.е. группа строк в её нижней части.

Элемент tbody объединяет строки в группы - они могут быть отделены друг от друга линейками специальной толщины.

Где и в каком количестве могут содержаться эти элементы - показано на рис. 9.2:

Рис. 9.3.  Структура таблицы (при наличии в ней элементов thead и tbody)

table {

border-collapse: collapse;

}

thead {

font-weight: bold;

text-align: center;

background-color: #eee;

}

tbody {

border-bottom: solid 3px;

}

tfoot {

font-style: italic;

text-align: center;

background-color: #eee;

}

td {

border: solid 1px;

padding: 2px;

}

...

<table>

<thead>

<tr>

<td>Верхний </td><td>колонтитул </td>

</tr>

</thead>

<tbody>

<tr>

<td>Первый </td><td>tbody </td>

</tr>

...

</tbody>

<tbody>

<tr>

<td>Второй </td><td>tbody </td>

</tr>

...

</tbody>

<tfoot>

<tr>

<td>Нижний </td><td>колонтитул </td>

</tr>

</tfoot>

</table>

Листинг 9.2. Таблица с колонтитулами и разделами

Рис. 9.4.  Таблица с колонтитулами и разделами

Упражнение. Откройте пример в новом окне браузера и из меню Файл выберите команду Предварительный просмотр. Перейдите ко второй странице и убедитесь, что на ней повторяются оба колонтитула (это должно работать, по крайней мере, в браузерах Windows Explorer и Mozilla Firefox).