Таблична верстка, HTML
Таблиці, які спочатку проектувалися як засіб представлення двовимірних масивів даних, зараз використовуються переважно як інструмент для точного позиціонування контенту на веб-сторінці. Стандарт HTML не передбачає можливості розташувати картинки та текст відносно один одного з прийнятною точністю, а таблична верстка, при якій різні частини контенту поміщаються в різні осередки таблиць, здатна вирішити цю проблему. Крім того, таблична верстка дуже корисна при проектуванні сайтів з великою кількістю графічних елементів: у великих малюнках майже завжди можна виділити області, зафарбовані тим самим кольором, які можна викинути, замінивши на порожні осередки з відповідним фоном і заощадивши таким чином на загальному. вазі» графіки та часу завантаження сторінок. Це, звичайно, не єдина перевага згаданого способу верстки. До недоліків його можна віднести той факт, що деякі браузери (не показуватимемо пальцем) не в змозі відобразити на екрані вже завантажені частини поміщеного в таблицю контенту доти, поки не завантажиться вся таблиця повністю. Вони ж (згадані браузери) чомусь дуже повільно працюють із вкладеними таблицями. А тому скажемо дружно, що Нетскейп є не що інше як погань, гидоту та породження Сатани. Незгодних попрошу піти.
Іноді дизайнер відчуває непереборне бажання використовувати як фон таблиці якийсь малюнок. Не будемо зараз говорити про те, добре це чи погано. Йому так захотілося.
І ось картинка підготовлена, оптимізована та прописана у параметрі background. Щасливий розробник вирішує для перевірки запустити Нетскейп, щоб переконатися, чи все чудово виглядає, як запевняв Internet Explorer. Не тут то було!
Порожній атрибут background внутрішньої таблиці змушує Нетскейп не відображати у ній фон, вказаний у зовнішній. Хто знає, хто саме писав відповідний шматок коду для Нетскейпа? Скажіть мені, я дуже хочу побачити чесні очі цієї людини.
Створення таблиць із бордюром в 1 піксел
Створимо найпростішу таблицю з бордюром в один піксел, що містить лише одну комірку. Ось код:
Видно, що товщина бордюру чомусь дорівнює двом пікселам. На жаль, більш-менш пристойного способу боротьби з цією дурістю поки не придумали, а тому доводиться робити все по-дурному. Але працюватиме. Ось таблиця з бордюром завтовшки в один піксел:
Як можна помітити, завдання знову вирішується з допомогою вкладених таблиць. В даному випадку для зовнішньої таблиці задане чорне тло і параметр cellpadding встановлений в одиницю при нульовому бордюрі, тобто те, що ми бачимо, насправді не бордюр, а краєчок фону.
На завершення розмови про таблиці сформулюю кілька правил, яких варто дотримуватись під час розробки дизайну, що базується на табличній верстці.
1. Вказуйте ВСІ розміри таблиць та їх осередків.
Width і height мають бути жорстко задані як самої таблиці, так осередків, які її становлять. Цього принципу краще дотримуватися першого ж дня. Повірте на слово: коли ви верстаєте більш-менш складну сторінку хоча б з десятком-другим картинок, краще відразу вказати всі розміри, інакше потім доведеться довго і нудно повзати за кодом, намагаючись визначити, який саме осередок змушує «поїхати» весь дизайн. До речі, це стосується і всіх картинок, що поміщаються в таблиці.
2. По можливості вказуйте всі розміри у пікселах, а не у відсотках
Якщо ви використовуєте гумовий дизайн, від цього правилаіноді можна відступати, і то тільки в тих випадках, коли ви задаєте, скажімо, ширину колонок, які повинні суми займати весь екран. Пам'ятайте, що при масштабуванні документа або навіть при звичайній зміні вікна браузера ваші відсотки можуть набути несподіваних значень, і дизайн розвалиться.
3. Використовуйте розпірки.
Наш улюблений Нетскейп ніколи не втрачає можливості пожартувати. Якщо дизайнер створює комірку таблиці, навіть ставить її розміри, але не поміщає туди контент (або контент не займає всю комірку), Нетскейп вважає себе вправі надходити з розмірами комірки як заманеться, а іноді й зовсім «сплескує» її. Щоб уникнути цього лиха, створіть прозору картинку формату .gif розміром 1х1 піксел і вставляйте її в порожні комірки, вказуючи відповідний розмір. Завдяки такій «розпірці» таблиці виглядатимуть так, як задумано.
4. Вказуйте нульову товщину бордюру для всіх картинок у таблиці.
6. Розривайте теги.
Якщо поставити поруч дві картинки і написати тег img для кожної з них в окремому рядку, вийде:
А все тому, що ми зробили так:
Тепер спробуємо розірвати один із тегів:
В результаті отримуємо зовсім іншу картину:
А все тому, що браузер сприймає перенесення рядка і пропуск однаково: для нього це whitespace, в найпростішому випадку - пропуск. Ось він і ставить прогалину між двома картинками.
При використанні табличної верстки крихітна помилка в коді перенесення рядка, що стоїть як би саме там, де йому може бути змусити «поїхати» всю композицію. Майте на увазі. 😉