Библиотека Интернет Индустрии I2R.ru

Блоковая модель описывает вид отдельного блока, но кроме того блоки бывают различных видов. Знаете ли вы, что с помощью CSS можно делать таблицы и списки? В статье описаны объявления display: block, display: list-item, display: table и display: run-in. Сравнение поддержки различными браузерами прилагается.

Все элементы образуют блоки. В глобальном плане эти элементы бывают двух видов:

1. Элементы блокового уровня (если брать за основу свойство display, то значения: block, list-item, compact, run-in, table)
2. Элементы строкового уровня (если брать за основу свойство display, то значения: inline, inline-table, compact, run-in)

Почему значения compact и run-in присутствуют в обоих видах выяснится позже. Если брать аналогии HTML, то элементы блокового уровня - параграфы, заголовки и прочь. (P, H1, TABLE), а строкового - элементы оформления (B, EM, CODE). Ну а теперь подробнее рассмотрим, как сделать элемент блокового уровня.

display: block

Поддерживается всеми браузерами (какие нас интересуют).

Обозначает, что элемент будет отображаться, как элемент блокового уровня. То есть можно написать стиль на элемент <EM>

EM {display: block}

и в теле документа он будет блокового уровня. Блоковый элемент имеет отступы до и после себя. Кроме этого в одной строке вместе с этим элементом не могут находится другие элементы (если только дополнительно для них не применять свойство float, ну, об этом позже).

Вот живой пример:

А вот код:

<DIV style="display: block; border: 1px solid black">
display: block
</DIV>


display: list-item

Не поддерживается MSIE 5.

Обозначает, что элемент будет отображаться, как элемент списка. То есть слева возле элемента будет находиться точка, что соответствует UL.

Вот живой пример:

А вот код:

<DIV style="display: block; border: 1px solid black; margin: 5px; padding: 15px">
display: block;
<DIV style="display: list-item; border: 1px solid black;">
display: list-item;
</DIV>
</DIV>


Однако, не все так просто. Разные браузеры эти точечки по разному ставят. Вот скриншоты:

	Explorer 6.0
	Opera 5.02
	Mozilla 0.9.1/Netscape 6

Как видим, все браузеры отображают элемент по разному. Opera 5 ставит точечку внутри блока, тогда как остальные браузеры ее ставят снаружи блока (на скриншотах точка выходит даже за границы родительского блока, однако это не всегда так, если установить отступы (padding) побольше, то точечка будет внутри родительского элемента). Кроме того в Explorer 6 эта точечка меньше. Все эти несоответствия накладывают явно ограничение на использование свойства display: list-item.

display: table

В стандарте CSS2 реализовано визуальное представление таблиц с помощью стилей. Надо заметить сразу, что принципиальных отличий от таблиц в HTML 4.0 нет. То есть каждому тэгу соответ- ствует какой-нибудь атрибут свойства display. Вот этот список:

table (в HTML: TABLE)
Определяет элемент как таблицу блокового уровня со всеми вытекающими последствиями

inline-table (в HTML: TABLE)
Определяет элемент как таблицу строкового уровня со всеми вытекающими последствиями

table-row (в HTML: TR)
Определяет элемент, как строку таблицы

table-row-group (в HTML: TBODY)
Определяет элемент, как группу нескольких строк (надо сказать, абсолютно не нужен)

table-column (в HTML: COL)
Определяет элемент, как столбец таблицы

table-cell (в HTML: TD, TH)
Определяет элемент, как ячейку таблицы

Я тут пропустил всякие малополезные элементы, типа table-footer-group (в HTML: TFOOT) и т.п. Но это большого значения не имеет, потому как в MSIE все равно таблицы хрен поддерживаются, а потому заострять на них внимания нет особого смысла. Вот живой пример такого куска кода:

<DIV STYLE="display: table; border: 1px solid black; margin: 5px; padding: 15px">display: table

<DIV STYLE="display: table-row; border: 1px solid black">

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV></DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>
</DIV>


А вот скриншоты:

	Explorer 6.0
	Opera 5.02
	Mozilla 0.9.1
	Netscape 6

Ясно, что об использовании свойства display: table лучше забыть до той поры, пока его не внедрит Microsoft. Впрочем, ничего особо полезного в этом свойстве и нет, потому что все это можно реализовать средствами HTML, к тому же и проще.

display: run-in

Вот и подобрались в загадочному свойству display: run-in. Сразу отмечу, что поддерживает это свойство только Opera 5. Почему же оно находится и в разделе элементов блокового уровня, и в разделе элементов строкового уровня? А потому что метод отображения этого свойства может быть как блоковым, так и строковым, в зависимости от некоторых условий. В спецификации W3С написано следующее:

• Если блоковый элемент (который не является плавающим и не является абсолютно позиционированным) следует за run-in блоком, то run-in блок становится первым строковым блоком этого блокового элемента
• В противном случае, run-in блок становится элементом блокового уровня.

Чисто ради спортивного интереса, вот скриншот из Opera 5.

display: compact вообще пока никем не поддерживается (Opera 5 с багом небольшим, правда, поддерживает, но это сути не меняет). Так что на этом свойстве и вовсе останавливаться не будем

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

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