Таблицы, объединение ячеек.

Тема урока: Таблицы, объединение ячеек.

Цели урока:

Ø  Создание таблиц сложной структуры;

 

Тип урока: изучение нового материала.

Вид урока: повторение, лекция, практикум.

Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.

Методы обучения:

Ø  словесные: рассказ, объяснение;

Ø  наглядные: методы иллюстрации;

Конспект урока.

Теоретическая часть.

 

Домашнее задание: конспект.

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

1. Создайте таблицу расписания уроков  на интернет-странице, уроки оформите в виде нумерованного списка, сохраните в личной папке под именем table.html.
2. Задайте цвет бордюра, ячеек, шрифта по своему желанию.

 

Объединение ячеек таблицы

Для того, чтобы формировать на Интернет-странице таблицы с объединенными по горизонтали или по вертикали ячейками, вроде следующей, используются параметры COLSPAN и ROWSPAN

Чтобы создать «объединенную» ячейку, достаточно ука­зать в качестве значения параметров COLSPAN и/или ROWSPAN число «элементарных» ячеек таблицы, занимаемых данной ячейкой, а количество тэгов <TD> в данной и/или последую­щих строках, соответственно,  уменьшить.

 

Пример :

<Р    ALIGN=CENTER>

<TABLE    B0RDER=3>

<TR ALIGN=CENTER>

<TD COLSPAN=4>Bся  строка как одна ячейка  </TD>

<!— вместо четырех — только один контейнер TD -->

</TR>

<TR  ALIGN=CENTER>

<TD>Отдельная ячейка</TD>

<TD>Отдельная ячейка</TD>

<TD>Отдельная ячейка</TD>

<TD>Отдельная ячейка</TD>

</TR>

<TR ALIGN=CENTER>

<TD COLSPAN=2 R0WSPAN=2>Ячейка 2x2 </TD>

<!-- пропуск второго контейнера -->

<TD COLSPAN=2>2 ячейки по ширине</ТD>

<!--  пропуск четвертого контейнера -->

</TR>

<TR ALIGN=CENTER>

<!-- пропуск двух контейнеров TD, так как их место занимает объединенная ячейка в начале предыдущей строки -->

<ТD>Отдельная ячейка</ТD>

<TD ROWSPAN=2>2 ячейки по высоте</ТD>

</TR>

<TR ALIGN=CENTER>

<ТD>Отдельная ячейка</ТD>

<ТD>Отдельная ячейка</ТD>

<ТD>Отдельная ячейка</ТD>

<!-- пропуск четвертого контейнера (объединенная ячейка строкой выше)-->

</TR>

</TABLE>

</Р>

 

Домашнее задания: конспект.
Практическая работа :

Создать таблицы по образцу. Все необходимые изображения находятся в папке для учеников. Сохранить файлы в личной папке под именами table1.html, table2.html, table3.html, table4.html, table5.html

1.  

 

2.    3.  4.

 

5.