Как сделать один заголовок в таблице

Главная → Уроки html → Урок 10. Работа с таблицами сложной структуры

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

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

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

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

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

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

Например,

Этот столбец включает в себя два столбца.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например,

Здесь столбец включает в себя две строки.

Для нашего рисунка:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

Результат:

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

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

Предыдущий урок Вернуться в раздел Следующий урок 

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

Уроки PHPУроки PHPУроки PHPУроки PHPУроки PHPУроки PHP

Код кнопки:
<a href="http://site-do.ru"><img src="http://site-do.ru/images/sitedo1.gif" alt="Как создать свой сайт"></a>
Скачайте одним архивом видеоуроки HTML!

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.


шапка меню контент низ сайта
Источник: http://www.site-do.ru/html/html10.php



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как найти значение в другой таблице или сила ВПР Как сделать страницу с визуальными закладками



Как сделать один заголовок в таблице Сортировка данных в диапазоне или таблице - Excel
Как сделать один заголовок в таблице Горячие клавиши и сочетания клавиш в Microsoft
Как сделать один заголовок в таблице HTML - Урок 10. Работа с таблицами сложной
Как сделать один заголовок в таблице ZWWW - ФМ для выгрузки данных в WORD, EXCEL
Как сделать один заголовок в таблице Как сделать таблицу в excel 2010
Как сделать один заголовок в таблице Сортировка в Excel
Как сделать один заголовок в таблице Алексеев Вячеслав. Стрелочники истории-2
Бесплатные схемы вышивки из фото- онлайн программа для Запуск программы невозможен, так как на компьютере Как бесплатно и легально скачать установочный диск Как сделать гамак с каркасом и навесом самостоятельно? Как сделать простой жучок для прослушки своими руками Какая печка лучше - Своими руками Мастер класс: как сделать тюльпан из фоамирана МозгоЧины Обследования и анализы при беременности по