Оформление на табличен блок
Въпреки факта, че днес има две посоки на оформление на страницата: таблична и блокова, не мисля, че има взаимно неразбиране между привържениците на тези два клона. Сигурен съм, че всеки уеб работник вижда очевидните предимства, които дава блоковото оформление, но в същото време мнозина, изправени пред трудностите, които възникват в този случай и, оценявайки предложените решения, съвсем разумно остават привърженици на старата школа - просто защото се оказва по-удобно.
ключов въпрос
Какво пречи на блоковото оформление да крачи триумфално около планетата? Има много препятствия. Но може би сред тях се откроява проблем, на места дори сравним не повече и не по-малко с търсенето наГраала. Тесното място е създаването на хоризонтални блокове с еднаква височина, т.е. внедряването на самия табличен обект, който понякога е необходим при оформлението на сайт, например в случай на класическо оформление с 3 колони:
Искам да предложа прост, но в същото време непопулярен подход за решаване на този проблем, а именно да се изгради рамка на сайта, като се изоставят етикетите на таблицата, но се запазва моделът на таблицата:
Според стандартите на CSS, за да превърнете този набор от div в таблица, е достатъчно да посочите подходящия дисплей в класовете: display:table; , display:table-row; и дисплей:table-cell; .
Но неслучайно нарекох този подход непопулярен. „Четците на маса“ ще видят в техниката само ненужно „изобретяване на велосипеда“, докато пламенните защитници наnu skoolще сметнат този път за идеологически погрешен, особено след като на пръв поглед изглежда, че води до задънена улица, браузърите от Microsoft display:table; не поддържа и не планира да поддържа в близко бъдеще, което означава, че е възможно да откажете шаблони за таблици и товада не се възползват от ситуацията.
Човек може да се съгласи с много възражения, но въпреки това не може да не забележи очевидните предимства на „табличния“ подход, основните сред които виждам:
- отделяне на съдържанието от представянето;
- способността да се правят "масични" оформления с всякаква сложност;
- проста реализация.
Елементът "проста реализация" е може би най-съмнителният, с "правилните браузъри" всичко е ясно, но наистина ли има просто решение за Internet Explorer? Съществува.
Например, разгледайте следната конструкция:
За да подредите блоковете хоризонтално, като същевременно подравните височината им, т.е. имитирайте таблично поведение в IE, достатъчно е да дефинирате стилови класове, за да посочите ширината на колоните и ... това е всичко. Пример 1 илюстрира тази техника (Внимание! Работи само в режим Quirks) с три колони, зададени на ширина 200px.
Нека разгледаме по-"жизнена" задача: да кажем, че рамката трябва да бъде разтегната по ширина със 100%, ширината на първата колона - 200px, третата - 30%, а втората да заеме свободно място. Решение за IE може да изглежда така (добавяне на лист със стилове):
Трикът с контейнер с едно div ще работи в браузъри, които поддържат display:table; , но за да съвпада семантично с табличния модел, по-долу ще дам пример за общо решение за дизайн с два контейнера.
Не трябва да очаквате, че този път, както всеки друг, ще бъде осеян с рози, разбира се, има нюанси (например ефектът от плъзгащи се надолу блокове в IE, за който няма място за ширината на страницата), но всички трудности, които познавам, са доста разрешими. Тук съм посочил само обща посока, предложенаидея, добре, тогава, както се казва, вие сте сами.
Коментари
Съвсем наскоро научих, че трикът с височина:0 е един от начините да настроите свойството hasLayout на Microsoft на true.
Не виждам разделянето на съдържанието от представянето тук, тъй като структурата на горния html код с divs повтаря структурата на нормална таблица, само вместо
>>Защо да давате на divs "табличен" дисплей, когато можете просто да използвате самите таблици?
Темата на статията, както и фактът, че при именуване на класове, за по-лесно възприемане, използвах имена на таблици, може би пречат на абстракцията.
Ключът тук е отделянето на съдържанието от представянето. Наборът от div, даден в статията, не повтаря „структурата на нормална таблица“, това е обикновена дървовидна структура, тя просто е свързана с таблица (тъй като използването на тагове на таблица в html превръща тази структура в таблица). Важно е да разберете, че не става въпрос за divs срещу етикети на таблици, а за постигане на правилното ниво на абстракция. Тези. примерите в статията не трябва да се възприемат като „диви вместо маси“, а като „диви като маси“ (в края на краищата те могат да се показват и „като нещо друго“, за разлика от етикетите на таблици). Показвайки „прекрасния“ шаблон „таблица“, вие не помрачавате душата си, често просто го показвате също „в колона“ и „диагонално“ или имате такава възможност.