Практическая работа № 28

Тема: Создание Web-страницы, содержащей таблицы.

Цель: Научиться создавать таблицы в HTML – документе, объединять ячейки таблицы.

Ход работы:

Во время работы с текстовым редактором MS Word вам приходилось работать с таблицами и объединять несколько ячеек в одну.

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

Теги оформления таблиц

Атрибуты тега < TABLE>

Атрибуты тегов < TD> и < TR>

HTML тоже позволяет объединять ячейки с помощью параметров rowspan и colspan, прописываемых в теге < td> (или < th>).

Параметр rowspan объединяет ячейки в одном столбце, расположенные ниже от текущей ячейки, то есть смежные ячейки по вертикали.

Параметр colspan объединяет ячейки в одной строке, расположенные справа от текущей ячейки, то есть смежные ячейки по горизонтали.

Задания для самостоятельной работы:

Задание 1. Создайте простую таблицу, состоящую из четырех строк и шести столбцов (расписание занятий на неделю):

< table width=" 600" height=" 100" border=" 2" cellpadding=" 0" cellspacing=" 0" >

< tr align=" center" bgcolor=" #FFFF00" >

< td> Понедельник< /td>

< td> Вторник< /td>

< td> Среда< /td>

< td> Четверг< /td>

< td> Пятница< /td>

< td> Суббота< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Математика< /td>

< td> Информатика< /td>

< td> Химия< /td>

< td> Математика< /td>

< td> Биология< /td>

< td> Русский язык< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Литература< /td>

< td> Русский язык< /td>

< td> Физика< /td>

< td> Информатика < /td>

< td> Иностранный язык< /td>

< td> Биология< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Биология< /td>

< td> Математика< /td>

< td> Химия< /td>

< td> Литература< /td>

< td> Русский язык< /td>

< td> Информатика< /td> < /tr> < /table>

Таблица должна выглядеть так:

Задание 2. Объедините ячейки Понедельник и Вторник.

Для этого прописываем в первой строке в теге < td> параметр colspan=" 2", тем самым мы сделаем одну ячейку равной двум:

< table width=" 600" height=" 100" border=" 2" cellpadding=" 0" cellspacing=" 0" >

< tr align=" center" bgcolor=" # FFFF00" >

< td colspan=" 2" > Понедельник и Вторник< /td>

< td> Среда < /td>

< td> Четверг< /td>

< td> Пятница< /td>

< td> Суббота< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Математика< /td>

< td> Информатика< /td>

< td> Химия< /td>

< td> Математика< /td>

< td> Биология< /td>

< td> Русский язык< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Литература< /td>

< td> Русский язык< /td>

< td> Физика< /td>

< td> Информатика < /td>

< td> Иностранный язык< /td>

< td> Биология< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Биология< /td>

< td> Математика< /td>

< td> Химия< /td>

< td> Литература< /td>

< td> Русский язык< /td>

< td> Информатика< /td> < /tr> < /table>

Таблица примет следующий вид:

Задание 3. Объедините ячейки: Понедельник, Вторник, Среда, Четверг, Пятница, Суббота.

Для этого достаточно заменить colspan=" 2" на colspan=" 6":

< table width=" 600" height=" 100" border=" 2" cellpadding=" 0" cellspacing=" 0" >

< tr align=" center" bgcolor=" #FFFF00" >

< td colspan=" 6" > Понедельник, Вторник, Среда, Четверг, Пятница и Суббота< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Математика< /td>

< td> Информатика< /td>

< td> Химия< /td>

< td> Математика< /td>

< td> Биология< /td>

< td> Русский язык< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Литература< /td>

< td> Русский язык< /td>

< td> Физика< /td>

< td> Информатика < /td>

< td> Иностранный язык< /td>

< td> Биология< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td> Биология< /td>

< td> Математика< /td>

< td> Химия< /td>

< td> Литература< /td>

< td> Русский язык< /td>

< td> Информатика< /td> < /tr>

< /table>

Таблица примет следующий вид:

Теперь перейдем к параметру rowspan, чтобы объединить ячейки по вертикали

Задание 4. Объедините следующие ячейки: Математика и Литература в столбце Понедельник; Информатика и Русский язык в столбце Вторник; Химия и Физика в столбце Среда; Математика и Информатика в столбце Четверг; Биология и Иностранный язык в столбце Пятница; Русский язык и Биология в столбце Суббота.

Для этого в первой строке прописываем параметр rowspan=" 2" в теге < td>:

< table width=" 600" height=" 100" border=" 2" cellpadding=" 0" cellspacing=" 0" >

< tr align=" center" bgcolor=" #FFFF00" >

< td> Понедельник< /td>

< td> Вторник< /td>

< td> Среда< /td>

< td> Четверг< /td>

< td> Пятница< /td>

< td> Суббота< /td> < /tr>

< tr align=" center" bgcolor=" #66FFCC" >

< td rowspan=" 2" > Математика и Литература< /td>

< td rowspan=" 2" > Информатика и Русский язык< /td>

< td rowspan=" 2" > Химия и Физика< /td>

< td rowspan=" 2" > Математика и Информатика< /td>

< td rowspan=" 2" > Биология и Иностранный язык< /td>

< td rowspan=" 2" > Русский язык и Биология< /td> < /tr> < /table>

Таблица будет выглядеть так:

Задание №5. Составьте таблицу итоговых оценок вашей группы за текущий месяц по произвольным пяти предметам.

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

1. Как добавить таблицу в HTML - документ?

2. Как объединить строки в таблице?

3. Как объединить столбцы в таблице?

4. Какое действие позволяет выполнить параметр rowspan?

5. Какое действие позволяет выполнить параметр colspan?