Таблицы
В этой главе:
- Элемент TABLE - таблица HTML
- Заголовок таблицы – элемент CAPTION
- Элементы THEAD, TFOOT и TBODY
- Колонки – элементы COL и COLGROUP
- Строки таблицы – элемент TR
- Ячейки таблиц – элементы TH и TD
Впервые таблицы появились в одной из первых версий HTML – HTML+. До этого группировка текста по графам и столбцам была возможна только при помощи элемента PRE. В настоящее время таблицы поддерживаются всеми браузерами, и интенсивно используются не только для предоставления различных отчетов и прочих упорядоченных данных, но и для макетирования страниц. Впрочем, последнее применение таблиц как раз не приветствуется в HTML 4 (а тем более – в XHTML), поскольку для оформления следует использовать все-таки таблицы стилей, которые подходят для этих целей намного лучше. В то же время в том же HTML 4 появилось множество новых средств для работы с таблицами. Так, строки таблиц теперь можно группировать в части заголовка, окончания и тела таблицы при помощи элементов THEAD, TFOOT и TBODY. Кроме того, появились элементы, которые позволяют логически связывать между собой еще и колонки – это COL и COLGROUP.
Ячейки таблиц подразделяются на ячейки-заголовки (TH), и ячейки с данными (TD). По своим атрибутам они полностью идентичны, единственное отличие заключается в том, что многие браузеры по умолчанию отображают содержимое ячеек-заголовков жирным шрифтом с выравниванием по центру. Ну а сами ячейки должны быть вложены в строки таблицы, определяемые элементом TR.
Элемент TABLE
Для создания таблицы используют элемент TABLE, который является контейнером, определяющим таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. В простейшем случае таблица может быть определена так, как показано на листинге 2.25.
Листинг 2.25. Простейшая таблица
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Простейшая таблица</title>
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
</tr>
</table>
</body>
</html>
Это простая таблица, состоящая из единственной ячейки. Число строк определяется количеством элементов TR, а столбцов – количеством TD в строках. Поскольку от таблицы размером в одну ячейку проку мало, усложним ее, добавив еще одну ячейку. Для этого надо вложить в TR еще один элемент TD:
<tr>
<td>Ячейка 1 (левая)</td><td>Ячейка 2 (правая)</td>
</tr>
В результате получим таблицу, состоящую из двух ячеек, расположенных в строку. Чтобы добавить ячейку в новую строку, следует сначала определить еще одну строку (при помощи TR), а уже в нее вложить ячейку:
<tr>
<td>Ячейка 1 (верхняя)</td>
</tr>
<tr>
<td>Ячейка 2 (нижняя)</td>
</tr>
Остается объединить эти два расширения, чтобы получить таблицу размером 2х2 ячейки, как показано на листинге 2.26.
Листинг 2.26. Таблица 2 на 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Простая таблица 2х2</title>
</head>
<body>
<table border="2">
<tr>
<td>Ячейка 1-го столбца, 1-й ряд</td><td>Ячейка 2-го столбца, 1-й ряд</td>
</tr>
<tr>
<td>Ячейка 1-го столбца, 2-й ряд</td><td>Ячейка 2-го столбца, 2-й ряд</td>
</tr>
</table>
</body>
</html>
Обратите внимание на атрибут BORDER – благодаря нему, если открыть такой документ в браузере, как сама таблица, так и все ее ячейки будут очерчены рамкой (рис. 2.14).
Рис. 2.14. Таблица 2х2 с рамкой
Помимо BORDER, для элемента TABLE предусмотрено множество иных атрибутов, отвечающих за размеры таблицы, ее выравнивание и оформление. Все они, включая некоторые фирменные расширения, приведены в таблице2.24.
Атрибут | Примечание | Описание |
---|---|---|
id, class | Общие | Идентификаторы элемента |
lang, dir | Общие | Информация о языке и направление текста |
title, style | Общие | Определяют заголовок и стиль элемента |
summary | Не поддерживается графическими браузерами | Содержит текст, описывающий структуру таблицы. Может быть использован специализированными программами доступа к Интернету, например, синтезатором речи |
align | Устаревший | Определяет выравнивание таблицы на странице. Может принимать значения left, right и center (по умолчанию принято left) |
width | Устаревший | Определяет ширину таблицы в пикселях или в процентах по отношению к ширине окружающего блока |
height | Нестандартный Netscape, MSIE, Opera | Определяет минимальную высоту таблицы в пикселях |
border | - | Определяет толщину рамки таблицы |
frame | Кроме Netscape 4 и Opera до 7.1 | Указывает, какие стороны таблицы должны иметь рамку. Может принимать следующие значения: void, above, below, hsides, vsizes, lhs, rhs, box или border |
rules | Кроме Netscape 4 и Opera до 7.1 | Указывает, какие стороны ячеек таблицы должны иметь рамку. Допустимые значения: none, groups, rows, cols, all |
cols | Нестандартный Netscape | Определяет количество столбцов в таблице. Если указан этот атрибут, то ширина всех столбцов будет равной |
bordercolor | Нестандартный Netscape, MSIE | Определяет цвет рамки |
bordercolordark, bordercolorlight | Нестандартные, MSIE | Определяют цвет затененной и светлой частей рамки соответственно. Эта пара атрибутов может быть использована вместо bordercolor |
cellspacing | - | Определяют расстояние между соседними ячейками таблицы |
cellpadding | - | Определяют отступ между внутренней границей ячейки и ее содержимым |
bgcolor | Устаревший | Определяет цвет ячеек таблицы |
background | Нестандартный Netscape, MSIE | Определяет URI фонового рисунка таблицы |
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
В продолжение темы рамок рассмотрим подробнее атрибуты FRAME и RULES. Первый отвечает за наличие рамок с той или иной стороны таблицы, а второй – за рамки между ячейками. Все их возможные значения вместе с описанием того, что они означают, мы соберем в таблице 2.25.
Элемент/значение | Описание |
---|---|
frame/void | Не рисовать рамку вокруг таблицы (принято по умолчанию) |
frame/above | Нарисовать рамку только по верхнему краю таблицы |
frame/below | Нарисовать рамку только по нижнему краю таблицы |
frame/hsides | Нарисовать рамку по верхнему и нижнему краям таблицы |
frame/vsides | Нарисовать рамку по левому и правому краям таблицы |
frame/lhs | Нарисовать рамку только по левому краю таблицы |
frame/rhs | Нарисовать рамку только по правому краю таблицы |
frame/box, border | Нарисовать рамку по всем сторонам таблицы |
rules/none | Не рисовать рамку между ячейками (принято по умолчанию) |
rules/groups | Рисовать рамку только вокруг групп ячеек, определенных при помощи элементов THEAD, TBODY, TFOOT, COL и COLGROUP |
rules/rows | Рисовать рамку только между строками таблицы |
rules/cols | Рисовать рамку только между столбцами таблицы |
rules/all | Рисовать рамку между всеми ячейками таблицы |
Вернемся к таблице, определенной в листинге 2.26. Например, если требуется создать «разлинованную» по строкам таблицу, то к элементу TABLE следует дописать атрибуты FRAME и RULES со значениями hsides и rows соответственно:
<table border="2" frame="hsides" rules="rows">
Подобным образом можно определять наличие рамок с той или иной стороны таблицы и между теми или иными ячейками. Единственный вопрос может возникнуть применительно к значению GROUPS атрибута RULES, однако мы к нему еще вернемся при рассмотрении группирующих элементов. Что касается цветов рамок, то их отсутствие в спецификациях HTML не должно быт поводом для расстройства: цвет рамки можно задать и при помощи CSS, например:
<table style="border: dashed 3px red">
Различные виды табличных рамок, оформленных тем или иным способом, можно посмотреть на рис. 2.15, а чтобы узнать, как они сделаны, обратившись к файлу Part_2\Tables\borders.html.
Рис. 2.15. Таблицы с разными рамками
Если еще раз посмотреть на уже приведенные примеры таблиц (а вернее, на их построение в б
2011-06-02 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !