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

Я знаю, что существуют различные хорошие аргументы, предпочитающие расположение CSS над основанными на таблице разметками. То, что я задаюсь вопросом, - завершена ли модель CSS (принятие относительно современного браузера) относительно ВСЕХ возможностей таблиц. Есть ли разметки, которых таблицы могут достигнуть, которые невозможны или непрактичны с CSS?

11
задан Brian Tompsett - 汤莱恩 27 May 2017 в 15:45
поделиться

9 ответов

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

  • полностью предотвратят «обтекание», когда div упадет на следующую строку, потому что для него недостаточно места
  • даст вам столбцы одинаковой высоты
  • разрешат динамические макеты, где ширина и высота неизвестно до тех пор, пока во время выполнения
  • не предоставят colspans и rowspans
  • уменьшат количество SO-вопросов, спрашивающих, как делать что-то без таблиц :)

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

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

В идеальном (для меня) мире у нас были бы

для табличных данных и другой, почти идентичный набор тегов для макетов - назовите его (вместе с соответствующими тегами строк и ячеек). Или добавьте атрибут «режим» к тегу
- значениями будут «данные» и «макет», чтобы программы чтения с экрана и поисковые системы знали, что делать. Может быть, в html 6 ...

Edit: Я должен добавить, что касается «float wrap» - есть текущий вопрос по SO с ответом, который работает очень хорошо здесь . Он не идеален и слишком сложен для меня, но во многих случаях это решило бы проблему.

5
ответ дан 3 December 2019 в 08:54
поделиться

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

Хотя серьезно. Нет.

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

0
ответ дан 3 December 2019 в 08:54
поделиться

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

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

0
ответ дан 3 December 2019 в 08:54
поделиться

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

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

6
ответ дан 3 December 2019 в 08:54
поделиться

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

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

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

1
ответ дан 3 December 2019 в 08:54
поделиться

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

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

4
ответ дан 3 December 2019 в 08:54
поделиться

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

0
ответ дан 3 December 2019 в 08:54
поделиться

экономия времени

-1
ответ дан 3 December 2019 в 08:54
поделиться

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

-2
ответ дан 3 December 2019 в 08:54
поделиться