Все, що ви знали про CSS - неправда
Після релізу, IE8 буде підтримувати безліч нових параметрів для аттрибута дисплея CSS, включаючи параметри, які стосуються таблицями: table. table-row і table-cell - і це останній великий браузер з їх підтримкою. Ця подія позначить кінець складних методів CSS розмітки і заб'є останній цвях в труну використання HTML таблиць для верстки. У підсумку, створення сіток розмітки табличного виду буде швидше і простіше.
Застосування параметрів табличних аттрибутов до елементів веб-сторінки змушує елементи наслідувати властивостями зображення за допомогою їх табличних еквівалентів. У цій статті я покажу яким чином це буде мати великий вплив на способи використання CSS для розмітки веб-сторінок.
CSS таблиці вирішують всі проблеми, що з'являються при використанні абсолютної системи коодінат або флоат, для створення многострочной розмітки в сучасних браузерах. Завдання параметра table для аттрибута display дозволить вам відобразити елементи так, як ніби вони є елементами таблиці. Головна перевага табличній розмітки CSS - це можливість легкого визначення меж клітини, що дозволяє нам додати до неї фон та інше без семантичних проблем виділення нетаблічних елементів, як в HTML таблиці документа.
HTML код визначає потрібний порядок виведення даних. Першою йде стовпець nav. потім extras. останнім йде content.
Також нам необхідно написати необхідний CSS код:
Щойно створена нами табличная розмітка буде коректно відображатися як в IE8. так і в Firefox, Safari і Opera.
Ми отримали розмітку з трьох стовпців рівної висоти без застосування спеціальних прийомів, таких як помилкових стовпців за допомогою фонових малюнків, проблем з розміщенням або необхідності очищати floats!
Як це працює?
Атрибут display дозволяє вам задати ряд табличних параметрів, щоб відображати елементи так, як ніби вони є елементами таблиці. Ось доступні параметри відображення:
- table змушує елемент поводитися, як елемент таблиці;
- table-row змушує елемент поводитися, як елемент рядка таблиці;
- table-cell змушує елемент поводитися, як елемент елементи таблиці;
- table-row-group змушує елемент поводитися, як елемент групи рядків таблиці;
- table-header-group змушує елемент поводитися, як елемент групи заголовків таблиці;
- table-footer-group змушує елемент поводитися, як елемент групи нижнього колонтитула;
- table-caption змушує елемент поводитися, як елемент заголовка таблиці;
- table-column змушує елемент поводитися, як елемент стовпця таблиці;
- table-column-group змушує елемент поводитися, як елемент групи стовпців таблиці.
Зачекайте, хіба розмітка таблицями - це правильно?
Припустимо, що ви не зовсім згодні з прикладом, який ми тільки що привели - в кінці кінців, хіба зашітнікі веб стандартів не наполягали роками на тому, що ви не повинні використовувати таблиці для розмітки?
HTML елемент table - це семантична структура: він описує, що з себе представляють дані. Тому, вам потрібно використовувати table. тільки якщо дані, які ви розміщуєте - табличні, наприклад, фінансова інформація. Вона зазвичай розміщується на комп'ютері електронною таблицею, тому напевно слід визначати її як таблицю в HTML.
З іншого боку, параметр table аттрибута display. просто показує як щось повинно виглядати в браузері і не має семантичного значення!
Використання елемента table для вашої розмітки каже агенту користувача: «Це табличні дані». А застосування зв'язки div-ів просить його отборазіть їх візуально певним чином, якщо це можливо.
Звичайно ж, нам не слід використовувати display: table; в зв'язці елементів div, коли ми маємо дійсно табличні дані. Наш простий приклад, описаний вище, змушує нашу розмітку виглядати так, як ніби у нас є однорядкова таблиця з трьома осередками, не потрібно велике уяву, щоб усвідомити потенціал цієї техніки для легкого створення комплексних видів розміток.
Анонімні елементи таблиць
Таблиці CSS дотримуються звичайних правил табличній розмітки, які відкривають дуже потужне властивість табличних розміток CSS: пропущені елементи таблиць створюються анонімно самим браузером. Специфікація CSS 2.1 затверджує:
Відмінні від HTML документальні мови можуть не містити всіх елементів моделі таблиці CSS 2.1. У цих випадках «пропущені» елементи дожни бути створені, щоб табличная модель заробила. Будь-який елемент таблиці автоматично згенерує навколо себе необхідні анонімні об'єкти таблиці, що складаються принаймні з трьох вкладених об'єктів, відповідних елменти «table» / «inline-table», «table-row», і «table-cell».
Це означає, що якщо ми використовуємо display: table-cell; без попереднього розміщення осередку в місці, що відноситься до display: table-row ;. то рядок буде матися на увазі - браузер буде вести себе так, як ніби оголошена рядок насправді є.
Давайте використаємо простий приклад, щоб пояснити цей прийом: розмітку з трьох осередків, показану нижче. Ми розглянемо три різних прикладу HTML коду, які приведуть до однакової візуальної розмітки.
Спочатку приклад коду, який може бути використаний для створення розмітки з трьох осередків:
Набір вкладених елементів div не виглядає якось особливо, але скоро ми це змінимо. CSS теж дуже простий:
Цей CSS відносить елемент з класом «container» до display: table ;. елемент з класом «row» до display: table-row ;. а елемент з класом «cell» - до display: table-cell; із завданням його межі, висоти і ширини.
Вищеописана HTML розмітка явно створює елементи для таблиці з рядка з трьома осередками, використовуючи всі CSS класи, створені нами. Однак, ми можемо зменшити код, прибираючи рядкові елементи div ось так:
Незважаючи на те, що в цій розмітці пропущений елемент, який представляє таблицю, вона буде створена браузером, як анонімний елемент. Ми можемо ще сильніше скоротити код:
У такій розмітці пропущені елементи, що описують таблицю і її рядок, вони обидва створюються браузером, як анонімні елементи. Навіть при пропуску елементів в розмітці, кінцевий результат однаковий.
Правила створення анонімних елементів таблиці
Ці анонімні елементи створюються не магією, і вони не будуть автоматично з'являтися для будь-якого недоліку вашого HTML коду. Щоб повністю використовувати переваги анонімних елементів таблиці, бажано ознайомитися з правилами їх створення. Якщо розмітка запитує передбачуваний елемент, браузер створює анонімну осередок і записує її CSS Атрибути display одне зі значень table. table-row. або table-cell. в залежності від контексту.
Якщо у вас є елемент, певний, як display: table-cell ;. але його безпосередній предок (елемент, що містить його), не визначений, як table-row. буде створено анонімний елемент table-row. щоб включити в нього осередок і будь-які подальші родинні елементи, які також визначені table-cell. до тих пір, поки не попадеться елемент, який не належить до table-cell. таким чином вони будуть поміщені в одну і ту ж рядок. Наприклад, наступна розмітка:
Верхні три елементи div, що мають клас «cell», визначаються в display: table-cell; і будуть відображені один за одним, як якщо б вони були в однорядковою таблиці, а останній елемент div не буде включено в ряд, оскільки він не належить до display: table-cell; .
Якщо елемент відноситься до display: table-row ;. в той час як його предок не визначений, як table (або table-row-group), буде створено анонімний елемент, віднесений до display: table; щоб включити в нього ряд і будь-які подальші родинні елементи, які також визначені display: table-row ;. Також, якщо елементу, визначеному як table-row. не вистачає елемента table-cell безпосередньо в ньому, буде створений анонімний елемент table-cell. щоб включити в нього всі елементи, певні як table-row.
Розглянемо на прикладі:
Верхні два елементи div, що мають клас «row», визначаються в display: table-row; і будуть відображені один під одним, як якщо б вони були рядами в одностолбцовой таблиці, а останній елемент div не буде включено в цю таблицю.
Аналогічно, якщо елемент віднесений до будь-якого іншого параметру display. підтримує елементи, які знаходяться прямо всередині батьківського табличного елементу, такі як table-row-group. table-header-group. table-footer-group. table-column. table-column-group і table-caption. але не має предка, опеределения як display: table ;. буде створено анонімний елемент table. щоб включити в нього елемент і будь-які подальші родинні елементи, з відповідними значеннями display.
Інші корисні атрибути таблиць
При використанні CSS таблиць, через те, що елементи відповідають звичайним правилам табличній розмітки, ви можете також застосовувати інші табличні CSS атрибути. Ось кілька з них, які можуть стати в нагоді:
Table-layout
Присвоєння table-layout значення fixed повідомляє браузеру, що таблиця повинна вопроізводіть по фіксованому алгоритму форматування ширини осередків. Це корисно в розмітці з фіксованою шириною, яку ми створювали раніше.
Border-collapse
Так само, як і зі звичайними HTML таблицями, ви можете використовувати атрибут border-collapse для вибору використовуваних кордонів між осередками таблиці розмітки з collapse або separate.
Border-spacing
Якщо ви задали значення separate для аттрибута border-collapse. ви можете використовувати атрибут border-spacing для завдання ширини простору між межами осередків.
Створення ідеальної сітки
Створення сітки з рівних по висоті елементів завжди було складністю при використанні традиційних технік CSS розмітки, але таблиці CSS дуже добре підходять для цього завдання. Наприклад, якщо ми хочемо створити галерею картинок, що складається з сітки зображень з назвами, схожу на ніжеізображенную, то використання CSS таблиць сильно полегшує завдання.
Код для нашої галереї виглядає так:
Кожна осередок зображення галереї містить елемент img і заголовка в елементі p, що знаходиться в div c класом «image». Кожен рядок міститься в div з класом «row», а вся галерея розташовується в елементі div c класом «grid».
CSS, необхідний для розмітки нашої сітки дуже простий:
Цей CSS досить простий, але ви можете помітити, як ми використовуємо атрибут border-spacing для управління розміщенням наших осередків зображень. Це найлегший спосіб створення сітки розмітки - і ми запобігли всі проблеми, пов'язані з рівними висотами або крихкими розмітками, створюваними за допомогою флоатед елементів.
Застосування прикладів на практиці
У цій статті були розглянуті основні приклади використання табличних параметрів CSS аттрибута display. службовця довгоочікуваної нагородою в боротьбі за створення надійних сіток розмітки з використанням CSS! Ми розібрали численні табличні параметри display. подивилися на природу анонімних табличних елементів і відкрили кілька корисних властивостей таблиць CSS.
Наступний крок за вами - в будь-якому випадку ви зрозуміли потенціал використання CSS таблиць для створення сіток розмітки і тепер згорає від цікавості. Використовуючи знання, отримані з цієї статті, ви можете почати експерименти зі своїми власними табличними CSS розмітками.