Наша последняя книга — со спорным названием — вызвала много споров и больше реакций на колени, чем ведро лягушек в танце сарая. Комментарий, который я часто публиковал, гласит, что «замена table тегов на div которые отображаются как таблицы, ничем не отличается; вы также можете просто использовать таблицы ». Аргумент интересен, поскольку кажется, что комментатор подразумевает, что единственная причина не использовать теги table — это количество задействованных тегов.
Я собираюсь высунуть голову и сказать «да», даже если вы просто замените все свои теги table , tr и td теги div которые отображаются как эти элементы таблицы, это лучше, чем использовать таблицы HTML для разметки.
Никто не подвергается негативному влиянию чрезмерного использования структурных тегов div . Чего нельзя сказать об использовании таблиц HTML для разметки.
Веб-страницу, которая использует вложенные таблицы для разметки, будет сложно распечатать, трудно просмотреть на мобильном устройстве и трудно ориентировать для пользователей программ чтения с экрана. Приложение для чтения с экрана будет часто сталкиваться с вложенными HTML-таблицами, объявляя что-то вроде «таблица с 5 строками и 2 столбцами», когда оно входит в содержимое таблицы и «конец таблицы» при выходе. Одна и та же веб-страница, использующая вложенные элементы div может быть стилизована для аккуратного размещения для печати и просмотра на мобильном устройстве, а программы чтения с экрана игнорируют элементы div .
Используя таблицы HTML, вы подразумеваете, что содержимое каждой ячейки относится к содержимому других ячеек в двух измерениях: в той же строке и в том же столбце. С другой стороны, div предполагает такой связи с другими элементами div . Это просто контентные леса, и их использование не имеет смысла.
Хорошо, слепая замена всех связанных с таблицами тегов элементами div может быть неправильным подходом к проблеме, но говорить, что это «так же плохо», как использование таблиц HTML для разметки, является неправильным. HTML 4.01 определяет div как «универсальный контейнер языка / стиля» или, более конкретно:
Элементы
DIVиSPANв сочетании с атрибутамиidиclassпредлагают общий механизм для добавления структуры в документы. Эти элементы определяют контент как встроенный (SPAN) или блочный (DIV), но не налагают на контент другие идиомы представления. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутомlangи т. Д., Чтобы адаптировать HTML к своим собственным потребностям и вкусам.
Таким образом, мы можем использовать элементы div для определения блоков содержимого; Похоже, использование вложенных элементов div для структурирования контента вполне допустимо. Пока вы не используете элементы div вместо более подходящих, таких как заголовки, абзацы, цитаты, списки и, конечно, таблицы для табличных данных, у вас все в порядке.
Подход, который вы применяете при создании макета с использованием элементов таблицы HTML, заключается в том, чтобы сначала заблокировать макет в HTML, прежде чем стилизовать веб-страницу. Это неправильно и противоречит устоявшейся передовой практике: отделите вашу презентацию от вашего контента.
Это полностью отличается от подхода макета CSS, даже при использовании большого количества элементов div . Например, я мог бы поместить весь контент, представляющий брендинг сайта, в тег div , а весь контент, представляющий дополнительную информацию о сайте, в другой тег div . Тот факт, что в CSS я могу применить стиль, который размещает брендинг сайта вверху веб-страницы, а дополнительную информацию сайта внизу, пока не важен. На этапе компоновки я мог бы сделать это, или я мог бы использовать отображаемые значения таблицы CSS, чтобы превратить их в столбцы или строки. Разметка может быть стилизована несколькими способами, поскольку этот подход не блокирует макет в разметке HTML.