Установка табличных объектов.

На Web-странице можно разместить таблицы. Различают сложные и простые таблицы. В простых таблицах ячейки располагаются строго по строкам и столбцам. В сложных таблицах ячейки могут занимать несколько строк и/или несколько столбцов.

3.1.Для размещения простой таблицы на поле документа необходимо воспользоваться следующими конструкциями:

<TABLE> </TABLE> - тэг-контейнер создания таблицы,

BORDER=n - ширина рамки таблицы,

<TR> </TR> - тэг содержания строки таблицы (Table Row), закрывающий тэг можно опустить,

атрибуты тэга:

 ALIGN - горизонтальное расположение информации в ячейке, имеет следующие значения LEFT½RIGHT½CENTER - слева, справа, по центру,

VALIGN - вертикальное размещение информации в ячейке, имеет значения TOP½BOTTOM½MIDDLE - сверху, справа, по середине,

<TD> </TD> - тэг установки данных в ячейках таблицы (Table Data), закрывающий тэг можно опустить,

<TH> </TH> - выделенный текст в ячейках-заголовках таблицы (полужирный, по центру) (Table Header), закрывающий тэг можно опустить,

<CAPTION> </CAPTION> - заголовок таблицы, имеет атрибут TOP или BOTTOM - заголовок или подпись к таблице.

Выполнить следующие задания:

a) Сформировать простую таблицу "Учебная программа", показанную на рисунке,

b) Разместить на поле документа таблицу "Состояние фонда литературы", состоящую из четырех столбцов: Издания, Получено, Списано и трех строк: Монографии, Учебники, Справочники. В ячейки таблицы установить ориентировочные значения.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию таблицы.

Табличные тэги могут иметь атрибуты, определяющие оформление ячеек, среди них:

CELLSPACING = n - расстояние между ячейками в пикселях, по умолчанию n=2,

CELLPADDING = m - отступ между рамкой и данными в ячейке

WIDTH = k - принудительная (рекомендуемая) установка ширины таблицы. (или = k% - в процентах от размера окна),

HEIGHT = l - принудительная (рекомендуемая) установка высоты таблицы. (или = k% - в процентах от размера окна),

Выполнить следующие упражнения:

d) Повторить таблицу "Учебная программа", изменив расстояние между ячейками до 10 пк. и отступ между рамкой и данными до 5 пк. Проверить организацию таблицы.

e) Повторить таблицу "Учебная программа", используя размеры 50х50 пк. и 200х200 пк. Объяснить полученные реальные размеры таблицы.

f) Разместить таблицу "Состояние фонда литературы" на левой половине экрана, а на правой половине показать текст, объясняющий причины списания книг. Для этого следует использовать конструкцию: <TABLE BORDER=2 ALIGN=LEFT>. Текст писать после закрывающего тэга таблицы.

3.2. Для оформления таблицы можно использовать цвет, в этом случае применяю следующие параметры:

Параметр BGCOLOR -цвет фона таблицы или ячеек,

Параметр BORDERCOLOR -цвет разделяющих линий таблицы или ячеек,

Параметр BORDERCOLORLIGHT - перекрашивает правый и нижний края ячейки,

Параметр BORDERCOLORDARK - перекрашивает левый и верхний края ячейки,

Параметр BACKGROUND - устанавливает цветовой фон таблицы на базе рисунка.

a) Выделить шапку таблицы "Учебная программа" неярким цветом (например, #FFFF00),

b) Выделить вторую строку таблицы другим цветом (например, #F5F5F5 и изменить цвет разделительных линий.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию таблицы.

3.3.Использовать метод совмещения таблицы и текста для организации пояснений к отдельным фразам (рисункам) текста:

a) Записывая разметку новой таблицы сместить ее влево.

a) Организовать таблицу из одной ячейки (по центру, например "Экзамены и зачеты".

b) После табличного тэга организовать текст пояснения с помощью контейнера <BLOCKQUOTE>.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию таблицы.

3.4.Для формирования сложной таблицы следует использовать следующие параметры:

Параметр ROWSPAN=n - указывает число строк, которые занимает описываемая ячейка,

Параметр COLSPAN =m - определяет число столбцов, которые займет текущая ячейка.

Год обучения