Вёрстка таблицами

[clavin]

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

Во первых, мне кажется, что вёрстка таблицами это вполне приемлемо. Но вот что настораживает.

Является ли для таблиц обязательными вложенными элементами такие теги как <caption>, <thead>, <tbody>, <tfooter> и <th>. Даже не знаю, какой последний изданный w3c стандарт есть, где описывается нужность (ненужность) этих тегов. Может кто даст ссылку на этот стандарт? Обязательны ли они в таблицах? Если обязательны, то это накладывает некоторые особенности на вёрстку, чтобы соблюсти поддержку стандартов и обеспечить кроссбраузерность. Если элемент <thead> обязателен, то тогда получается, какой бы макет не верстался, в нём должно присутствовать что-то, что в этот элемент будет помещено.

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

В общем, мне кажется, что если бы различные теги вроде <thead>, <tfoot>, <th> и прочие были бы необязательны, то верстать таблицами очень даже можно было (хотя бы некоторые сложные места на макетах), так как практически никому дела нет на это, главное чтоб дизайн у страницы был и он одинаково выглядел во всех браузерах.

[sfer23]

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

Ещё по личному опыту заметил что сложные дизайны выполненные через таблицы прорисовываются браузерами заметно дольше чем выполненные с помощью DIV

[sigma77]

clavin,

Уже устала повторять одно и тоже - главное в верстке - здравый смысл.

Если для решения конкретной задачи лучше подходят таблицы - верстай таблицами. К слову говоря существующие принципы верски блоками (в основном плавающими) - также далека от семантики как и таблицы. Но имеет ряд преимуществ перед таблицами. Точно также и таблицы имеют преимущество перед блоками.

В общем вопрос уже не раз обсуждался даже на этом форуме. Можете поискать темы.

Что касается ответа на второй вопрос - читайте первоисточник - спецификации (http://www.w3.org/wiki/HTML/Specifications). Данные теги не обязательны.

[clavin]

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

Ещё по личному опыту заметил что сложные дизайны выполненные через таблицы прорисовываются браузерами заметно дольше чем выполненные с помощью DIV

Меня больше интересует браузерная сторона вопроса с точки зрения кроссбраузерности и поддерживаемости современных стандартов (и конечно же обратная совместимость)

sigma77, пока из нового нашёл только это (таблицы в HTML5). А где там написано, какие теги обязательны а какие нет? Эти новые стандарты такие ужасные для чтения

[SelenIT]

Проблемы с отрисовкой, насколько я в курсе, лечатся через table-layout: fixed, а проблемы с "семантикой", теоретически, вот-вот будут лечиться через rel="presentation". Главная проблема — нехватка гибкости. Всё-таки проще придать блокам табличное отображение где надо (если абстрагироваться от IE7, хотя и для него есть костыли), чем переопределять стили для tr/td, если, например, срочно понадобится оптимизировать эту же верстку для мобильников. Хотя и катастрофы лично я не вижу (напр., для железобетонного центрирования чего угодно где угодно).

Является ли для таблиц обязательными вложенными элементами такие теги как <caption>, <thead>, <tbody>, <tfooter> и <th>

В HTML4.x обязателен tbody (хотя, если он в таблице единственный, открывающий тег для него опционален - браузер сам откроет его перед первым <tr>), в XHTML (который с application/xhtml+xml) ничего из перечисленного не обязательно (см. приложение C.11). В ЖHTML тоже вроде как tbody необязателен, но добавление tr в пустую таблицу всё равно неявно его создает (насколько я понял). Кроме того, ЖHTML теперь описывает некоторые эвристики, по которым браузеры смогут "угадать", где таблица с данными, а где чисто оформительская (напр., если есть border="0" — скорее всего она оформительская, а если есть caption, thead или th — скорее всего это таблица с данными).

[clavin]

SelenIT, спасибо за развёрнутый ответ. Но в указанных вами стандартах я не нашёл точного указания, на то, нужно ли для таблиц указывать такие элементы: <thead>, <tfoot>, <th>, <caption>. Нету там такого или я этого не увидел. Там только указано, обязателен ли открывающий тег для этих тегов и закрывающий. Не очень понятно, как эту информацию можно использовать. Вот здесь, например, указано, что для <caption> обязателен открывающий и закрывающий тег. Значит ли, что его обязательно в любой таблице указывать даже для той, что используется просто для разметки страницы? <tbody> ладно, можно при вёрстке таблиц его указывать, практически это основа таблицы. Даже пусть на всякий случай будет. Он будет и в обычных таблицах, если я захочу создать какой-нибудь список с перечнем каких-то элементов, так и в тех таблицах, что используются для вёрстки макетов. Как поступать с остальными тегами вы меня не убедили

Может ещё что накопаете? Вы вроде грамотный специалист, про вёрстку практически всё знаете.

Проблемы с отрисовкой, насколько я в курсе, лечатся через table-layout: fixed, а проблемы с "семантикой", теоретически, вот-вот будут лечиться через rel="presentation".

А что это за rel="presentation"? Впервые слышу. Но тоже интересно узнать, в том числе если это как-то с семантикой связано.

Я кстати считаю вполне нормально, если делать сразу таблицы вида <table>....</table>, а не писать блоки <div>, которым задавать через стили свойство disaplay:table. Мне, как я уже говорил, кажется, что никому нет дела, свёрстан ли макет на дивах или на таблицах, ни браузерам, ни поисковым системам до этого дела вроде никакого нет. Тут главное сверстать такую таблицу, которая соответствует стандартам и не содержит лишнюю семантику, например, вроде <caption> или <tfoot> (зачем эти тег в вёрстке? что они будут означать на странице, если макет страницы должен их содержать? нужны ли он вообще или без них можно обходиться?)

Edited January 11, 2012 by clavin

[Non Stop]

Вы бы вопросом задались почему люди с табличной на блочную перешли. Куча статей где подробно расписано и разложено. А верстать можно, раньше же верстали.

[clavin]

Вы бы вопросом задались почему люди с табличной на блочную перешли. Куча статей где подробно расписано и разложено. А верстать можно, раньше же верстали.

Может тогда ссылками соответствующими поделитесь? Я вот не понимаю, почему нужно абсолютно использовать дивную вёрстку. Считаю что и табличную в некоторых случая можно использовать, так как эти бесконечные float:left и float:right к добру не доводят. Очень макет становится сложным, когда нужно применять плавающие элементы. Вот я и думаю, что таблицами этот вопрос можно решить проще. Особенно если надо сверстать таблицами не весь макет, а какую-то его часть, например, описание (карточку) продаваемого товара. Иногда вижу что так делают и мне кажется что это оправданное решение.

Данной темой я просто хочу прояснить некоторые вопросы (про теги <thead>, <tbody>, <tfoot>, <th>, <caption> и возможно другие теги). Хотелось бы в стандартах увидеть нужны ли они. Их назначение практически очевидно, это семантическая разметка таблицы. А семантика в макетах, например в двухколончатом макете, ведь не нужна. Вот и ищу информацию по этому поводу.

Edited January 11, 2012 by clavin

[sigma77]

Данной темой я просто хочу прояснить некоторые вопросы (про теги <thead>, <tbody>, <tfoot>, <th>, <caption> и возможно другие теги).

Тут всё аналогично, что и с другими тегами. Есть у таблицы шапка или заголовок - значит включаете соответствующую разметку. Нет - пишете без них. То же самое, что и c <p>, <ul>, <blockquote> и прочими.

Единственно <tbody> желательно включать. Т.к. браузер всё равно включает его в таблицу. А при его отсутствии возможны ошибки в скриптах или в стилях (например, можно долго искать почему данное объявление не сработает: table > tr {background: green}).

[SelenIT]

Нету там такого или я этого не увидел.

Пример из актуальной спеки ЖHTML/HTML5:

The table element

...

Content model:

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total).

Как видно, все перечисленные либо идут опционально, либо в количестве "ноль или более". Строго обязателен только TR.

В старых стандартах надо было смотреть DTD, но сейчас это уже малоактуально.

если делать сразу таблицы вида <table>....</table>, а не писать блоки <div>, которым задавать через стили свойство disaplay:table. Мне, как я уже говорил, кажется, что никому нет дела, свёрстан ли макет на дивах или на таблицах, ни браузерам, ни поисковым системам до этого дела вроде никакого нет

Таблицы - это не только ценный мех прочная двумерная пространственная сетка, но и куча дополнительных методов в соответствующих DOM-интерфейсах: добавить/удалить ячейку/строку, выбрать строку/ячейку по номеру... Чтобы тупо отобразить блоки сеткой, всё это богатство ни к чему, а браузер поневоле тратит ресурсы на его инициализацию и поддержку. Не говоря о том, что блочное отображение с безличных дивов так же легко убрать, как и поставить, а вот "разбить каркас" настоящей таблицы, чтобы отобразить ее просто в столбик на экране мобилки - нужно постараться, пройтись по всей "матрешке" table — tbody (тот самый "автодобавляемый", само существование которого многих удивляет) — tr — td/th, заменяя дефолтный display на нейтральный block. Конечно, пока были живы IE6/7, это всё было отвлеченной теорией, но их время стремительно подходит к концу

Насчет того, что поисковикам (да и некоторым "шибко умным" браузерам типа айфонного, которые пытаются угадывать основной контент, чтобы отобразить его более крупным шрифтом типа для удобства) без разницы — новая спека, похоже, предполагает, что разница всё-таки есть (как минимум может быть). Поэтому знание про подсказки для них (типа того же rel="presentation") лишним точно не будет.

[hedgehog]

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

[buddah]

Лично для меня существует одно правило: табличная верстка для табличных данных. Все остальное - блоки. Где нужно от блока табличного поведения - прописывается display: table или display: table-cell. Например для некоторых типов меню. Мне так просто удобно.

Все. Об остальном я даже не думаю.

[SelenIT]

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

Я предполагаю, что речь идет вообще о поддержке/допиливании давно существующих табличных сайтов, чтобы несчастные поисковики смогли хоть как-то выделить в них смысловую основу. Но, как показывает опыт, подобные решения "на синей изоленте" порой бывают очень живучи и временами они-то и задают вектор всей отрасли...

[clavin]

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

взято отсюда: http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

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

После некоторого изучения вопроса я понял, что объяснение SelenIT является самым точным. Для разметки таблицами можно (и даже нужно) использовать <tbody>, остальные теги для семантики, которые я перечислял, не обязательны.

SelenIT, где вы про rel="presentation" откопали? Даже в гугле про это ничего не нашёл.

Edited January 12, 2012 by clavin

[SelenIT]

Про таблицы вообще я смотрел в актуальной спеке, которую предлагается "в любой момент времени считать как бы готовой": http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element

Про role="presentation" — было решение рабочей группы HTML в W3C прошлой весной:

*** Decision of the Working Group ***

Therefore, the HTML Working Group hereby adopts the "Allow tables to be

used for presentational purposes" Proposal for ISSUE-130. Of the Change

Proposals before us, this one has drawn the weaker objections.

т.е.

Поэтому, рабочая группа HTML настоящим принимает предложение "Разрешить использование таблиц для презентационных целей" по ISSUE-130. Из наличествующих перед нами предложений об изменении [спецификации], это предложение вызвало более слабые возражения.

[troll]

Интересно получается, W3C'шная и WHATWG'шная спеки друг другу противоречат...

[clavin]

Поэтому, рабочая группа HTML настоящим принимает предложение "Разрешить использование таблиц для презентационных целей" по ISSUE-130. Из наличествующих перед нами предложений об изменении [спецификации], это предложение вызвало более слабые возражения.

Ну и хорошо. Значит вёрстка таблицами будет узаконена.

Интересно получается, W3C'шная и WHATWG'шная спеки друг другу противоречат...

Это просто разные ветви. HTML5 и XHTML это разные стандарты, но они основываются на каких-то общих принципах (HTML4, например). Поэтому они похожи, но всё же они разные.

[troll]

Прошу простить, я неточно выразился. Имелись в виду не XHTML и HTML(5), а это и это.

Edited January 12, 2012 by troll

[clavin]

до чего то же общего они договорятся рано или поздно

[SelenIT]

Почему противоречат? Конкретно насчет таблиц, по беглому просмотру одной и второй вопиющих расхождений не вижу. Редактор у обеих вообще один и тот же Хиксон...

[troll]

W3C "не рекомендует" (т.е. в некоторых обстоятельствах все же допускает) использование таблиц в презентационных целях, а WHATWG это прямо и безусловно запрещает.

[SelenIT]

Ух ты, такого слона я вчера замыленным глазом и не заметил . И в последнем editor's draft-е от W3C та же разница.

В принципе, логика есть — W3C как бы и говорит о том, "как можно" ("что валидно, а что нет"), а WHATWG — о том, "как нужно". Хотя всё равно забавно. Может, в WHATWG-шной версии на эту тему война правок не прекращается?

[hedgehog]

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

[SelenIT]

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

[clavin]

Кому интересно, то у w3c есть ещё другие рекомендации по таблицам, которые применяются для макетов. Так здесь в частности говориться, что атрибут "summary" для тега <table>, применяемых для макета, запрещён.