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

Question

Дубликат:

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

---

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

Answer 1

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

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

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

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

Answer 2

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

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

Но в основном все сводится к следующему:

Таблицы

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

CSS - макет

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

Answer 3

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

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

Answer 4

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

Answer 5

Использование div лучше, чем использование table, из-за простоты управления в дизайне, и это может быть контейнер для элементов управления, а не таблица, а таблица в основном используется для группировки данных с аналогичной структурой, поэтому ее дизайн предназначен для этой задачи, но div рассматривается в основном как контейнер, а не как таблица.Я нашел разницу между when gathering many controls и в i can control the container, но в table я запутался, потому что мне нужно вставить inside и его зацикливание друг внутри друга.

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

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

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

Надеюсь, это поможет.Ваше здоровье.

Answer 9

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