Основні способи верстки. Частина перша: таблиця

1. Особливості
2. імітація
3. семантичного
4. Ширина
5. гнучкість
6. Висота
7. розкладка

Для професійного оформлення сайтів необхідно знати не тільки основи CSS, але і розуміти, як працює браузер, знати правила, яких він іде. Саме вони визначають основні способи і прийоми верстки.

Тільки маючи таке розуміння, можна вибрати найбільш підходящий спосіб вирішення завдання з декількох можливих, з урахуванням їх достоїнств і обмежень. Тільки так можна найбільш повно задіяти можливості браузера і попередити потенційні помилки.

Існує чимало описів різних прийомів. У цій статті зроблена спроба зібрати разом найважливіші прийоми і систематизувати їх, щоб дати уявлення як про основні можливості, так і про обмеження CSS, актуальних в даний час.

Стаття розрахована на людей, які знайомі з основами HTML і CSS і мають уявлення про основні властивості і базових принципах роботи каскадних таблиць стилів.

Історично, першим і єдиним способом розкладки сторінки були таблиці. Опису поведінки таблиць присвячена ціла глава в специфікації CSS 2.1. Незважаючи на такий обсяг, деякі моменти описані бідно або взагалі не визначені і віддані на розсуд браузерів.

Таблиця служить для відображення впорядкованих даних в рядках і стовпцях, що мають смислове зв'язок по горизонталі або вертикалі. Звідси випливає головна перевага: осередки таблиць вирівнюються по сітці, що дозволяє простим і очевидним чином створити модульну сітку.

Це невід'ємна властивість таблиць дозволяє заповнити площину вікна браузера і створювати «гумові сайти». Але, як при малих, так і великих розмірах вікна перегляду браузера структура таблиці не змінюється, вона не може гнучко адаптуватися під доступне простір.

При використанні таблиці для розкладки, тобто розміщення в сітці даних, які не мають смислового зв'язку, порушується семантичного. Застосування таких таблиць погіршує доступність для людей, що використовують спеціальні програми, і знижує становище в пошуковій видачі, оскільки пошуковому движку, імовірно, складніше розібратися в структурі сторінки. Як наслідок, сайт працює менш ефективно.

Особливості

Осередки таблиць йдуть в коді строго один за одним, зліва направо або справа наліво в залежності від напрямку мови, заданого CSS-властивість direction або його аналогом в HTML, атрибутом dir.

Якщо, наприклад, потрібно, щоб основний вміст в центральній колонці йшло на початку, перед вмістом інших колонок у вихідному HTML-коді, таблиця - невідповідний рішення.

Структура таблиці досить складна, вона описується великою кількістю тегів, що призводить до ускладнення вихідного коду. Негативний ефект проявляється ще більше, коли кілька таблиць вкладені одна в одну.

імітація

Розгромна замовна стаття в CSS 2.1 група властивостей display: table- * дозволяє створити таблицю з довільних елементів, що мають відповідну структуру.

Згідно зі специфікацією, досить тільки одного оголошення на кшталт display: table або display: table-cell - відсутні елементи повинні автоматично добудовуватися браузером.

Однак буде надійніше створити мінімальну структуру таблиця> ряд> осередок, аналогічно обов'язковим тегам <table>, <tr>, <td>, з відповідними значеннями властивості display: table, table-row і table-cell.

В іншому випадку може виникнути нерегулярно виявляється помилка, помічена в Firefox і браузерах на основі Webkit, коли ряд таблиці без елемента з display: table-cell випадковим чином розбивається на кілька осередків. Можливе пояснення може полягати в попаданні кордону мережевих пакетів серед осередків при передачі HTML-коду.

Таким чином, блокова розмітка з display: table- * майже не відрізняється від звичайної HTML-таблиці ні в чому, крім імен тегів, однак звичайна таблиця краще підтримується браузерами (а саме в Internet Explorer 7 і нижче) і має більше можливостей, таких як об'єднання осередків.

Варто відзначити, що, незважаючи на необов'язковість тега <tbody> в HTML, браузер обов'язково створить цей елемент, якщо тільки документ не обробляється в режимі XHTML, при відсутності группирующих елементів <tbody>, <thead> і <tfoot>. Цим можна користуватися при оформленні, і обов'язково слід мати на увазі при використанні батьківського селектора, який може мати запис виду table> tbody> tr> td. Селектор table> tr> td працювати не буде.

Анонімні елементи при display: table- *, що відтворюють структуру таблиці згідно CSS 2.1, не впливають на дерево елементів. Їм не можна задати CSS-правила, діють тільки успадковані властивості.

семантичного

Існує думка, що використання display: table більш семантично, так як використовуються теги, краще відповідні вмісту, і це допоможе різним движкам в обробці сторінки. Нерідко при цьому наводяться як приклад програми читання з екрану.

Однак є дослідження , Які показують, що деякі такі програми враховують оформлення сторінки і сприймають елементи з display: table точно так же, як і звичайну таблицю, розмічену стандартними тегами. Проте такий спосіб має право на існування, коли використання тегів таблиці недоречно.

Рекомендується використовувати методи WCAG для семантичного оформлення таблиць, задіюючи додаткові можливості розмітки, такі як короткий опис за допомогою тега <caption> або атрибута summary і вказівка ​​області дії заголовків <th> атрибутом scope.

Ширина

Ширина таблиці, будучи не задана, розраховується браузером з урахуванням вмісту. Якщо ширина таблиці менше ширини батьківського елементу, таблиця може бути отцентрирована за допомогою властивості margin: auto або вирівняна по лівому або правому краю.

При table-layout: auto (значення за замовчуванням) ширина таблиці розраховується так, щоб помістилося все її вміст. Якщо ширина елемента, в якому знаходиться таблиця, недостатня, вона вийде за його межі.

Це може привести до появи горизонтальної прокрутки на сторінці навіть тоді, коли здавалося б достатньо місця, через занадто довгого слова (наприклад, якийсь інтернет-адреса) або широкого зображення.

В CSS 2.1 не визначене дію властивостей min-width, max-width, min-height і max-height на елементи таблиці.

Так як осередок не може мати ширину меншу, ніж дозволяє її вміст, замість min-width можна використовувати досить широку «розпірку». Для цього можна використовувати порожній блок потрібної ширини.

Із застереженням, про яку буде сказано далі, обмежити ширину осередку може завдання властивості width. Цей спосіб працює в сучасних браузерах, включаючи Internet Explorer 8 і навіть в старших версіях Internet Explorer в режимі Internet Explorer 7, але не в цьому браузері Internet Explorer 7. Це один з тих випадків, коли поведінка в режимі емуляції відрізняється від справжньої версії браузера.

Ширина комірки може не відповідати визначеним значенням в тому випадку, коли задана для всієї таблиці ширина не дорівнює сумі заданих ширин всіх осередків, або їх сума не дорівнює 100%. Тоді доступне місце розподіляється серед осередків пропорційно значенням їх ширини.

Відповідно до стандартної блокової моделлю CSS ширина осередку задається по області вмісту, виключаючи товщину рамки і величину відступу (padding). Однак, якщо ширина колонки таблиці встановлюється через елемент <col> або <colgroup>, то вона задається вже з урахуванням ширини рамок і відступу осередків.

гнучкість

Однією з переваг є те, що таблиця дозволяє гнучко управляти співвідношенням ширини колонок через процентні значення. Ширина осередків при цьому враховує розмір вмісту.

Примітним властивістю таблиці серед можливостей CSS 2.1 є можливість встановити таку ширину осередку, яка залишилася їй доступна від інших осередків в ряду.

Висота

За специфікації властивість height задає тільки мінімальну висоту комірки. Якщо з шириною осередків браузери слідують моделі CSS, то установку висоти комірки різні браузери трактують по-різному.

Firefox до 15-ї версії і Opera до 12-го включно вважають висоту разом з відступом і рамкою, іншими словами, поводяться як при box-sizing: border-box, що відповідає поведінці в режимі зворотної сумісності (Quirks Mode).

Internet Explorer версії 8 і вище і браузери на основі WebKit задають висоту тільки для вмісту аналогічно box-sizing: content-box, що є правильною поведінкою з точки зору моделі CSS.

На поточний момент властивість box-sizing впливає на завдання висоти комірки тільки в браузері Internet Explorer. А Firefox до 16 версії не брав до уваги box-sizing навіть для ширини комірок таблиць.

розкладка

жорстка

При table-layout: fixed ширина осередків таблиці задається безпосередньо, або рівномірно розподіляється серед колонок. Таблиця втрачає можливість автоматичного розрахунку ширини з урахуванням заповнювання осередків. Переповнення осередків обробляється відповідно до значення властивості overflow. Специфікація залишає браузерам можливість завжди використовувати цей режим. Його можуть застосовувати мобільні браузери, обмежені в ресурсах для складної обробки таблиць.

автоматична

При table-layout: auto вміст не може вийти за межі осередку, і властивість overflow не має дії. При цьому не може бути примушений таблицю завжди залишатися в заданих рамках. Через автоматичного розрахунку ширини, вона не зменшиться, навіть якщо є overflow: hidden у елемента з невизначеною ширина