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

Безимени-193В последнее время спор между сторонниками блочной вёрстки и теми, кто предпочитают в своей работе использовать таблицы html, всё набирает обороты. Одни утверждают, что табличная вёрстка – это груды лишнего кода, а использование элементов Div позволяет создать небольшой изящный код. Сторонники таблиц, отстаивают своё право работать в привычной для них манере и не считают таблицы анахронизмом.

Используя таблицы, можно создать интересные проекты, способные привлечь множество посетителей на веб-ресурс.
Для того чтобы таблица выглядела более аккуратно в код добавляют следующие атрибуты: cellpadding и cellspacing.
В таблице весь контент располагается внутри ячейки html. Чтобы содержимое контейнера не прилипало к рамке, между ними создаётся пространство, размер которого и определяет атрибут cellpadding. Код при этом будет выглядеть так:

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

 

При работе с таблицами иногда возникает необходимость раздвинуть ячейки. Для этого используют атрибут cellspacing:

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

 

С ним стоит обращаться очень аккуратно. Так как если ошибиться, ячейки могут перекрыть друг друга. Вставим оба атрибута в нашу таблицу:

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

 

Когда мы представляем таблицу, традиционно думаем о том, что в её ячейках содержится какой-то текст или цифры. На самом деле в ячейке html таблицы может размещаться множество разных вещей. К примеру, картинки или другую таблицу. Для добавления в таблицу изображений используется атрибут background:

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

 

А вот пример вложенной таблицы html:

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

 

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

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

Опубликовать в 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 Яндекс.Метрика