Что таблицы могут сделать, что CSS-позиционирование не может?

Ответ 1

Я бы переключился на макеты, основанные на CSS, если бы мог. Семантические аргументы верны, но есть практические соображения. Таблицы будут:

• Абсолютно предотвратить "float wrap", где div упадет на следующую строку, потому что для этого недостаточно места
• укажите столбцы с одинаковой высотой.
• позволяют динамические макеты, где ширина и высота неизвестны до времени выполнения
• предоставить colspans и rowspans
• уменьшить количество вопросов SO, спрашивающих, как делать вещи без таблиц:)

Есть свойства отображения css (table-cell и т.д.), которые имитируют некоторые из них, но я не верю, что поддержка достаточно распространена, чтобы использовать их еще (если вы не можете контролировать свой выбор браузера пользователя).

Сайт, на котором я работаю, требует гибкой динамической ширины столбцов в макетах. Несколько клиентов используют одни и те же шаблоны сайтов, и я понятия не имею, что они будут помещать в меню или заголовок страницы или ячейки содержимого. (И не знаю, что они найдут привлекательными, что еще одна проблема...) Использование одной внешней таблицы для выкладки основных разделов сайта позволяет гибкость, в которой я нуждаюсь, не беспокоясь о том, что слегка слишком широкое меню будет подталкивать основного содержимого до следующей строки или цвета фона не будут заполнять требуемую высоту.

В идеальном (для меня) мире у нас будет <table> для табличных данных, а другой, почти идентичный набор тегов для макетов - вызовите его <layout> (вместе с соответствующими тегами строк и ячеек). Или добавьте атрибут "mode" в тег <table> - значения будут "данные" и "макет", чтобы читатели экрана и поисковые системы знали, что делать. Возможно, в html 6...

Изменить: я добавлю, что касается "float wrap" - есть текущий вопрос о SO с ответом, который работает довольно хорошо здесь. Это не идеально, и слишком мне это слишком сложно, но во многих случаях это решит проблему.

Ответ 2

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

Обратите внимание, что табличные данные необязательно всегда означают только таблицы чисел. Иногда формы и другие типы интерактивного контента могут быть также табличными, если их поля логически группируются в столбцы и строки. Ключевой момент - спросить себя: "Я бы подумал о своих данных как о строках и столбцах, если бы я написал его на странице, а компьютер не имел к этому никакого отношения?"

Ответ 3

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

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

Ответ 4

У меня есть один! Есть что-то, что кажется мне невозможным с css, но возможно с таблицами. Я только что задал вопрос об этом вчера и получил ответ.

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

edit: немного тестирования показывает, что это верно только для float. Если ваши элементы отображаются встроенными или встроенными, то вы можете установить white-space:nowrap в контейнере. Однако в этом случае (по-видимому, в FF) существует таинственное пространство между элементами, которое для моих целей вчера было бы проблемой.

Ответ 5

Ужасно выглядящие?

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

Ответ 6

Вы можете сделать то же самое с CSS, но обычно это не так элегантно.

Таблицы важны для отображения табличных данных (т.е. NOT LAYOUTS). Они являются логическими, семантическими конструкциями и должны использоваться как таковые. Они содержат такие понятия, как столбцы и строки, что только CSS не поддерживает.

Ответ 7

Что могут сделать таблицы для позиционирования CSS? Теоретически ничего, поскольку вы можете использовать display: table;, display: table-cell; или другие такие значения для display.

< ArgumentOnSemanticsUsabilityAndAcessibility/ >

Ответ 8

save you time

Ответ 9

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