3. Работа с таблицами сложной структуры

ЗАДАНИЕ. Изучить материал данного раздела. Выполнить примеры так, чтобы они были расположены в одном файле, задавая таблицам разные названия (caption). Полученный htm - файл будет являться приложением к отчету.

Содержание:

Тег colspan - объединение столбцов

Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:

шапка сайта
меню контент
низ сайта

Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.

шапка сайта
меню контент
низ сайта

Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.

Например, столбец <td colspan="2"> включает в себя два столбца.

Для нашего примера:

Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.

Рассмотрим другой пример разметки web-страницы:

шапка сайта
меню меню меню меню меню меню
новости контент



Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.

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

Вторая строка состоит из шести столбцов:

Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:

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

Тег rowspan - объединение строк

А если нам понадобится вот такая разметка?

меню шапка
контент


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

Для такого случая есть параметр rowspan тега <td>. Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено.

Например, столбец <td rowspan="2"> включает в себя две строки. Для нашего рисунка:

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

Рассмотрим еще один пример:

шапка меню
контент
низ сайта

Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:

Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):

Наконец, третья строка - это один столбец, включающий в себя три столбца:

Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.

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

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

Итак, у нас есть вот такой код:

Давайте внутрь нашего контента поместим во такую таблицу:

Картинки и подписи для нее подберите ваши. Код этой таблицы простой - три строки и два столбца:

Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:

Результат:

шапка меню
Здесь текст о ромашках
Здесь текст о тюльпанах
Здесь текст о герберах
низ сайта

Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">

Результат:

Именно так оформляется контент при табличной верстке сайтов.

Синтаксис создания таблиц в краткой форме приведен здесь.