SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Таблицы

В этой главе:

  1. Элемент TABLE - таблица HTML
  2. Заголовок таблицы – элемент CAPTION
  3. Элементы THEAD, TFOOT и TBODY
  4. Колонки – элементы COL и COLGROUP
  5. Строки таблицы – элемент TR
  6. Ячейки таблиц – элементы 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х2 с рамкой

Рис. 2.14. Таблица 2х2 с рамкой

Помимо BORDER, для элемента TABLE предусмотрено множество иных атрибутов, отвечающих за размеры таблицы, ее выравнивание и оформление. Все они, включая некоторые фирменные расширения, приведены в таблице2.24.

Таблица 2.24 Атрибуты элемента TABLE
АтрибутПримечаниеОписание
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.

Таблица 2.25. Допустимые значения атрибутов FRAME и RULES
Элемент/значениеОписание
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 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru