Поделиться
195. Лабораторная работа 6.6. Создание таблиц.doc
Лабораторная работа 6.6. Создание таблиц
Таблицы в HTML-документе используются как по прямому назначению, так и в качестве средства форматирования текста, поскольку разграничительные линии можно не выводить на экран. Клетка (ячейка) таблицы может содержать текст, графику, другую таблицу. Описание таблицы помещается в область, обозначенную парным тегом <TABLE>. Если необходимы рамки (видимые границы) таблицы, то в этот тег следует поместить атрибут BORDER, значение которого (число) определяет ширину рамки, например <TABLE BORDER=10>. Этот атрибут можно указывать и без значения, тогда используется рамка со стандартными параметрами по умолчанию.
В оформлении таблицы участвуют теги, обрамляющие заголовок всей таблицы, заголовки столбцов и ячейки с данными.
Для заголовка (названия) таблицы используется парный тег <CAPTION> с атрибутом выравнивания ALIGN. Значения атрибута – TOP (название вверху таблицы) или BOTTOM (внизу таблицы).
Каждая строка таблицы, включая заголовки столбцов, обрамляется парным тегом <TR>.
Каждая ячейка, содержащая заголовок столбца, обрамляется парным тегом <TH>.
Каждая ячейка таблицы, содержащая данные, обрамляется парным тегом <TD>.
Несколько ячеек таблицы могут быть объединены в одну как по горизонтали, так и по вертикали. Для этого в тегах <TH> и <TD> используются атрибуты COLSPAN (объединение по столбцам – по горизонтали) и ROWSPAN (объединение по строкам – по вертикали). Значение этих атрибутов – число объединяемых столбцов или строк.
Шириной таблицы и каждой ее ячейки можно управлять с помощью атрибута WIDTH, задаваемого в пикселях или процентах от ширины окна. Атрибут размещается в теге <TABLE> (размер всей таблицы) или в тегах <TH>, <TD> (размер ячейки).
1 Создайте в Блокноте следующий файл и сохраните под именем mytable.htm.
<HTML> <HEAD> <TITLE> Создание таблиц </TITLE> </HEAD>
<BODY>
<H2> Моя первая таблица </H2>
<P>Это пример таблицы с объединенными ячейками и заданными размерами
<P>
<TABLE BORDER WIDTH=400>
<CAPTION ALIGN=TOP> Список студентов </CAPTION>
<TR>
<TH> Фамилия </TH><TH COLSPAN=2 WIDTH=45%> Группа и ВУЗ</TH>
<TH> Успеваемость </TH>
</TR>
<TR><TD>Иванов</TD><TD>Пи-412</TD><TD>РГСУ</TD><TD>4,5</TD>
</TR>
<TR><TD>Петров</TD><TD>Пи-313</TD><TD>РГСУ</TD><TD>3,8 </TD>
</TR>
<TR><TD>Сидоров</TD><TD>ПМ-11</TD><TD>РГУ</TD><TD>4,7 </TD>
</TR>
<TR> <TD> Плюшкина </TD> <TD> А-519 </TD> <TD> ДГТУ </TD>
<TD ROWSPAN=2> 3,25 </TD>
</TR>
<TR><TD>Собакевич </TD> <TD> РЭ-217 </TD><TD> ТРТУ </TD> </TR>
</TABLE>
</BODY></HTML>
Обратите внимание, что при вертикальном объединении значение объединенной ячейки указывается только в первой из объединяемых строк (здесь – значение успеваемости 3,25), в последующих строках объединения описание этой ячейки пропускается.
Дизайн таблиц: для улучшения вида таблицы можно воспользоваться атрибутами табличных тегов, задающих тип рамок, выравнивание значений полей, цветовое оформление.
Горизонтальное и вертикальное выравнивание задается атрибутом ALIGN, значения которого: LEFT (по левому краю), RIGHT (по правому краю), CENTER (по центру). Этот атрибут можно разместить в теге <TR> (выравнивание всей строки), в тегах <TH> и <TD> (выравнивание в отдельных ячейках). Например, чтобы выровнять по центру значения успеваемости в нашей таблице, нужно в каждый тег <TD>, обрамляющий баллы, поместить этот атрибут, например, для первой строки: <TD ALIGN=CENTER> 4,5 </TD>.
Тип (способ изображения) рамок задается атрибутами FRAME (внешние рамки) и RULES (внутренние рамки между столбцами или строками) в теге <TABLE>.
Возможные значения атрибута FRAME:
- BOX – вся рамка;
- ABOVE – только верхняя часть рамки;
- BELOW – только нижняя часть рамки;
- HSIDES – рамка сверху и снизу (горизонтальная часть);
- VSIDES – рамка слева и справа (вертикальная часть);
- LHS – только левая часть рамки;
- RHS – только правая часть рамки;
- VOID – нет внешних рамок.
Возможные значения атрибута RULES:
- ALL – все вертикальные и горизонтальные линии;
- ROWS – только горизонтальные линии между строками;
- COLS – только вертикальные линии между столбцами;
- NONE – нет внутренних линий.
Например, замените тег <TABLE> в таблице mytable.htm следующим:
<TABLE BORDER=15 FRAME=BOX RULES=COLS WIDTH=400>, запустите Explorer и посмотрите, как изменился вид таблицы. Замените значения атрибутов RULES и FRAME.
Цветовое оформление таблиц задается атрибутом BGCOLOR в тегах <TABLE> (цвет всей таблицы), <TR> (цвет строки), <TD> (цвет ячейки – заливка). Например, чтобы в нашей таблице цвет заголовков был розовым, нужно тег <TR>, стоящий перед тегом <TH>, заменить на <TR BGCOLOR =”PINK”>, а чтобы ячейка с фамилией «Петров» была желтой, тег <TD> перед текстом Петров заменить на <TD BGCOLOR =”YELLOW”>.
Цвет рамок в таблице можно задать с помощью атрибутов BORDERCOLOR (цвет всей рамки), BORDERCOLORLIGHT (цвет светлой части рамки), BORDERCOLORDARK (цвет темной части) тега <TABLE>, в котором должен присутствовать также атрибут BORDER.
Например, замените тег <TABLE …> таблицы тегом <TABLE BORDER=15 BORDERCOLOR="GREEN" BORDERCOLORLIGHT="LIME" FRAME=BOX WIDTH=400>.
Цвет и тип шрифта в ячейках таблицы задается, как обычно, в тегах заголовков <H…>, форматирования шрифтов <FONT …>, управления наклоном <I> или жирностью шрифта <B>. Эти теги тогда нужно размещать внутри области действия тегов <TD>.
Например, часть документа <TD> Собакевич </TD> замените на
<TD> <FONT COLOR="RED"> <B>Собакевич </B></FONT></TD>.
Для вставки в ячейку гиперссылки, рисунка, другой таблицы нужно соответствующие теги <A…>, <IMG…>, <TABLE…> также размещать внутри области действия тегов <TD>.
2 Создать таблицу «Досье» с полями ФИО, Фото, Место рождения, Семья, Возраст. Место рождения задавать гиперссылкой на страницу с иллюстрацией места, Фото – рисунком, поле Семья – таблицей из двух полей Супруг и Дети. Использовать цветовое оформление заголовков и рамок.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
