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

Часто нужно объединять несколько ячеек в одной строке или в одном столбце. Например, если мы посмотрим на расписание занятий, то увидим, что лекции читаются потокам, в то время как практические занятия проводятся с отдельными группами, а для проведения лабораторных работ каждая группа делится на подгруппы.

Создадим html-документ, в котором опишем таблицу, задающую расписание занятий на понедельник для специальности «информационный менеджмент - MnI». Таблица будет содержать 4 строки и 5 столбцов. Для объединения нескольких ячеек одной строки в теге <TH> или <TD> используется атрибут col span, а для объединения нескольких ячеек одного столбца – атрибут row span. Фрагмент кода html-документа имеет вид:

<TABLE border=2 cellpadding=4>

<TR> <TH>&nbsp;

<TH>timpul

<TH> Mni21

<TH> Mni22

<TH> Mni23

<TR> <TH rowspan=3> Пн

<TH > 13:00

<TD colspan=3 align="center"> Retele de calculatoare (prel)

<TR> <TH > 14:35

<TD> Sisteme de operare (prac)

<TD> Limba engleza

<TD> Economie de piata(prac)

<TR> <TH >16:10

<TD >Economie de piata(prac)<TD> Sisteme de operare (prac)

<TD> Limba engleza

</TABLE>

На экране браузера таблица будет иметь вид:

Первая строка таблицы содержит заголовки столбцов. Для их описания мы использовали 5 тегов <TH>. Первая ячейка строки не имеет названия и для прорисовки её рамки использовали символ неразрывного пробела &nbsp;.

Рассмотрим содержание второй строки. При описании дня недели, т.к. он относится ко всем трём парам, а значит к этой и следующим двум строкам, записано для первой ячейки <TH rowspan=3>. Во второй ячейке указано время проведения пары.

В третьей ячейке нужно указать один и тот же предмет «Retele de calculatoare (prel)» для всех трёх групп, т.е. для трёх ячеек строки. Поэтому использовали тег <TD> со следующими атрибутами <TD colspan=3 align="center">

Обратите внимание на то, что третья и четвёртаястроки таблицы содержат описание только 4 ячеек, т.к. первая ячейка каждой строки была задана раннее при описании второй строки.

Вложенные таблицы

Осталось решить одну проблему. Как поделить одну ячейку на несколько частей, ведь иностранный язык обычно читается по подгруппам? Для этого надо использовать вложенную таблицу, содержащую нужное количество ячеек. Рассмотрим её создание для последней ячейки нашей таблице. Последний тег <TD > надо переписать следующим образом:

<TD > <TABLE >

<TR> <TD> Limba engleza FAM1

<TR> <TD >Limba engleza FAM2

</TABLE>

После чего на экране последняя строчка будет выглядеть так:

Дизайн большинства сайтов держится на невидимых таблицах. Браузер не может открыть таблицу, не загрузив ее полностью. Поэтому лучше разбить основную таблицу страницы на несколько отдельных таблиц. Совет очень действенный и широко применяется профессионалами для более быстрой визуализиции сайтов.

Не нашли, что искали? Воспользуйтесь поиском: