Главная → Уроки html → Урок 10. Работа с таблицами сложной структуры
HTML - Урок 10. Работа с таблицами сложной структуры
Тег colspan - объединение столбцовСамым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
шапка сайта | |
меню | контент |
низ сайта |
Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.
шапка сайта | |
меню | контент |
низ сайта |
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Например,
Для нашего примера:
шапка сайта | |
меню | контент |
низ сайта |
Рассмотрим другой пример разметки web-страницы:
шапка сайта | |||||
меню | меню | меню | меню | меню | меню |
новости | контент |
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.
Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:
Вторая строка состоит из шести столбцов:
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой нужное количество столбцов.
Тег rowspan - объединение строк
А если нам понадобится вот такая разметка?
меню | шапка |
контент |
Наложим зрительно сетку, получается две строки и два столбца. Но первый столбец первой строки объединяет две строки.
Для такого случая есть параметр rowspan тега <td>. Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено.
Например,
Для нашего рисунка:
меню | шапка |
контент |
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в себя две.
На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности.
Рассмотрим еще один пример:
шапка | меню |
контент | |
низ сайта |
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.
Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере нашей последней разметки.
Итак, у нас есть вот такой код:
шапка | меню |
контент | |
низ сайта |
Давайте внутрь нашего контента поместим во такую таблицу:
Картинки для нее подберите сами. Код этой таблицы простой - три строки и два столбца:
Здесь текст о ромашках | |
Здесь текст о тюльпанах | |
Здесь текст о герберах |
Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:
шапка | меню | |||||
|
||||||
низ сайта |
Результат:
Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|