
- •Практическое занятие №1 посвящено изучению структуры Web-документа
- •Практическое занятие №2 посвящено изучению структуры внутри документа
- •Практическое занятие №3 посвящено изучению и использованию списков
- •Практическое занятие №4 посвящено изучению и использованию тэгов ссылки и изображения
- •Практическое занятие №5 посвящено изучению и использованию таблиц
- •Заголовок таблицы расположен над таблицей
- •Практическое занятие №6 посвящено изучению и использованию кадров (фреймов)
- •Практическое занятие №7 посвящено изучению и использованию форм
- •Практическое занятие №8 посвящено изучению и использованию объектов
- •Практическое занятие №9 посвящено изучению и использованию бегущей строки
- •Практическое занятие №10 посвящено изучению и использованию скриптов
- •Практическое занятие №11 посвящено изучению и использованию стилей
- •Содержание
Практическое занятие №5 посвящено изучению и использованию таблиц
Таблицы дают возможность представлять данные в компактном виде, а также разбивать страницу на колонки, строки и ячейки, не отображая разделительных линий, и помещать на эти участки страницы тексты, изображения с различными стилями форматирования. Это одно из средств языка разметки HTML, которое даёт неограниченные возможности для создания оригинального дизайна страниц. Таблица строится по строкам. В строках содержатся ячейки, количество которых определяется количеством столбцов таблицы. В таблице 9 представлены тэги, а в таблице 10 атрибуты с их возможными значениями для построения таблиц.
Таблица 9. Тэги для построения таблиц.
Тэг |
Пояснение |
<TABLE> </TABLE > |
Тэг-контейнер, в котором размещается содержимое таблицы. |
<TR> </TR> |
Тэг-контейнер, в который помещаются ячейки с их содержимым. Количество ячеек равно, в общем случае, количеству столбцов. |
<TH> </TH> |
Тэг-контейнер, который используется для описания ячеек с заголовком столбцов (строк) таблицы. Заголовок столбцов таблицы будет располагаться в первой строке, а заголовок строк - в левом столбце. Текст отображается полужирным шрифтом по центру ячейки. |
<TD> </TD> |
Тэг-контейнер, который используется для описания содержимого ячеек таблицы. |
<CAPTION> </CAPTION> |
Тэг-контейнер, в котором размещается заголовок (название) таблицы. |
Таблица 10. Атрибуты для тэгов таблиц.
Атрибут и значение атрибута |
Пояснение |
Align=left | right | center |
Используется для выравнивания данных в ячейках. Может использоваться во всех тэгах кроме тэга CAPTION. Для тэга TH по умолчанию - значение center. |
Align=top | bottom |
Используется для тэга CAPTION. По умолчанию заголовок таблицы отображается над таблицей, но может быть указано размещение заголовка под таблицей. |
Valign=top | bottom | middle |
Регулирует положение данных относительно нижней и верхней границ ячейки. Может использоваться во всех тэгах кроме тэга CAPTION. |
Border=число |
Присутствие этого атрибута в тэге TABLE и/или TD указывает на прорисовку рамки таблицы и/или ячейки, а отсутствие – на не прорисовку рамки. Число указывает толщину линии для прорисовки рамки. Значение нуль указывает на отсутствие рамки. |
Rowspan=число |
Используется для объединения указанного числа смежных ячеек в столбце. Атрибут указывается в теге ячейки, первой (самой верхней) из объединяемых ячеек. |
Colspan=число |
Используется для объединения указанного числа смежных ячеек в строке. Атрибут указывается в теге ячейки, первой (самой левой) из объединяемых ячеек. |
Width=число Height=число |
Используются для указания размеров всей таблицы или отдельной ячейки: ширина и высота. Размер может быть задан в пикселях (абсолютное значение) или в процентах от ширины окна браузера (относительное значение). |
Cellpadding=число |
Задаёт свободное пространство между данными в ячейке и её границами. |
Cellspacing=число |
Задаёт свободное пространство между ячейками в таблице. |
Bordercolor=”цвет” |
Задаёт цвет (английское название) рамки таблицы (строки, ячейки). |
Bgcolor=”цвет” |
Задаёт цвет (английское название) фона таблицы (строки, ячейки). |
Frams=значение |
Определяет, какие стороны кадра, окружающего таблицу, будут прорисованы. Возможные значения: void – сторон нет; above – только верхняя часть; below – только нижняя часть; hsides - только верхняя и нижняя часть; vsides – только правая и левая часть; lhs - только левая часть; rhs - только правая часть; border –все четыре стороны. |
Rules=значение |
Определяет, какие границы будут отображаться между ячейками. Возможные значения: none – нет границ; groups – границы есть только между группами строк и столбцов; rows - границы есть только между строками; cols - границы есть только между столбцами; all - границы есть между строками и столбцами; |
Обратите внимание, какое большое количество атрибутов для задания форматирования таблицы. Поэтому примите за правило форматирование таблиц описывать с помощью стилевых таблиц.
Размер ячейки (ширина и высота) определяется её содержимым, поэтому, задавая его с помощью атрибутов width и height, следует указывать размер таким, чтобы он был больше или равен размеру размещаемого в ячейке текста или изображения. Задавая размер таблицы в процентах, можно избежать зависимости от типа браузера и искажения при отображении им таблицы на экране, но трудно избежать при этом искажения в ячейках.
Содержимое ячейки может быть задано пустым с помощью символа неразрывного пробела ( ) или просто, не помещая в ячейку никаких символов (<td></td>).
Пример построения таблицы 11, состоящей из заголовка, строки с названиями столбцов, четырёх строк и четырёх столбцов.
Таблица 11.