Задание высоты и ширины ячеек

Задание 3.4

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

Сохраните документ с именем пример3_4.htm, откройте в браузере.

Задание выравнивния в ячейке. Объединение ячеек

Задание 3.5

Скопируйте предыдущий пример и внесите указанные изменения:

Данный пример иллюстрирует задание выравнивание по горизонтали внутри ячеек таблицы.

 

Сохраните документ с именем пример3_5.htm, откройте в браузере.

Задание 3.6

Скопируйте предыдущий пример и внесите указанные изменения:

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

 

Сохраните документ с именем пример3_6.htm, откройте в браузере.

Задание 3.7

Скопируйте пример3_5 и внесите указанные изменения: Данный пример иллюстрирует объединение ячеек в строке таблицы.( тег <colspan>)

 

Сохраните документ с именем пример3_7.htm, откройте в браузере.

Задание 3.8

Скопируйте пример3_5 и внесите указанные изменения: Данный пример иллюстрирует объединение ячеек в строке таблицы.( тег <rowspan>)

 

Сохраните документ с именем пример3_8.htm, откройте в браузере.

Задание 3.9

Скопируйте пример3_5 и внесите указанные изменения: Данный пример иллюстрирует объединение ячеек в строке таблицы ( тег <rowspan>).

 

Сохраните документ с именем пример3_9.htm, откройте в браузере.

 

Раздел 2. Вложенные таблицы

Задание 3.10

Наберите в редакторе «блокнот» текст следующего HTML-документа. Данный пример иллюстрирует использование вложенных таблиц.

 

Сохраните документ с именем пример3_10.htm, откройте в браузере.

Раздел 3. Границы таблицы.

Теперь поэкспериментируем с границами таблиц.

Для этого воспользуемся тегами:

· bgcolor - цвет фона в таблице или ячейке;

· border - толщина рамки таблицы;

· cellspaсing - расстояние между ячейками;

· cellpadding - расстояния от рамки до содержимого ячейки.

Начнем с обычной таблицы.

Задание 3.11

Наберите в редакторе «блокнот» текст следующего HTML-документа.

 

Сохраните документ с именем пример3_11.htm, откройте в браузере.

 

Устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрехмерные границы и реальная толщина рамки всегда больше указанной.

Есть другой способ, позволяющий делать красивые таблички с тонкими рамками. И этот способ - вложенные таблицы. В этом случае во внутренней таблице устанавливается ненулевое расстояние между ячейками, а во внешней прописывается цвет фона равный цвету рамки. Благодаря этому в зазоры ячеек становится видно фон внешней таблицы. И если мы закрасим ячейки внутренней таблицы цветом фона страницы, то нашему взору предстанет красивая табличка с тонкими рамками.

Задание 3.12

Скопируйте пример3_11 и внесите указанные изменения:

 

 

Сохраните документ с именем пример3_12.htm, откройте в браузере.

Задания для самостоятельного выполнения:

Создайте документы, выводящие следующие виды таблиц:

 

 

 

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

 

Контрольные вопросы:

1. Как создать простую таблицу?

2. Как объединить ячейки?

3. Как изменить толщину рамки таблицы?

4. Как закрасить определенную ячейку?

5. Как создать вложенную таблицу?

 

Лабораторная работа №4
Работа с формами

Цель работы:получить навыки создания форм в html – документе.

Задачи:

· научиться применять основные элементы формы;

· научиться производить сбор данных при помощи формы.