Переваги та недоліки таблиць

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

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

Переваги таблиць

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

Створення колонок

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

«Резиновий» макет

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

«Склейка» зображень

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

Фонові зображення

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

Вирівнювання елементів

Вміст комірок можна одночасно вирівнювати по горизонталі та по вертикалі, завдяки чому розширюються можливості по розміщенню елементів відносно один одного та на сторінці в цілому.

Особливості браузерів

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

Недоліки таблиць

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

Тривала завантаження

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

Існують способи обійти цю властивість, зокрема, розбиття однієї великої таблиці на кілька менших таблиць, а також використання стилевого властивості table-layout.

Важкий код

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

Погана індексація пошуковими системами

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

Відсутність розділення вмісту та оформлення

В ідеалі HTML-код повинен містити лише теги з вказанням стилевого класу або ідентифікатора. А всі оформлення, наприклад, колір тексту та положення елемента, виводиться в CSS та модифікується окремо. Таке розділення дозволяє незалежно редагувати код сторінки та змінювати вигляд окремих її елементів. Хоча до таблиць стиль легко додається, але велика кількість «зайвих» тегів не дозволяє дійсно просто та зручно управляти виглядом окремих компонентів сторінки. Крім того, не всі параметри таблиць мають свій стилізований синонім, тому в будь-якому випадку доводиться звертатися до коду веб-сторінки та змінювати його.

Невідповідність стандартам

Останнім часом стандарти HTML та CSS тісно засіли у свідомості веб-розробників. Цьому сприяє розвиток XHTML та XML, які більш «жорстко» ставляться до коду документа, поява нових версій браузерів, що дотримуються специфікації, а також мода на верстку шарами.

Що ж каже специфікація щодо таблиць? Вона говорить, що таблиці в першу чергу потрібні для розміщення табличних даних. Всі інші способи використання таблиць засуджуються.

Застосування таблиць для верстки

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

Висота колонок повинна бути однаковою

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

Макет повинен займати всю висоту вікна браузера, незалежно від обсягу інформації

За допомогою таблиці можна досягти ефекту, що нижня частина сторінки («підвал») вирівнює