ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ФЕВРАЛЬ >>>
Display: table Означает: «веди себя как таблица». По умолчанию этим значением обладает html-элемент table, он же таблица. Поведение, типичное для таблицы: по умолчанию имеет ширину по содержанию, но занимает целую строку, подобно блочным элементам; по умолчанию прижимается к левой границе контейнера, даже если контейнеру задано выравнивание по правому краю (text-align: right). Чтобы прижать таблицу к правому краю, надо применять float: right или же делать её инлайновой; ширину и высоту таблицы можно задавать в css; у таблицы может быть свойство margin, в том числе с отрицательными значениями (в частности, таблицу можно центрировать, назначив ей margin: 0 auto), а также padding (не действует в IE7); к содержанию таблицы применимо горизонтальное выравнивание (text-align); вертикальное выравнивание на содержание такого элемента не действует; таблица может иметь рамку (border); к таблице применимы свойства border-collapse (режим соединения рамок) и border-spacing; последнее работает в том случае, когда первое имеет значение separate, и создаёт зазоры между ячейками таблицы. Это значение, кроме создания табличной структуры, можно использовать в декоративных целях для ограничения видимой области по содержанию — например, если в дизайне фон заголовка ограничивается текстом заголовка. Подобный эффект можно получить правилом float: left или display: inline, но display: table оставляет всю строку в распоряжении данного элемента, не создавая обтекания следующими. Display: inline-table Ровно то же самое, что и предыдущее значение, только наша псевдотаблица может располагаться на одной строке с другими строчными элементами. К строчной таблице применимо вертикальное выравнивание (свойство vertical-align). Display: table-row Означает: «Веди себя как табличная строка». По умолчанию таким элементом является tr. Свойства табличной строки: имеет ширину по содержанию, но занимает целую строку; задать строке таблицы ширину нельзя, зато можно задать высоту; к табличной строке неприменимы поля, отступы, рамки и управление ими, а также вертикальное выравнивание; зато по горизонтали (text-align) содержание табличных строк выравнивать можно. Display: table-cell Означает: «Веди себя как ячейка таблицы». По умолчанию это значение имеют элементы td и th. Свойства табличных ячеек и элементов со значением display: table-cell: идущие подряд ячейки находятся на одной строке с себе подобными, не переходя на следующую; если ячейкам на строке тесно, они сначала ужимаются по ширине, а затем начинают распяливать контейнер и/или окно браузера; ширина ячеек по умолчанию распределяется пропорционально содержанию (с учётом всех ячеек в данной строке), однако может прямо задаваться через css; все ячейки в строке имеют одинаковую высоту, которая определяется содержанием самой большой ячейки в данной строке; ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin); к табличным ячейкам применимо вертикальное выравнивание по табличному принципу: свойство vertical-align выравнивает содержание ячейки по высоте относительно самой ячейки, при этом ячейки в строке сохраняют одинаковую высоту, в отличие от строчных или строчно-блочных элементов. Значения vertical-align не бывают отрицательными; содержание ячейки может выравниваться по горизонтали (text-align); у ячейки может быть рамка, но чтобы повлиять на слияние/расклеивание рамок, надо соответствующие свойства назначать контейнеру, а не текущему элементу; кстати, в старых версиях Оперы у элементов со значением table-cell значение border-spacing почему-то было ненулевым и создавало лишние зазоры, в силу чего таким элементам требовалось правило border-collapse: collapse; сейчас этого, вроде бы, не наблюдается. Интересно, что если родительский элемент со свойством display: table или table-row наряду с потомками типа table-cell содержит элементы с другими типами отображения, то группа не табличных элементов образует ещё одну ячейку в той же строке, в противном случае строка разрывается. Далее идут совсем уж малоупотребительные типы отображения; по мере того, как будет уходить IE7, можно будет уделить им больше внимания, а пока достаточно краткого перечисления. Display: table-column «Веди себя как табличная графа (колонка, столбец)». Таким элементом в html является редко применяемый элемент col. Через css можно указать фон, рамку, ширина, видимость (visivility); в IE нет рамки и видимости. Display: table-column-group Соответствует группе граф colgroup. По поведению совпадает с предыдущим типом. Display: table-header-group, table-footer-group, table-row-group Это группы строк, которым соответствуют элементы thead, tfoot и tbody соответственно, то есть группа шапки, группа подвала и группа основной части таблицы. Display: table-caption Заголовок таблицы — caption. Элемент с этим типом отображения в Опере и ИЕ8 требует контейнер с типом отображения table; в этом случае выводится перед таблицей, как и положено заголовку таблицы. Кроме того, в коде html заголовок таблицы должен быть первым потомком табличного элемента, в противном случае в FFи Chrome наблюдаются весьма забавные эффекты, увы, не имеющие практической пользы. Автор текста - Юлия Панина
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER