css display: table vs html <table>, что более подходит для использования?

Question

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

Мой вопрос: каковы плюсы и минусы или недостатки использования html <table> в верстке?

Answer 1

Существует не так много преимуществ использования разметки таблиц для разметки страницы, кроме тех, кто не хочет изучать правильный HTML / CSS и / или использует какой-то WYSIWYG-редактор.

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

Преимущества CSS для макета страницы (над таблицами):

• презентация отделена от контента (что часто означает меньше HTML для работы)
• презентация более гибкая при обновлении
• презентацию намного проще адаптировать к различным устройствам / экранам

Свойство css display 'table' позволяет вашему CSS работать больше как традиционная таблица. Это дает вам преимущества CSS, но позволяет использовать старую логику таблиц.

Если вы хорошо разбираетесь в CSS, то единственный раз, когда вы действительно хотите использовать отображение: таблица - это когда вы сталкиваетесь с ситуациями, когда вы хотите обрабатывать вертикальное центрирование контента ... то, что CSS в общем кажется не в состоянии. Обратите внимание, что display: table, как и большая часть CSS, не работает в старых версиях IE.

Answer 2

Все зависит от того, чего вы пытаетесь достичь. использование div s, span s и display:table может стать довольно запутанным, но если вы боитесь, что поисковые системы не смогут правильно перемещаться по обычной таблице, это может быть путь. Использование тега table намного проще, проще в использовании и более семантически правильно.