<div> элемент вместо <table>?

Question

Дубликат:

• Почему бы не использовать таблицы для разметки в HTML?
• DIV против таблиц или CSS против глупости

---

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

Answer 1

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

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

Но в основном все сводится к этому:

Таблица

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

CSS Layout

• труднее получить права (по крайней мере, для презентации)
• позволяет (иногда) чистое разделение контента и представления. Обратите внимание, что иногда вам приходится использовать несколько контейнерных элементов в HTML, чтобы некоторые макеты и стили работали правильно, поскольку у CSS есть некоторые ограничения
• допускает лучшее семантическое значение базовой разметки если вы не используете вслепую <div> и <span>. Есть много тегов, которые имеют значение и должны использоваться как таковые. Например, не используйте <div class="heading1">, когда вы можете использовать <h1>.

Answer 2

несколько причин:

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

2) div более гибкие, их легче стилизовать и поддерживать. вам не нужно писать <table><tr><td>Text here</td></tr></table> каждый раз, когда вы хотите что-то сказать, когда вы можете просто написать <div>Text here</div>. вы можете добавить CSS-хуки (т. е. классы или элементы) как к таблицам, так и к div-элементам, но с помощью div-ов это становится гораздо более гибким.

3) сайты с табличной структурой просто безобразны:)

Answer 3

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

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

Answer 4

Вот плюсы и минусы дизайна на основе div и таблицы .

Answer 5

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

Answer 6

Я расскажу вам свои личные основные причины использования div:

• Таблицы имеют только статическую сетку, тогда как div являются динамическими: Первая строка таблицы определяет все столбцы (как в MS Excel). В следующих строках вы можете просто объединить эти столбцы, но вы не можете изменить базовый макет, который вы определили в первой строке. Div являются динамическими: вы можете создать пэчворк, позволяя div'ам накладываться друг на друга или помещать некоторое пространство между ними. Что вы хотите. Вы не обязаны думать в строках. Вы свободны. Гораздо больше гибкости.

• Таблицы вызывают проблемы рендеринга и несовместимости между браузерами: Таблицы не всегда выглядят одинаково. Каждый браузер дает вам свою интерпретацию таблицы и ее содержимого. Таким образом, много неприятных сюрпризов. Один браузер показывает ваш обычный текст жирным шрифтом. Другой браузер дает вашей таблице больше или меньше полей другим HTML-элементам, следовательно, таблицы расположены не очень хорошо. Это час работы, чтобы решить эти проблемы с помощью сложных обходных путей. Div всегда выглядят одинаково во всех браузерах. Даже IE (который известен как нарушитель спокойствия для веб-программистов) создает меньше проблем, если вы используете div.

• Деления отрисовываются быстрее: Div загружаются быстрее, чем таблицы. Более быстрый просмотр между страницами. Лучше выглядеть и чувствовать.

Надеюсь, это поможет. Приветствия.

Answer 7

Я использую CSS и таблицы, а иногда и DIV, но таблицы настолько всеобъемлющие! И они выглядят так хорошо в Dreamweaver, Frontpage ... Очень трудно отказаться от таблиц, но, похоже, я это сделаю, потому что необходимо, чтобы мои страницы загружались быстрее!

Answer 8

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

Макет на основе CSS гораздо более гибкий, чем макет на основе таблицы. Есть еще несколько вещей, которые проще выполнить с помощью таблиц, но с другой стороны, есть много вещей, которые очень легко сделать с помощью CSS, что очень сложно или невозможно сделать с таблицами.

Answer 9

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

поток влево, поток вправо и поток везде.

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