Почему верстать таблицами глупо:

определим проблему, предложим решения

Таблицы были введены в HTML по простой причине: нужно было как-то показывать табличные данные. Но позже, аттрибут border="0" дал дизайнерам возможность использовать их как сетку для расположения картинок и текста. Оставаясь доминантным способом создания богато-оформленных веб-сайтов, использование таблиц противоречит современному стремлению к созданию лучшей, более доступной, гибкой и функциональной «Всемирной Паутины». Понимание основ этой проблемы помогает изучить способы создания переходной или полностью бестабличной вёрстки.

Приведите своего начальника

Среди слушателей есть одетые в «элитные костюмы»? Здесь ли в Seybold ваше начальство? Раскладывают пасьянс на ноутбуке? Ведите их сюда! Они именно те люди, кому надо знать как веб-стандарты могут сэкономить средства вашей компании.

Обзор. Что же в этом для меня?

Мы дадим вам основы способа работы который

Мы также поговорим о том как вёрстка страниц с использованием CSS (Cascading Style Sheets; Каскадных таблиц стилей) потребует то вас иного стиля мышления о вашем контенте и тегах HTML к которым вы могли привыкнуть.

Убийцы веб-сайтов: вложенные таблицы и прозрачные картинки.

В начале своего развития Интернет выступал средством хранения и обмена информацией для работников науки, сферы образования и военных. Но предприимчивым провидцам не понадобилось много времени для того, чтобы понять перспективы интернета как идеальной среды для продажи всего и вся, от свежих продуктов и еды для собак до старых автомобилей и репортажей со спортивных событий.

Разумеется, как любое средство обмена информацией в его младенчестве, ранний Интернет был эстетически «недозрелым» (и не только в плане притягательности потребителя) до того как Давид Зигель (David Siegel) не опубликовал книгу предложившую выдающиеся решения для обхода ограниченности существующих браузеров и W3C спецификаций 1997 года. (только представьте себе - это была эра Netscape 2 и 3!)

Эти решения были столь замечательны, что даже сейчас остаются главными методами вёрстки веб-страниц. Прозрачные картинки повсеместно используются как распорки многочисленных невидимых таблиц образующих опорную сетку для вёрстки контента.

Проблемы из-за использования таблиц:

Спасение в наших силах

Современные браузеры намного лучше работают с веб-стандартами, мы не обязаны больше использовать архаичные методы.

Вместо использования вложенных в таблицы таблиц и заполнения ячеек прозрачными картинками мы можем использовать простейшую разметку HTML и CSS для вёрстки наших замечательных сайтов, которые будут проще редактироваться, быстрее загружаться и будут доступны в любых условиях.

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

Используя структурную разметку в HTML документах и CSS для вёрстки элементов страниц мы можем хранить фактическое содержание страниц отдельно от описания способа их отображения.

Это имеет несколько преимуществ перед таблицами...

Переоформление легче и дешевле

Удалив теги оформления из ваших страниц, изменять дизайн и наполнять ваши сайты становится менее трудоёмкимболее дешёвым) занятием. Всё что нужно для переоформления сайта - заменить CSS файл;  вам совсем не нужно редактировать сами файлы страниц.

Для примера взгляните на сайт CSS Zen Garden, или попробуйте переключатель CSS на Сайте Эрика Меера (Eric Meyer) (о том как сделать подобное можно прочитать в статье Альтернативный Стиль Пауля Соудена (Paul Sowden)).

Уменьшаем счёт за трафик

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

Уменьшенние размера сайтов означает быструю загрузку и меньшую стоимость услуг хостинг-провайдера.

Эй, все эти страницы выглядят похоже!

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

Это помогает акцентировать стиль вашего бренда и делает ваш сайт более понятным и удобным для посетителей.

Создай однажды и используй повсюду

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

Другие посетители, использующие программы чтения вслух с экрана (а еще и обладатели медленных модемов) не будут с трудом пробираться сквозь бесчисленные табличные ячейки и хитрые прозрачные картинки чтобы получить реальное содержимое ваших страниц.

Другими словами, отделение информационного содержимого от команд оформления делает вашу информацию платформо-независимой.

Google слеп

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

Вы можете использовать таблицы если это необходимо.

Главное правило: не использовать их слишком часто.

Это даст посетителям (и боссам), до сегодняшнего дня ограничивающих себя использованием четвертых версий браузеров, приемлимое представление об оформлении страницы видимом остальным пользователям.

Пример обычной, достаточно опрятной таблицы.

Кадр 1 В лесу родилась ёлочка, в лесу она росла, зимой и летом стройная, зелёная была.
Кадр 2 Метель ей пела песенку: "Спи ёлочка, бай-бай". Мороз снежком укутывал: "Смотри не замерзай"
•  Актёры "мороз" и "метель" танцуют вокруг ёлочки.
•  Освещение и декорации имитируют смены дня и ночи.
Кадр 3 Трусишка зайка серенький под ёлочкой скакал... Порою волк, сердитый волк, рысцою пробегал.
•  Возможности имитировать мелкого зайца нет.
•  Достаточно будет представить погоню волка за зайцем который копошился около ёлочки.
Кадр 3 и финал вступления Чу! Снег по лесу частому под полозом скрипит. Лошадка мохноногая торопится, бежит. Везёт лошадка дровенки, на дровнях - старичок. Срубил он нашу ёлочку под самый корешок. Теперь она нарядная на праздник к нам пришла и много, много радости детишкам принесла.
•  К ёлочке подъезжает пони с тележкой и "мужичком".
•  Далее сцена поворачивается и показывает наряженную ёлочку и имитацию новогоднего праздника.

Копнём поглубже

Это можно было сделать намного проще Угадайте, сколько разметочного кода в этой небольшой таблице? 13,7 Кбайт! В ней 17 строк и 9 колонок. Я не говорю о том сколько тут прозрачных картинок!
Здесь непростительно много ячеек и прозрачных картинок. Кроме того, точечные разделители ячеек выложены с использованием аттрибута background, который не везде действителен
•  Первая вложенная таблица. Зачем?
•  Сделать список с метками? Надеюсь это шутка?
Точно такую же картину можно получить используя всего 8 ячеек и 4 CSS инструкции! Серьёзно говорю, всего 8 ячеек и 4 инструкции вместо этого мусора.
•  О нет! Еще одна таблица замаскированная под список с метками!
•  Списки надо размечать как списки и дать CSS возможность сделать остальное оформление.
Нужна одна инструкция для <table>, одна для <td>, ещё одна для <ul> и последняя для <li> И это всё! Один раз написать этого хватит чтоб оформить так-же все остальные таблицы!
•  Получится намного лучше чем тратить 8 ячеек на создание обманного списка с метками, который при этом еще и создаёт трудности для с точки зрения удобства использования.
•  Ура!!! Последний ложный элемент!

Добавим CSS. Уже намного лучше!

намного лучше Угадайте, сколько кода разметки в этой таблице? 2,1 Кбайта! Здесь 4 строки и две колонки. Здесь нет ни одной прозрачной картинки!
только так и надо Все эти бордюры заданы правилами CSS. Это будет работать в любой ситуации. Точно такие же бордюры будут на бумаге если страницу напечатать.
  • Теперь это элементы списка
  • Какими они и были задуманы
Это всё сделано в восьми ячейках с помощью четырёх CSS инструкций. Мы не шутим, 8 ячеек, 4 инструкции и больше ничего не надо.
  • Маркированые списки выглядят отлично
  • Почему люди не делают их так просто и не оставляют оформление на долю CSS?
Вам нужны правила для тегов <table>, <td>, <ul> и <li>. И всё. Любую таблицу можно будет оформить так-же не задумываясь.
  • Мы любим нормальные маркированные списки!
  • Отлично! Больше нет здесь фальшивых строк!

Ну и наконец, 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 }

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

Используем CSS аттрибуты margin и padding вместо лишних ячеек и распирающих их прозрачных картинок.

Используем команды link и @import для связывания разных CSS файлов и страниц. Первая предназначается для старых браузеров, вторая - для более современных.

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

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

Реальные примеры переходного дизайна:

Если хотите узнать побольше:

Вы можете прочесть о переходном дизайне в первой главе книги Эрика Меера (Eric Meyer) про CSS. Еще больше можно найти в книге Джефри Зейдельмана (Jeffrey Zeldman) Дизайн по веб-стандартам (Designing with Web Standards).

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> и подобными, параграфы, разумеется, тегами параграфов <p>.

Такой подход и называют «структурной» или «семантической» разметкой.

Вместо размещения информации внутри таблиц и разбиения её на ячейки, она предполагает использование тегов div обозначенных по-смыслу содержимого аттрибутами id или class.

Избегайте разметки примитивными тегами

В жизни слова «bed and breakfast» обозначают гостиницы, предоставляющие завтрак в дополнение к вашему ночлегу. Применительно же к веб-дизайну словами «<b>ed and <br>eakfast» называют приметивнейшие средства разметки веб-страниц.

В работе необходимо думать о том почему вы хотите отобразить текст определённым образом; что это будет обозначать? Ваша разметка может и должна следовать за смыслом, даже для тех кто не смотрит на оформление страницы. Структурная разметка делает страницы более доступными для всех, в том числе и для поисковых роботов.

Думаете о наклонном шрифте потому что хотите акцентировать фрагмент выделив его тегом <em>, или потому что хотите процитировать название книги тегом <cite>?

Подумав же о полужирном шрифте, вы скорее всего сделаете ударение тегом <strong>.

Если вы хотите разорвать абзац переносом строки, вам возможно нужен тег заголовка. И даже если это не заголовок а часть повторяющегося стиля оформления, то почему бы не оформить всё с помощью CSS взамен ненужных тегов <br>?

.foo {display:block}

Если вам интересно узнать больше - обратите внимание на статью Bed and BReakfast markup (B&BR).

То, что таблицы делают лучше CSS

Некоторые вещи в разметке нельзя проделать в CSS так же просто, как с использованием таблиц.

Для примера - черную полосу навигации шириной во всю страницу, какая бы она не была. С табличной разметкой это пара пустяков: приписать нужной ячейке <td> чёрный цвет фона.

Давайте подумаем как это возможно сделать с помощью CSS...

Во-первых можно дать div, содержащему навигационную панель чёрный цвет фона. Проблема в том, что при этом цвет будет установлен только на высоту содержимого панели. На большинстве страниц, где содержимое длинее навигации этот способ не будет работать.

Во-вторых, мы можем попробовать выложить чёрным рисунком (в GIF формате) div, содержащий содержимое и добавить ему достаточно пустого пространства слева (padding-left:Npx) для наложения на него полосы навигации. Этот приём не будет работать когда навигация длиннее содержимого...

Особый путь для решения такой проблемы - установка необходимого фона с чёрной полосой для тега <body>, который будет виден на всей высоте страницы если вы только не будете перекрывать фон другими рисунками или цветом.

Мы также можем использовать "рабочий" div и застилать его фоном, не затрагивая тег <body>, но это будет являться отступлением от семантической разметки добавляя ненужный элемент кода.

И разумеется, любые решения с подложенным фоновым рисунком не станут работать если вам необходима навигация с переменным размером.

В общем, как мы уже сказали, есть такие задачи, в которых табличное решение имеет свои преимущества, но на наш взгляд каждый должен решать - стоят ли визуальные ухищрения того чтоб вводить таблицы для вёрстки?

Мигрируем с табличных приёмов к веб-стандартам: общий план

Выберите стратегию миграции. Будете ли вы изменять целый сайт сразу или вы планируете изменять его постепенно, по-секциям?

Выберите секции и страницы, от перевода которых к веб-стандартам вы получите наибольший выигрыш. Домашние страницы, анонсы продукции или другие изменяемые и похожие страницы это подходящее место чтобы начинать.

Идентифицируйте типы информации на вашем сайте по категориям

  • Информация о продуктах
  • Цены
  • Информация о компании
  • Портфолио работ
  • Предлагаемые сервисы
  • Информация для инвесторов
  • Корзина покупок
  • Форумы пользователей
  • и подобным

Расщепляем ваши страницы

Как только вы определили структуру информации на вашем сайте приходит время проанализировать существующие страницы на предмет выявления их логических элементов...

  • Главная навигация
  • Навигация раздела
  • Верхний и нижний шаблоны, заголовок и завершение
  • Текст, содержимое
  • Дополнительная информация
  • Другое

Анализируйте структуру таблиц на вашем сайте. Есть ли у вас вложенные таблицы и ячейки-распорки? Всё это должно быть заменено тегами div или более простой табличной сеткой.

Копайте глубже. Код HTML

После анализа структуры страниц просмотрите внимательно текущую HTML разметку ваших страниц. Выделите презентационные теги, которые должны быть заменены структурными.

  • Для чистоты и здоровья избавьтесь от тегов <font> и не используйте больше прозрачные картинки!
  • Уберите также все <b>, <br> элементы.
  • Вычистите презентационные аттрибуты у таблиц (bgcolor=, background=, и им подобные).
  • Замените чисто презентационный CSS код (например <span class="header">) соответствующим структурным. (Tantek Çelik описывает это детально в колонке A Touch of Class.)

Замените презентационные теги структурной разметкой

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

Думайте больше о структуре документа! Не стоит обходиться простой заменой <b> тегов на <strong>.

Какой заголовок страницы наиболее важен? Пометьте его тегом <h1>. Используйте тег <h2> для всех подзаголовков и т.п.. Обрамите свои параграфы тегом <p>. Создайте панели навигации как ненумерованные списки.

Желательно выбрать DOCTYPE для HTML и использовать его. (Мы рекомендуем "XHTML transitional", если вы не из тех специалистов, которые могут совладать с "XHTML strict")

Разделите свои страницы на логичые div-блоки

Поместите главную навигационную панель в div указывая идентификатор (например id="mainnav"); разместите навигацию подразделов внутри div c другим аттрибутом id или указав аттрибут class, начните текст нижнего шаблона страницы тегом <div id="footer">, а основное содержимое тегом <div id="content">.

Да, это не выглядит так как прежде, но когда вы начнёте добавлять правила в свою таблицу стилей ваша страница будет выглядеть лучше и лучше.

Пришло время писать CSS

Для начала, дайте каждому div бордюр. Например div {border: 1px dotted gray; padding: .5em} Это поможет вам видеть где они расположены и как вложены друг в друга.

Напишите CSS правила для элементов <html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, и подобных.

Используйте контекстные или наследуемые селекторы CSS где это возможно. Это поможет сохранить разметку более простой. Для примера #subnav li {border: 1px solid black; padding: .5em; display: inline} затронет только элементы списка находящиеся внутри панели навигации отмеченной id="subnav" .

Тестируйте ваши правила CSS в разных браузерах, попробуйте найти их как можно больше, попросите ваших друзей протестировать ваши страницы.

Примеры использования CSS на известных сайтах

Прочтите всё про CSS

Разумеется мы не можем охватить всё, что вам нужно знать о дизайне с использованием CSS в короткой презентации. Эти книги смогут помочь вам узнать всё об использовании веб-стандартов для придания вашим страницам лёгкости, быстроты и элегантности.

Книжки? Ну уж нет! Дайте нам Интернет-чтиво!

CSS-дискуссии: css-discuss.org

  • Список рассылки: очень активный и очень полезный.
  • Wiki: "как нигде в других разделах сайта здесь собрано то что можно назвать коллективной памятью участников" Хотите, чтоб Internet Explorer понимал ваши команды а другие браузеры выводили бы всё лучше него? Здесь вы найдёте советы как сделать это и многое другое.
  • Архивы: Столкнулись с проблемой в CSS кодировании и не можете её решить? Не волнуйтесь, кто-нибудь наверняка уже сталкивался с этим (и участники рассылки нашли ему решение). Поищите здесь...

Zeldman.com Ежедневный отчёт: проницательное, продуманное и хорошо написаные тексты с ссылками, публикуемые регулярно.

"A List Apart" для людей которые делают веб-сайты.

Веб-Стандарты, проект посвящённый популяризации стандартов. Молюсь за этих людей.

CSS-Учебник "A guide for the unglued" содержит отличную коллекцию ссылок

Техники вёрстки с CSS: для развлечения и для доходов примеры вёрстки Эрика Костелло (Eric Costello) которую вы можете использовать в своих проектах. Список ссылок, учебник.

Реальный мировой стиль CSS примеры, советы, спецальные приёмы и техники от Марка Ньюхауза (Mark Newhouse).

DevEdge Netscape - закладки безумно удобные ссылки на спецификации CSS, HTML, и DOM.

Руководство стиля Нью Йоркской публичной библиотеки хороший ресурс для изучения основ XHTML и CSS.

Бизнес-преимущества от использования веб-стандартов хорошие новости для современных руководителей. Проповеди веб-стандартов на сайте которому верят обладатели MBA.

Всем спасибо. Есть вопросы?

; Scott Design, Inc.

; Adobe Systems Incorporated

International Versions

We're going global! If English isn't your native language, check out our translations page. If you'd like to translate this into your native tongue, .

Не ругайте слишком сильно!

Мы старались, когда переводили эту статью с английского.  Энтузиасты со всего мира создали множество её переводов на разные языки.

Если вы увидите неточности в наших текстах - пишите, нам очень важна ваша помощь!

Авторы перевода: Александр Сергеев, Андрей Пашков, Роман Быковский.

Creative Commons LicenseThis work is licensed under a Creative Commons License.