Лабораторная работа 6.6. Создание таблиц
Оценка 4.6

Лабораторная работа 6.6. Создание таблиц

Оценка 4.6
doc
13.05.2020
Лабораторная работа 6.6. Создание таблиц
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 Создать таблицу «Досье» с полями ФИО, Фото, Место рождения, Семья, Возраст. Место рождения задавать гиперссылкой на страницу с иллюстрацией места, Фото – рисунком, поле Семья – таблицей из двух полей Супруг и Дети. Использовать цветовое оформление заголовков и рамок.


Лабораторная работа 6.6. Создание таблиц

Лабораторная работа 6.6. Создание таблиц

TH> Фамилия </TH><TH COLSPAN=2

TH> Фамилия </TH><TH COLSPAN=2

VOID – нет внешних рамок.

VOID – нет внешних рамок.
Скачать файл