Объединение ячеек

Часто в таблицах требуется объединить расположенные по соседству (в строке или столбце) ячейки. В HTML это выполняется с помощью специальных атрибутов тега <td>.

Когда нужно объединить несколько последовательных ячеек в строке, то для них создается один (общий) элемент <td>, в котором указывается атрибут colspan (column span — охватить столбцы) с числом объединяемых ячеек. В следующем примере предполагается, что строка таблицы содержит пять ячеек:

<tr>

<td>…</td>

<td colspan="3">…</td>

<td>…</td>

</tr>

Аналогично, когда требуется объединить ячейки в столбце (соседних строках), в <td> задается атрибут rowspan (row span — охватить строки). В этом случае для всех ячеек также создается один элемент <td>, поэтому в соответствующих местах расположенных ниже строк элемент отсутствует. В следующем примере в таблице 3*3 объединены три ячейки во втором столбце <td>

<tr>

<td>…</td> <td rowspan="3">…</td> <td>…</td>

</tr>

<tr>

<td>…</td> <td>…</td>

</tr>

<tr>

<td>…</td> <td>…</td>

</tr>

Замечание

Объединение ячеек по горизонтали вертикали может сочетаться.

ЗАДАНИЕ 3 (Объединение соседних ячеек)

1. Для изучения влияния атрибутов rowspan и colspan создать три таблицы (две размером 2*2 ячеек, третья — 3*4) и провести объединение их ячеек. Общий вид результирующей страницы показан на рисунке (ячейки пронумерованы последовательно по строкам):

2. Подготовить таблицу, предназначеную для представления в процентах числа студентов, успешно сдавших экзамены в сессию:

Группа	Дисциплина
	Математика			Физика
	Семестры			Семестры
	1	2	3	1	2
2-1
2-2

Справочная информация

1.Общая схема разметки таблицы

<table>

<tr>

<td> … </td>

…

<td> … </td>

</tr>

<tr>

…

</tr>

</table>

2. Основные атрибуты тега body:

width, border, cellspacing, cellpadding

3. Атрибуты для выравнивания:

горизонтальное align (left,center, right)

вертикальное valign (top, middle, bottom)

4. Атрибуты для объединения ячеек:

горизонтальное colspan, rowspan

5. Задание цвета фона bgcolor