Лабораторная работа № 13

Тема: «HTML. Работа с таблицами»

1. Для размещения таблиц используют следующие тэги:

• <TABLE> </TABLE> – для указания самой таблицы. Все тэги, относящиеся к ней, должны быть между этими тегами;

• <TR> – для указания новой строки (закрывать не обязательно);

• <TD> – для указания новой ячейки (закрывать не обязательно);

• <TH> – для указания заголовка столбца (закрывать не обязательно).

2. Элемент TABLE может содержать следующие атрибуты:

• align – для выравнивания таблицы;

• width – ширина таблицы в пикселах, либо в процентах от ширины окна броузера;

• border – ширина рамки таблицы;

• cellspacing – расстояние между границами ячеек в пикселах;

• cellpadding – расстояние между границей ячейки и ее содержимым в пикселах;

Элемент TR:

• align – для выравнивания по горизонтали содержимого ячеек всей строки (left, center, right);

• valign – для выравнивания по вертикали содержимого ячеек всей строки (top, middle, bottom).

Элементы TD и TH:

• nowrap – запрет автоматического переноса слов;

• rowspan – определяет количество рядов, на которые простирается данная ячейка;

• colspan – определяет количество колонок, на которые простирается данная ячейка;

• align и valign – аналогично элементу TR;

• width и height – ширина и высота, отводимые под содержимое данной ячейки.

Пример использования:

<TABLE width=600 align=center border=1>

<TR><TH>№<TH>ФИО<TH>Группа<TH>Оценка

<TR><TD>1.<TD>Моисейчева О. А.<TD>КОМ-411<TD> 

<TR><TD>2.<TD>Панкова Л. К.<TD>КОМ-412<TD> 

<TR><TD>3.<TD>Зацепина Е. В.<TD>КОМ-410<TD> 

...

</TABLE>

3. П остройте таблицу, содержащую следующие колонки: №, Наименование товара, Производитель, Цена, Максимальная скидка. Заполните таблицу несколькими записями, содержащими три раздела: бытовая техника, офисная техника, мебель. Заголовок раздела должен быть по центру всей таблицы и жирным шрифтом. Должно получиться так:

4. Выделите шапку таблицы и название разделов фоновым цветом. Примените выравнивание к тем полям, к которым это необходимо.

5. Укажите название таблицы с помощью элемента CAPTION. Этот тэг должен обязательно закрываться, и располагается непосредственно после открывающего тэга <TABLE>. Рассмотрите применение атрибута align для выравнивания этого заголовка. Он может иметь 2 значения: top – над таблицей, bottom – под таблицей.

6. Сделайте подобное изображение в Photoshop’е и, разместив его на странице, сделайте переходы по ссылкам на мнимые разделы, нажимая на любую четверть шара (шар предварительно необходимо «разбить» на части). Шар должен быть по центру страницы. Диаметр шара можно взять равным 230 пикселов.

7. При необходимости изменить размер и/или цвет некоторого текста используют элемент FONT. Он имеет атрибуты:

• size – изменение размера шрифта:

• абсолютный размер (1, 2, …, 7);

• относительный (-6, -5, …, +5, +6) – уменьшение или увеличение шрифта, относительно базового;

• color – задает цвет текста, аналогичен атрибуту bgcolor.

Рассмотрите этот элемент.