... главная страницаКарта сайтаКонтакты
Изучив материалы, представленные на сайте CSS-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей   Cascading Style Shett
Поиск по сайту:

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS
Rambler's Top100

Блоки и таблицы. (стр.1)

  

 


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

Сопоставление элементов описания таблиц в CSS и HTML
Значение display Элемент HTML Назначение
Table TABLE Определяет элемент как таблицу блокового уровня
inline-table нет Определяет таблицу как элемент строкового уровня
table-row TR Определяет элемент как строку таблицы
table-row-group TBODY Определяет элемент как группу строк таблицы
table-header-group THEAD Определяет элемент как группу строк верхней шапки таблицы
table-column COL Определяет элемент как столбец таблицы
table-column-group COLGROUP Определяет элемент как группу столбцов таблицы
table-cell TH, TD Определяет элемент как ячейку таблицы
table-caption CAPTION Определяет элемент как заголовок таблицы


Как видите, аналогия практически полная, только большого значения это не имеет, поскольку создавать таблицы с помощью HTML проще, чем при помощи CSS. Кроме того, все эти значения свойства display не поддерживаются браузером Internet Explorer и поэтому не могут иметь широкого применения.

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

<STYLE>
.table{
border:1px solid #000;
display:table; }
.tr{
border:1px solid #000;
display:table-row; }
.td{
border:1px solid #000;
display:table-cell;
padding:5px }
</STYLE>

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

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 
Уроки CSS © 2007 - 2012 г. Все права защищены