Растягивание ячеек в таблицах html

Безимени-192Для наглядности в страницы сайта часто вставляются различные таблицы.
Хорошо, когда количество горизонтальных ячеек в каждой строке таблицы html одинаково, и располагаются они друг под другом, образуя ровные колонки.
Хорошо, когда количество вертикальных ячеек в каждой колонке таблицы html одинаково, и располагаются они друг за другом, образуя ровные строки.
Но как быть, если есть необходимость объединить несколько горизонтальных ячеек в одну?
И что делать, чтобы объединить в одну несколько вертикальных ячеек?

В языке разметки HTML есть специальные атрибуты colspan и rowspan.
Colspan задает число колонок, которые охватывает данная горизонтальная ячейка.
Rowspan задает число строк, которые охватывает данная вертикальная ячейка.
Атрибуты colspan и rowspan используются внутри тегов <th> и <td>. По умолчанию равны 1.

Создадим таблицу из двух колонок и трех строк:

посмотреть результат

 

Две ячейки первой строки объединим по горизонтали в одну, равную по ширине двум колонкам второй и третьей строки. Для этого в задании первой строки при описании левой ячейки используем атрибут colspan=”2”, а описание правой ячейки убираем:

посмотреть результат

 

Вернем таблицу в исходное состояние. Объединим в одну по вертикали три ячейки первой колонки. Теперь в задании первой строки при описании левой ячейки используем атрибут rowspan=”3”, а в задании второй и третьей строки убираем описания левых ячеек:

посмотреть результат

 

Чтобы лучше усвоить прочитанный материал разберём пример таблицы, где будут применяться оба атрибута colspan и rowspan:

посмотреть результат

 

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика