Если вы хотите иметь семантически правильный HTML, вам следует использовать таблицы только для табличных данных.

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

Таблицы были разработаны для табличного содержимого, а не для макета.

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

1) Для отображения табличных данных. Календарь - это один из примеров табличных данных, которые поначалу не всегда очевидны.

2) Я работаю в медицинской компании, выставляющей счета, и почти вся верстка для нашей внутренней работы выполняется с помощью CSS. Однако время от времени мы получаем бумажные формы от страховых компаний, которые должны использовать наши биллеры, и программа преобразует их в формат html, который они могут заполнять и распечатывать через интранет. Чтобы формы были приняты, они должны очень точно соответствовать оригинальной бумажной версии. Для них просто вернуться к таблицам.

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

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

Вся эта штука «Таблицы против дивизионов» едва не попадает в цель. Это не «таблица» или «div». Речь идет об использовании семантического HTML.

Даже тег div играет лишь небольшую роль на хорошо продуманной странице. Не злоупотребляйте этим. Вам не понадобится так много, если вы правильно составите свой html. Такие вещи, как списки, наборы полей, легенды, метки, абзацы и т. д. Могут заменить большую часть того, для чего часто используются div или span. Div следует использовать в первую очередь, когда имеет смысл указать логическое division, и использовать его только для дополнительного макета, когда это абсолютно необходимо. То же самое и с таблицей; используйте его, когда у вас есть табличные данные, но не иначе.

Тогда у вас будет более семантическая страница, и вам не нужно столько классов, определенных в вашем CSS; вместо этого вы можете нацеливать теги напрямую. Возможно, наиболее важно то, что у вас есть страница, которая будет намного лучше оцениваться Google (анекдотично), чем эквивалентная таблица или страница с большим количеством div. Прежде всего, это поможет вам лучше связаться с частью вашей аудитории.

Итак, если мы вернемся и посмотрим на это с точки зрения таблицы и div, я считаю, что мы фактически подошли к точке, где div используется слишком часто, а таблица - недостаточно. Почему? Потому что, когда вы действительно думаете об этом, есть много вещей, которые попадают в категорию «табличных данных», которые, как правило, упускаются из виду. Например, ответы и комментарии на этой самой странице. Они состоят из нескольких записей, каждая с одним и тем же набором полей. Они даже хранятся в таблице sql server, чтобы кричать вслух. Это точное определение табличных данных. Это означает, что тег таблицы html будет абсолютно хорошим семантическим выбором для размещения чего-то вроде сообщений здесь, в Stack Overflow. Тот же принцип применим и ко многим другим вещам. Возможно, не стоит использовать тег таблицы для настройки макета из трех столбцов, но, безусловно, его можно использовать для сеток и списков ... за исключением, конечно, тех случаев, когда вы действительно можете использовать ol или ul ( list) теги.

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

Таблицы были введены в HTML 3.2, вот соответствующий параграф из спецификации по их использованию:

[tables] can be used to markup tabular material or for layout purposes...

Таблицы использую в двух случаях:

1) Табличные данные

2) Каждый раз, когда я хочу, чтобы мой макет динамически изменял свой размер в соответствии с его содержимым

Если ваши данные могут быть размещены в двумерной сетке, используйте <table>. Если не может, не надо. Использование <table> для чего-либо еще - это хитрость (хотя часто и без подходящих альтернатив, особенно когда речь идет о совместимости со старыми браузерами). Нет с использованием <table>за что-то, что явно должно быть одним, также плохо. <div> и <span> подходят не для всех; фактически, будучи совершенно бессмысленными на семантическом уровне, их следует избегать любой ценой в пользу более семантических альтернатив.

One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.

Я вижу, что это изрядное количество, особенно среди разработчиков MS. И в прошлом я делал это довольно часто. Он работает, но игнорирует некоторые факторы доступности и передовой практики. Вы должны использовать метки, поля ввода, наборы полей, легенды и CSS для компоновки ваших форм. Почему? Потому что это то, для чего они нужны, это более эффективно, и я думаю, что доступность важна. Но это только мои личные предпочтения. Я думаю, что каждый должен сначала попробовать это, прежде чем осуждать это. Это быстро, легко и чисто.

@Marius:

Есть ли в макете табличные данные? Нет, несколько лет назад это было стандартно, но теперь уже нет :-)

One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.

Я обычно даю этикетке фиксированную ширину или отображаю ее в строке выше.

Я бы сделал различие между HTML для общедоступных веб-сайтов (таблицы нет-нет-нет, div-ы да-да-да) и HTML для полуобщественных или частных веб-приложений, где я предпочитаю таблицы даже для макета страницы.

Большинство уважаемых причин, по которым «Таблицы плохи», обычно являются проблемой только для общедоступных веб-сайтов, но не в большей степени для веб-приложений. Если я могу получить тот же макет и более согласованный вид в браузерах с помощью ТАБЛИЦЫ, чем сложный CSS + DIV, то я обычно соглашусь и утверждаю ТАБЛИЦУ.

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

Например:

<fieldset>
  <legend>New Blog Post</legend>

  <label for = "title">Title:</label>
  <input type = "text" name = "title" />

  <label for = "body">Body:</label>
  <textarea name = "body" rows = "6" cols = "40">
  </textarea>
</fieldset>

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

Вот несколько отличных примеров CSS-форм:

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

@Jon Limjap

Для метки: текстовое поле не подходят ни div, ни таблицы: <dl>

Таблицы используются для табличных данных. Если есть смысл поместить его в электронную таблицу, используйте таблицу. В противном случае вы можете использовать более подходящий тег, например div, span, ul и т. д.

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

HTML <table>-элементы следует использовать, когда данные логически имеют двумерную структуру. Если данные можно структурировать по строкам и столбцам, и вы можете осмысленно применять заголовки как к строкам, так и к столбцам, то, вероятно, у вас есть табличные данные.

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

Некоторые примеры:

Использование таблиц для размещения боковых панелей и верхних и нижних колонтитулов страниц. Это не табличные данные, а макет страницы. Что-то вроде css grid или flexbox более уместно.

Использование таблиц для газетных столбцов. Это не табличные данные - вы все равно читаете их линейно. Что-то вроде столбцов css более уместно.

Раньше я делал чистый CSS, но отказался от этого стремления в пользу гибридного подхода таблицы / CSS как наиболее прагматичного подхода. По иронии судьбы, это еще и из-за доступности. Вы когда-нибудь пробовали делать CSS на Sidekick? Какой кошмар! Вы когда-нибудь видели, как веб-сайты на основе CSS отображаются в новых браузерах? Элементы перекрывались или просто отображались некорректно, поэтому мне пришлось отключить CSS. Вы когда-нибудь пробовали изменять размер веб-сайтов на основе CSS? Они выглядят ужасно и часто вредно для слепых, если они используют функции масштабирования в браузере! Если вы сделаете это с таблицами, они будут масштабироваться намного лучше. Когда люди говорят о доступности, я обнаруживаю, что многие понятия не имеют, и меня это раздражает, потому что я инвалид, а они нет. Неужели они работали со слепыми? Глухие? Если доступность является главной проблемой, почему, черт возьми, 99% видео не имеют субтитров? Многие пуристы CSS используют AJAX, но не понимают, что AJAX часто делает контент недоступным.

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

Используя подход CSS с таблицами, я сэкономил так много времени на разработке веб-сайта, и его обслуживание стало намного проще. Меньше хаков, больше интуитивно понятно. Я получаю меньше звонков от людей, которые говорят: «Я вставил DIV, и теперь он выглядит испорченным!» И что еще более важно, абсолютно НИКАКИХ проблем с доступностью.

По этому поводу я подумал, что сайт это был довольно забавным.

Когда когда-либо страница, содержащая таблицы, загружается любым браузером, браузеру требуется больше времени, чтобы правильно отобразить тег. Там, где как будто используется div, браузер занимает меньше времени, так как он легче. И более того, мы можем применить CSS, чтобы блоки отображались в виде таблицы,

Таблицы обычно тяжелые, а div - легкие.

Div - это просто divisions, они не предназначены для использования для группировки разделов страницы, связанных в семантическом смысле. Они не несут никакого неявного смысла, кроме этого.

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

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

Понятно, что DIV используются для макета, но мне довелось «заставить» использовать электронные таблицы для создания макета сетки в структуре div по следующим причинам:

the addition of percentage values did not allow a proper alignment with the div, while the same values expressed on cells of tables gave the expected result.

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