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

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

На 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) Записывая разметку новой таблицы сместить ее влево.

	Из таблицы следует, что общее число
ЭКЗАМЕНЫ И ЗАЧЕТЫ	экзаменов и зачетов за период обучения
	студента в университете = 54

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

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

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

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

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

	Год обучения
	1 курс	2 курс	3 курс	4 курс
зачет
экзамен
зачет
экзамен

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

1 семестр

2 семестр

Выполнить следующее задание: Сформировать сложную таблицу " Экзамены и зачеты", показанную на рисунке. Для этого следует выполнить следующую последовательность операций:

a) Открыть табличный тэг и организовать заголовок таблицы: < TABLE BORDER=1>.

b) Для шапки таблицы открыть тэги строки и текста, указав в последнем параметры ROWSPAN=2 COLSPAN=2 (угловая ячейка занимает 2-е строки и два столбца), закрыть тэг текста, так как первая ячейка пуста. В тэге следующей текстовой ячейки первой строки указать, что она займет 4-е столбца с помощью параметра COLSPAN=4 и записать текст ячейки " Год обучения": < TH COLSPAN=4> Год обучения< /TH>

c) Закрыть тэги текста и строки: < /TR>

d) < TR>

e) < TH ROWSPAN=2> 2 семестр< /TH>

f) < TH> Зачет< /TH>

g) < TD> 5< /TD> < TD> 5< /TD> < TD> 3< /TD> < TD> 4< /TD>

h) < /TR>

i) < TR>

j) < TH> Экзамен< /TH>

k) < TD> 4< /TD> < TD> 4< /TD> < TD> 4< /TD> < TD> 4< /TD>

l) < /TR>

m) < /TABLE>

n) < /BODY>

p) Записать вторую строку шапки таблицы, открыв тэг строки, ячейки, и тегов текстового содержания ячеек: < TR> < TH> 1 курс< /TH> < TH> 2 курс< /TH> < TH> 3 курс< /TH> < TH> 4 курс< /TH> < /TR>.

q) Самостоятельно разместить цифровые данные по середине ячейки.

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

s) Перейти в поле текстового редактора. Открыть 3-ю строку и указать, что первая ячейка занимает 2-е строки и на своем поле содержит текст " 1 семестр", что в поле второй ячейки следует написать " Зачеты", а в следующих 4-х ячейках - их количественные значения:

< TR> < TH ROWSPAN=2> 1 семестр< /TH>

< TH> Зачет< /TH> < TD> 5< /TD> < TD> 5< /TD> < TD> 3< /TD> < TD> 4< /TD>

< /TR>

t) Открыть четвертую строку таблицы, она начинается с описания второй ячейки! Здесь следует указать текст " Экзамены", а в следующих ячейках строки - их количественные величины:

< TR>

< TH> Экзамен< /TH>

< TD> 4< /TD> < TD> 4< /TD> < TD> 4< /TD> < TD> 4< /TD>

< /TR>

u) Перейти на окно браузера, нажать на кнопку " Обновить". Проверить организацию таблицы для 1-го семестра.

v) Перейти на поле документа и записать разметку пятой и шестой строк таблицы, повторяя ранее показанные действия. Перейти на окно браузера, нажать на кнопку " Обновить". Проверить организацию таблицы.

w) Обратить внимание на то, что данные в таблице размещены по левому краю, изменить их положение на " по центру".

x) Выделить шапку сложной таблицы цветом, выделить остальные строки таблицы другим цветом и изменить цвет разделительных линий.

3.5.Разработать таблицу, в которой показать число учебных часов по видам занятий: лекции, семинары, лабораторные, для трех учебных дисциплин. Для этого с помощью метода вложенных таблиц, сформировать таблицу из трех строк, в ячейках которой разместить 3-и таблицы по учебным курсам текущего семестра. Организовать общий заголовок и отдельные заголовки для вложенных таблиц:

a) Организовать таблицу из трех строк без разделительных линий. На первой строке разместить одну общую ячейку с текстом " Учебная программа текущего семестра".

b) Вторую и третью строки таблицы разбить на три. На второй строке в каждой из этих ячеек записать соответствующие заголовки - учебные курсы, а в ячейках третьей строки - установить таблицы (в две строки) с указанием вида учебных занятий - первая строка, и число учебных часов в семестре по каждому виду занятий - во второй строке.

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

4.Сформировать галерею изображений, используя таблицу:

a) Организовать таблицу с необходимым числом ячеек и строк (например 3х3).

b) Выбрать на Web-страницах подходящие изображения и запомнить их URL-адреса.

c) Установить на поле каждой ячейки таблицы ссылки на соответствующий URL-адрес:
< IMG SRC=" URL" >.

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

5.Сохранить HTML-коды документов, проверить их на вирус и записать на дискету.

⇐ Предыдущая 123 Следующая ⇒