Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Методические указания по языку HTML.doc
Скачиваний:
2
Добавлен:
01.04.2025
Размер:
462.34 Кб
Скачать

Практическое занятие №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.