Должен ли я использовать макет таблицы HTML или новый дисплей CSS: код ячейки таблицы?

Question

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

Answer 1

Остерегайтесь display: table-cell. Он не работает в анти-браузере («браузере», имя которого не должно произноситься).

Также, если у вас есть данные таблицы, используйте таблицы. Используйте другие теги, когда они имеют смысл семантически (например, <p> для абзаца, <ol> для упорядоченных списков и т. Д.) Или <div> s для макета.

Answer 2

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

---

Хорошая поддержка display: table-cell, см .: http://caniuse.com/#search=table

Это будет работать во всех современных браузерах и IE8 +.

Это не будет работать в IE7, что является ограничивающим фактором для некоторых людей.

Answer 3

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

Просто для удовольствия, попробуйте метод CSSПолучите копию плагина панели инструментов для веб-мастеров Firefox и используйте его, чтобы отключить CSS.Так это того стоило?Представьте себе скрин-ридера, пытающегося сделать из этого беспорядка головы или хвосты ...

Answer 4

2 вещи:

Отображение: ячейка таблицы не новая, она была в CSS 2

display: ячейка таблицы не должна использоваться ни для чего, кроме элементов tr, если вы не любите отслеживать несоответствия и ошибки, специфичные для браузера

У меня есть таблица данных

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

Answer 5

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

Answer 6

Используйте таблицы для отображения табличных данных.

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