Чому верстати таблицями безглуздо:

визначимо проблему, запропонуємо шляхи розв'язання

Таблиці було введено у HTML з єдиною метою: для відображення табличних даних. Та потім атрибут border="0" дозволив дизайнерам використовувати таблиці як сітку для розміщення зображень і тексту. Використання таблиць усе ще залишається домінуючим способом розмітки візуально-багатих веб-сайтів, проте воно суперечить розвиткові кращого, більш доступного, гнучкого і функціонального інтернет-простору. Тож знайдемо корінь проблеми та запропонуємо рішення по створенню проміжної або, взагалі, безтабличної розмітки.

Приведіть свого шефа

Чи є в аудиторії "великі начальники"? Можливо вони у Seybold,але зараз на іншій презентації? Приведіть їх. Саме їм необхідно знати, як веб-стандарти можуть заощадити кошти компанії.

Огляд: що я з цього матиму?

Ми презентуємо Вам спосіб роботи, який

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

Також ми поговоримо про те, що розмітка із використанням каскадних таблиць стилів (CSS) вимагає трохи відмінного мислення про наповнення сторінки і про виділення, порівняно із способом, до якого ви звикли.

Убивці веб-сайтів: вкладені таблиці і ґіфи-розпірки

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

Та як і у випадку із будь-яким засобом на стадії його дитинства, ранній інтернет був естетично "незрілим" (і не тільки в плані привабливості для споживачів)допоки Девід Зігель (David Siegel) видав свою визначну книгу, де запропонував деякі блискучі методи обходу наявних обмежень у браузерах і специфікаціях W3C приблизно 1997 року (уявіть, мова про другий і третій Netscape!).

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

Проблеми пов'язані з використанням таблиць:

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

Ключ до порядунку у ваших руках

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

Замість використання вкладених таблиць і заповнення порожніх комірок ґіф-розпірками, ми можемо використовувати значно простішу розмітку і CSS для верстання чудових сайтів які будуть швидшими при завантаженні, простішими при переробках дизаюну і доступнішими для усіх.

Рішення: CSS і структурна розмітка

Завдяки використанню структурної розмітки в HTML-документах і каскадних таблицях стилів (CSS), ми можемо відділити фактичний зміст нашої сторінки від способу її представлення.

У цьому є де-кілька переваг над табличним способом верстання...

Переробки дизайну стають простішими і менш витратними

Із видаленням теґів оформлення, переробка дизайну вже існуючих сторінок та зміна їх наповнення стають значно менш працеємними (та значно менш витратними). Усе що Вам потрібно зробити для переоформлення сайту - замінити/змінити файл CSS; самі файли сторінок вам більше не потрібно редагувати взагалі.

Наприклад, подивіться сайт CSS Zen Garden, або спробуйте перемикачі стилів на сайті Еріка Мейєра (Eric Meyer). За більш докладною інформацією зверніться до сайту Альтернативні стилі Поля Соудена (Paul Sowden).

За трафік доводиться платити

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

Завдяки зменшеному розмірові файлів, сторінки швидше завантажуються та зменшуються витрати на хостинг.

Гей, усі ці сторінки схожі одна на одну!

Також використання веб-стандартів робить надзвичайно простим дотримання однакового стилю оформлення усіх сторінок сайту. Коли усі сторінки використовують для оформлення той самий документ CSS, вони форматуються однаково.

Це акцентує увагу на вашому бренді і робить сайт більш зручним для користувачів.

Напиши раз, використовуй завжди і для всіх

Дотримання веб-стандартів робить ваші сторінки набагато більш доступними для користувачів із вадами та тих, хто використовує для доступу в інтернет мобільні телефони та КПК.

Користувачам, які застосовують програми для читання з екрану монітору (як і тим, хто має повільне підключення) не потрібно продиратись крізь численні комірки таблиць та ґіф-розпірки, щоб добратись власне до вмісту сторінки.

Іншими словами відокремлення вмісту сторінок від коду оформлення робить Ваш сайт незалежним від типу пристрою, на якому його переглядатимуть.

Google сліпий

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

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

Але Ви можете використовувати таблиці якщо Вам це потрібно, головне не робити цього надмірно

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

Ось приємна на вигляд таблиця

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Що ж насправді ховається за приємною зовнішністю

		Насправді це можна було б зробити значно простіше.				Здогадайтесь який об'єм коду знадобився для створення цієї маленької таблички? 13.7 Кб. Тут 17 рядків і 9 колонок. І це ще я не казав про усі ті ґіфи-розпірки.
		Тут надто багато табличних комірок і розпірок.				А всі виділені крапками списки реалізовані за допомогою атрибуту background (тло комірки), які не є валідними (сторінка не пройде валідацію w3c). • Вкладена таблиця? Навіщо? • Для списку міченого крапками? Правда ж це жарт?
		Аналогічного результату можна досягти використанням усього 8 комірок і 4-х CSS інструкцій.				Серйозно. Вісім комірок і чотири CSS інструкції. Це все, що потрібно. • О, ні! Ще одна таблиця прикидається крапковим списком. • Невже не можна розмітити точковий список як точковий список, а решту лишити CSS?
		Вам потрібна лише одна інструкція для <table>, одна для <td>, одна для <ul> і одна для <li>.				Все! Зробіть лише це і Вам немає ціни! • Це краще ніж використовувати 8 зайвих комірок таблиці щоб зробити несправжній крапковий список, який до того ж є менш доступним для різних пристроїв і переглядачів вебу. • Нарешті! Останній пункт несправжнього списку.

Код, потрібний для структурування таблиці:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Тепер на багато краще

А ось CSS-код, який було застосовано для розмітки попередньої таблиці:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Підсумок по перехідному дизайну

Використовуйте поля (margin) і відступи (padding) замість ґіф-розпірок.

Використовуйте із стилями link та @import. Перше - для старих браузерів, друге - для сучасних.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Приклади сторінок із перехідним дизайном:

• Школа Монтессорі Санта Круза (Santa Cruz Montessori School)
• k10k
• Fox Searchlight Pictures

Чекайте, тут є більше:

Знайдіть більше інформації по перехідному дизайну в першому розділі книги Ерік Мейєр (Eric Meyer) про CSS, а ще більше у книзі Джефрі Зельдмана (Jeffrey Zeldman), Дизайн згідно веб-стандартів.

Верстання за допомогою CSS: майбутнє вже тут

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

Оформелння за допомогою CSS - справа абсолютно не складна, навіть для такого як я, який думає що більшість скриптів на JavaScript нагадує нецензурну лексику.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Кожна CSS інструкція складається із селектору (selector) та опису (declaration). Описи, у свою чергу, утворені властивостями (property) і їх значеннями (value). Назви властивостей складаються із двох слів, які пишуться через дефіс.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Структурна розмітка: кодуй так, як думаєш; думай так, як кодуєш

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

Замість мислення на зразок "це має бути тут, а це має бути тут", при роботі над макетом розмітки сторінки ми маємо думати про різновид інформації та про її структуру.

Найважливіші заголовки ми асоціюємо із теґом <h1>; підзаголовки - <h2>, і т.п.; параграфи при цьому асоціюємо із тегом параграфу.

Ось що розуміємо, коли кажемо про "структурну" або "семантичну" розмітку.

Замість того, щоб вставляти текстове наповнення у середину комірок таблиці, загорніть його в елементи div. Призначте Вашим div-елементам id або class які відповідатимуть їх змісту та/або функції, але не зовнішньому вигляду.

Уникайте поганої і примітивної розмітки

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

Коли Ви виділяєте текст курсивом, Ви хочете закцентувати увагу на певному слові, <em>, чи це назва книги, <cite>?

Коли щось виділено жирним (bold), у розмітці напевно це має бути виділино тегами <strong>.

Якщо Ви збираєтесь щось відділити вільним проміжком, ймовірно це має бути елемент "шапки". Якщо це не шапка сторінки, можливо це частина класу, який трапляється скрізь на сайті? Якщо це так, використовуйте CSS замість теґу <br>.

.foo {display:block}

Щоб дізнатися більше, читайте Bed and BReakfast markup (B&BR) by Tantek Çelik.

А як бути з меню?

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

Розташуємо їх в середині теґів <ul>:

• посилання1
• посилання2
• посилання3
• посилання4
• посилання5

Горизонтальні меню

Ми можемо використати CSS для того щоб контролювати вигляд цих списків на Ваших сторінках.

Використавши display:inline ми можемо побудувати горизонтальне меню.

Ось код, використаний для розмітки цього меню:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Вертикальні меню

Ось код, використаний для верстання цього меню:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Дізнайтесь більше, прочитавши статтю Марка Ньюхауза (Mark Newhous) Taming lists, у "A List Apart", і "Styling lists" у "CSS-Discuss wiki" .

Те, з чим таблиці впораються краще за CSS

З певними речима CSS не уміє поратись так само вправно, як те можуть таблиці.

Наприклад Ви маєте бічне меню чорного кольору, яке має тягнутись по усій висоті наповнення сторінки. Використавши табличне верстання досягти потрібного результату дуже просто. Потрібно лише прописати чорний колір тла у потрібному <td> теґу.

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

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

Крім того ми можемо викласти чорними ґіфками тло розділу (div) з основним наповненням і надати цьому розділові достатнього відступу зліва. Проте якщо меню виявиться довшим за основний розділ з наповненням, цей спосіб теж не буде працювати.

Інший спосіб вирішення проблеми - викласти чорними ґіфками тло нашого <body>, Це гарний спосіб, проте Ви не зможете використати інший малюнок у якості тла для <body>.

Або ми можемо огорнути основний розділ в "обгортковий" div та вимостити ґіфками його тло. Проте це додасть несемантичного забарвлення нашій розмітці.

І, звичайно, замощення тла ґіфками взагалі не буде працювати, якщо Ви бажаєте щоб ширина Вашого меню була змінною.

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

Мігруючи від табличних хаків до веб-стандартів: загальна картина

Перше, Вам потрібно визначитись із стратегією міграції. Ви збираєтесь мігрувати перевівши увесь сайт повністю за раз, чи збираєтесь це робити поступово, секція за секцією?

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

Визначте типи наповнення/інформації, присутні на Вашому сайті:

• інформація про товар
• інформація про ціни
• інформація про наповнення
• портфоліо
• послуги, що пропонуються
• інформація про/для інвесторів
• картки покупок
• форуми користувачів
• і т.п.

Розбиваємо Ваші сторінки

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

• Головне меню
• Суб-меню
• Заголовки і підвали
• Основне наповнення
• Споріднена інформація
• Інше

Проаналізуйте табличну структуру сторінки з метою виявлення вкладених таблиць, пустих комірок, використаних для утворення відступів і рамок (Ми хочемо замінити їх на div-теґи, або на значно простішу табличну структуру.

Погляньмо на Вашу розмітку

Після аналізу структури Ваших сторінок, прийшов час визначити елементи HTML-розмітки, які можуть бути замінені на розмітку структурну.

• Заради любові до усього справжнього і гарного, позбавтесь від теґів <font> і GIF-розпірок!
• Так само знищте <b> і <br> теґи.
• Позбавтесь від атрибутів оформлення таблиць (bgcolor, background, і тому подібне).
• Замініть CSS код, що носить характер виключно оформлювальний (щось на кшталт <span class="header">) на відповідну структурну розмітку. (Tantek Çelik описує більш детально у своїй статті, A Touch of Class.)

Замінюєм теґи оформлення на структурну розмітку

Ви можете використати "знайти і замінити" (і регулярні вирази), проте простіше буде відкрити сторінку у браузері і шляхом копіювання і вставки перенести текст у Ваш редактор HTML.

Думайте про структуру документу! Простої заміни теґів <b> на <strong> не достатньо.

Де найважливіший заголовок? Позначте його теґом <h1> tag. Підзаголовки позначте теґами <h2> і так далі. Позначте параграфи теґами <p>. Оформте Ваші меню у вигляді списків..

Виберіть DOCTYPE і дотримуйтесь його. (Ми рекомендуємо використовувати перехідний XHTML, якщо Ви не із міцних горішків, тоді використовуйте суворий XHTML.)

Розділіть сторінку на логічні розділи, використавши теґи div

Розташуйте Ваше головне меню у div-розділ з id назва якого mainnav; розташуйте підменю всередині div-розділу, id або class якого subnav; розташуйте Ваш підвал в <div id="footer">, а наповнення (контент) вкладіть у <div id="content">.

Це може здаватися незвичним, проте відколи Ви почнете додавати CSS-правила, справи швидко покращаться.

Час почати писати Ваш CSS

Спочатку зробіть межу кожного div-розділу видимою. Наприклад, div {border:1px dotted gray; padding:.5em} Це допоможе Вам бачити де розділи починаються і де закінчуються, а також чи є, чи не має вкладених розділів.

Спочатку напишіть Ваш CSS для елементарних селекторів (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, і т.п.)

Використовуйте контекстні та наслідувані селектори завжди, коли можна. Це зробить розмітку більш чистою. Наприклад, #subnav li{border:1px solid black; padding:.5em; display: inline} спрацює лише зі списками "list", які знаходяться в середині розділу div головного меню.

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

Приклади сайтів, оформлених за допомогою CSS

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Прочитайте все по темі

Природно, що ми не можемо охопити всього, що Вам потрібно знати про розробку з CSS, вклавшись у годину, та наступні книжки зможуть помогти Вам легшими, чистішими і швидшими.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Книжки? Нам не потрібні гори паперу: сайти в студію!

CSS-дискусії

• Список розсилки: дуже активний, дуже корисний.
• Вікі: "Крім усього іншого, вікі служить колективною довготривалою пам'яттю багатьох людей." Хочете зробити так, щоб Explorer для Windows коректно показував Ваші сайти, але при цьому скористатися усією потужністю інших, кращих за нього браузерів? Ви зможете прочитати про це та про багато іншого тут.
• Архіви: Загнані проблемою з CSS у глухий кут? Спокійно, хтось колись з такою проблемою вже стикався і отримав допомогу. Шукайте відповіді тут.

zeldman.com Щоденний звіт: цікаві, провокуючі до мислення і у гарному стилі написані тексти з посиланнями, що публікуються регулярно.

A List Apart для людей, які верстають веб-сайти

• Приручаємо списки, Марка Ньюхауза (Mark Newhouse). Необхідне джерело інформації для семантичного верстання Ваших меню і навігації.
• CSS: Підготовка до друку, Еріка Мейєра (Eric Meyer). Вам більше не знадобиться робити "версію для друку".
• Альтернативний стиль: Робота з альтернативним стилем таблиць, Поля Соудена (Paul Sowden). Дозволить відвідувачам Вашого сайту самім вирішувати, як сторінка буде відображена.
• Використання XHTML та CSS для ефективної розкрутки в пошукових системах, Брендон Олежнічек (Brandon Olejniczak). Структурна розмітка також допоможе Вам сягнути кращих рейтингів у пошукових системах.

Проект "Веб-стандарти" Дякую Богові за цих людей.

Підручник CSS "A guide for the unglued" Містить чудову сторінку посилань.

Техніка верстання з CSS: приємне з корисним Приклади розмітки від Еріка Костелло (Eric Costello), які Ви можете використовувати. Також джерела і приклади використання.

Справжній всесвітній стиль CSS верстання, види, трюки і способи від Марка Ньюхауза (Mark Newhouse).

Ділова вигода від веб-стандартів Добра новина для "людей у дорогих костюмах". До презентацій стандартів у цьому вигляді прислухаються MBA.

Дякуємо за увагу. Питання є?