Таблицы вместо DIV

Ответ 1

Все "Таблицы против Divs" просто не хватает метки. Это не "таблица" или "div". Он об использовании семантического html.

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

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

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

Ответ 2

Когда данные, которые я представляю, действительно являются табличными.

Мне кажется смешным, что некоторые веб-дизайнеры использовали divs для табличных данных на некоторых сайтах.

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

Ответ 3

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

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

Поскольку использование подхода CSS с таблицами, я так много времени уделял разработке веб-сайта, а maintanance намного проще. Меньше хаков, более интуитивно понятное. Я получаю меньше звонков от людей, говорящих: "Я вставил DIV, и теперь он выглядит все испорченным!" И что еще более важно, абсолютно никаких проблем с доступом.

Ответ 4

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

Таблицы → данные

Divs → макет

(в основном)

Ответ 5

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

Спецификация CSS поддерживает макеты на основе сетки, эквивалентные табличной разметке, используя свойство display: table | table-cell. Однако эта часть спецификации не поддерживается в Internet Explorer (хотя все остальные современные браузеры поддерживают ее.)

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

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

Ответ 6

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

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

Ответ 7

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

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

[таблицы] можно использовать для разметки табличного материала или для целей компоновки...

Ответ 8

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

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

Ответ 9

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

Конечно, таблица обернута в DIV:)

Ответ 10

Я могу видеть аргумент для таблиц для форм, но есть более приятная альтернатива... вам просто нужно засучить рукава и изучить 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/

Ответ 11

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

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

Я считаю только табличное содержание. Например, если вы распечатали таблицу базы данных или данные, подобные таблицам, в HTML.

Ответ 18

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

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

Ответ 19

@Marius:

Являются ли табличные данные макета? Нет, хотя это было стандартным несколько лет назад, это не сейчас: -)

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

Я стараюсь дать ярлыку фиксированную ширину или отобразить его на линии выше.

Ответ 20

@Jon Limjap

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

Ответ 21

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

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

Ответ 22

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

Таблицы обычно являются тяжелыми, а div - малыми.

Ответ 23

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

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

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

Ответ 24

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

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

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