- Два типу табличній розмітки
- Є ключова відмінність
- Динамічне вертикальне вирівнювання по центру
- Динамічне горизонтальне вирівнювання по центру
- адаптивна верстка
- Динамічний прилипає підвал
- Розмітка «Holy Grail»
- Ви шуткуєте? Flexbox все вирішить!
- висновок
Відновлення підмочену репутацію CSS-таблиць Антигерой
- один з центральних персонажів фільму, книги або п'єси, що не володіє звичайними героїчними якостями.
Використання таблиці в розмітці - делікатна тема. Для багатьох веб-розробників таблична верстка - табу. Хоча існує безліч доводів проти цього , Більшість розробників не можуть чітко пояснити, чому не можна використовувати табличну розмітку, крім того, що «таблиці - це погано».
Імпульс від давнього початку руху проти використання HTML-таблиць був сильний. Він вплинув на багато поколінь розробників, змусивши їх думати, що будь-яке використання таблиць - зло.
Треба зізнатися, я один з тих розробників, хто уникає табличній верстки навіть для представлення табличних даних. Мало того, я навіть дорікав своїх колег, коли вони використовували display: table для колоночной розмітки (або розмітки « Holy Grail »).
Озираючись назад, я розумію, що з упертістю, гідною кращого застосування, витрачав величезну кількість часу на те, щоб «заточити» CSS під потрібну мені завдання.
Два типу табличній розмітки
Використовувати таблиці в верстці можна двома способами: це HTML-таблиця і CSS-таблиця.
HTML-таблиця - це коли для створення таблиці використовується нативний HTML-тег <table>, а CSS-таблиця - це імітація того ж поведінки, але за допомогою CSS-властивостей.
Є ключова відмінність
Як і ті, хто навчався за « CSS Zen Garden », Я відчуваю огиду до табличній верстці в HTML. Сам того не розуміючи, я дозволяв оманливим упередженням ввести себе в оману, перебільшуючи взаємозв'язок між HTML- і CSS-таблицями.
Якщо щось виглядає, працює і поводиться як таблиця, то воно має ж бути таблицею? Неправильно!
Насправді, у CSS-таблиць є одна ключова відмінність від HTML-таблиць: вони можуть перестати бути таблицями, варто тільки змінити їх CSS-властивості. А HTML-таблиці на таке не здатні. Це відкриває перед нами широкі можливості вибіркового використання в верстці потрібних табличних особливостей.
Нижче ви знайдете кілька прикладів використання display: table:
Динамічне вертикальне вирівнювання по центру
Натискайте на кнопку, щоб додати рядки.
Це, мабуть, найпоширеніший спосіб використання display: table. З його допомогою можна отримати справжнє вирівнювання по вертикалі елементів з динамічної висотою.
Є також інший, більш короткий, спосіб вертикального вирівнювання, який може вас зацікавити:
Динамічне горизонтальне вирівнювання по центру
Щоб горизонтально розташувати по центру динамічний елемент, можна зробити його блочно-рядковим (display: inline-block). Потім зовнішньому контейнеру цього елемента потрібно задати властивість text-align: center. Недолік цього способу полягає в «побічний ефект» вирівнювання тексту по центру. Всі дочірні елементи всередині контейнера успадкують властивість text-align: center, яке може перевизначити існуючі властивості.
завдяки @mojtabaseyedi я знайшов новий спосіб вирівнювати динамічні елементи по горизонталі без побічних ефектів. Потрібно застосувати до динамічного елементу display: table і margin: auto.
адаптивна верстка
Зменшіть вікно до <480px, щоб побачити адаптивність в дії.
Як я вже згадував, CSS-таблиця може вести себе не як таблиця, коли це необхідно. Переключивши у елемента властивість display з table-cell на block, ми зможемо розмістити елементи в стопку.
Порядок проходження змінюється з 1-2-3 на 2-3-1
Можна навіть змінити порядок проходження блокових елементів. Детальніше про це прийомі можна почитати тут .
Динамічний прилипає підвал
Динамічний прилипає підвал
Прилипає підвал повинен відповідати двом вимогам:
- Підвал повинен прилипати до низу сторінки, коли основного контенту занадто мало, щоб заповнити всю сторінку по висоті.
- Підвал повинен слідувати в потоці як зазвичай, якщо обсяг контенту перевищує висоту сторінки.
Якщо ви коли-небудь шукали рішення цього завдання, то вам, можливо, траплялися ці корисні варіанти від Chris Coyier і Ryan Fait .
Ці рішення відмінно працюють, але у них є один недолік: підвал повинен бути фіксованою висоти. Цю проблему можна обійти засобами JavaScript, але я все ж вважаю за краще використовувати для цього CSS. За допомогою display: table можна зробити прилипає підвал з динамічної висотою.
Розмітка «Holy Grail»
Розмітка «Holy Grail» (від A List Apart ) - це варіант розмітки сторінки з шапкою, трьома рівними по висоті колонками (дві фіксованих бічних колонки і тягнеться центр) і прилипає підвалом.
Розмітка «Holy Grail»
Така розмітка повинна в міру можливості відповідати таким вимогам:
- Центральна колонка повинна тягнутися, а бічні - мати фіксовану ширину.
- Центральна колонка може йти першої в розмітці.
- Будь-яка колонка може бути більше за інших по висоті.
Розмітка «Holy Grail» за допомогою display: table
В наведеному вище прикладі показана розмітка «Holy Grail». Можете змінювати розміри вікна, щоб середня колонка тяглася по ширині; також можна додати контент, щоб подивитися, як працює прилипає підвал. Єдина вимога, якому ця розмітка не відповідає, - це пункт 2: «Центральна колонка може йти першої в розмітці».
Напевно, це потрібно для пошукової оптимізації. Тобто якщо міркування SEO для вас не стоять на першому місці, за допомогою display: table ви порівняно легко зробите розмітку «Holy Grail».
Ви шуткуєте? Flexbox все вирішить!
Це дійсно так. Ознайомтеся, наприклад, з рішенням вищенаведених завдань за допомогою flexbox від Phillip Walton. Однак, я б не поспішав його застосовувати. На частку IE8 і IE9 досі доводиться 32% ринку десктопних браузерів - а це занадто багато користувачів, щоб відмовлятися від них заради задоволення застосувати flexbox. Якщо тільки ваш сайт не розрахований цілком на мобільний трафік - в чому я сильно сумніваюся, - варто вибрати display: table.
Уточнення: Я працюю на консалтингову компанію, тому зацікавлений у підтримці десктопів. Але якщо вам потрібно підтримувати тільки мобільні браузери, можете сміливо використовувати flexbox.
висновок
Сподіваюся, з допомогою наведених прикладів мені вдалося продемонструвати корисні властивості несправедливо нехтують display: table. Однак мушу підкреслити, що CSS-таблиці - не панацея для розмітки. Використовуйте їх доречно, це дозволить вам уникнути тривалих ночей правки CSS-коду.
Це переклад статті Коліна Тоха - « The Anti-hero of CSS Layout - "display: table" ».
Якщо щось виглядає, працює і поводиться як таблиця, то воно має ж бути таблицею?Ви шуткуєте?
