Я видел довольно много ответов на этом сайте, которые пропагандируют использование таблиц для дизайна, потому что это невозможно сделать с помощью CSS и Divs... когда на самом деле это можно сделать с некоторой изобретательностью.
Каковы примеры вещей, которые действительно невозможно сделать?
Единственный, с которым я когда-либо сталкивался, - это вертикальное выравнивание поля в другом поле.
* edit: Полагаю, меня больше всего интересуют недостижимые макеты с помощью CSS2
Вертикальное выравнивание блоков или текста.
Имея эластичные контейнеры, которые растягиваются до ширины их содержимого.
Наличие нескольких "строк" с той же структурой, где "ячейки" синхронизируются по ширине во всех строках.
Наличие нескольких столбцов для синхронизации их высоты (вплоть до длины самого длинного текстового блока).
Это довольно простые дизайнерские потребности, которые появляются даже в базовых концепциях дизайна.
Проблемы с ячейками/столбцами могут быть решены с помощью CSS, если вы учитываете IE8, но это будет много лет до его широкого распространения (даже IE7 через 2-3 года не достиг желаемой доли рынка).
Что касается "изобретательности", это не так хорошо в разработке программного обеспечения. Трюки, которые ваши коллеги и вы сами после нескольких месяцев не сможете понять, обычно создают эту базу кода, которую каждый либо боится дотронуться, либо решит полностью или полностью переработать.
Помните принцип KISS. Самый простой способ сделать это, тем более надежно, что он будет работать.
Ответ на этот вопрос зависит от нескольких вещей:
Постепенное содержимое является проблемой для CSS. Вы можете использовать float для этого, но если сумма ширины превышает ширину контейнера, поплавки хвостового конца упадут ниже. Таблицы более способны в этом отношении, поскольку они будут сжимать столбцы, где это возможно, чтобы сделать вещи подходящими, и клетки никогда не будут разбиты на новые строки.
Вертикальное центрирование, о котором вы говорили. Его тривиально с таблицами и трудно или невозможно (в зависимости от совместимости и фиксированных или переменных высот контейнера и элемента) в чистом CSS.
Вы также можете ссылаться на контент наведения. IE6 поддерживает только псевдоэлемент: hover на якорях. Для этого браузера необходим Javascript для: зависания типа поведения.
В принципе, если то, что вам нужно сделать, можно сделать довольно тривиально с помощью чистого CSS, тогда сделайте это. Если нет, не чувствуйте себя плохо, если вам нужно использовать столы, несмотря на то, что все фанатики против стола (и они фанатики) в ужасе вскакивают вверх и вниз.
Если вы хотите относительно простой пример этой проверки Можете ли вы сделать этот макет HTML без использования таблиц?. Это концептуально простая проблема с макетами, которая тривиальна для таблиц, и никто еще не опубликовал решение, отвечающее требованиям с чистым CSS.
"... когда на самом деле это можно сделать с немного изобретательности".
Как насчет того, чтобы "избежать необходимости в изобретательности", как это трудно сделать в CSS.
;)
! Мы всегда должны пытаться использовать правильный HTML для данного контента, в который нужно разметка. Поэтому не только div (span, ul, li, dl, strong, em... и т.д.) Это гарантирует, что контент не просто выглядит правильно, а правильно (для SEO и дополнительных возможностей)
Не используя таблицы, мы можем преобразовать контент из одного взгляда и чувства в другое, не меняя HTML, см. Zen Garden
Пока, хотя с текущими браузерами CSS-таблица, такая как макеты, может быть выполнена, но сложна. есть методы, позволяющие обойти многие проблемы, когда они сделаны, но глобальные обертки с фоновыми изображениями или исправления позиционирования... где обе статьи также ссылаются на использование Javascript для постепенного улучшения страницы, чтобы получить эти дополнительные классы, которые могут вам потребоваться.
или, конечно же, вы можете использовать некоторый XSL в качестве промежуточного продукта, чтобы помочь сделать формирование, если обработка с CMS.
Альтернативные цвета строк в таблице без вручную (или с помощью script), назначая альтернативные стили каждой строке.
Определите позицию одного элемента относительно другого. Например, вы не можете использовать CSS, чтобы определить, какое поле позиции находится в кучке плавающих ящиков, используя тот же класс. Было бы неплохо, например, знать, является ли одно поле первым полем, или вторым, или последним.
Обращайтесь с вдовами. Вдова - это слово, которое свисает с конца абзаца, то есть одно слово начинает последнюю строку в абзаце. Это большой нон в дизайне печати, но в мире Интернета это трудно контролировать.
Плавающие элементы в нескольких столбцах, где текст в каждой ячейке может расширить высоту элемента, но вся строка ниже должна быть нажата вниз, если это произойдет.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
Изображение не может быть помещено в точный центр ячейки с атрибутом align.It может быть сделано с некоторой грубой силой.
Звучит очевидно, но вы не можете изменять контент с помощью CSS, его можно использовать только для стилей.
Рори, я думаю, ты абсолютно прав. Вертикальное выравнивание может быть выполнено с использованием высоты линии, и создание компоновки в CSS действительно не так сложно. Фактически, он намного более гибкий при использовании абсолютного/относительного позиционирования и поплавков.
Люди, все еще использующие таблицы для дизайна, должны действительно обновлять текущие стандарты.
Продолжая тему, CSS3 придумывает, что сложно думать о том, что CSS не может сделать. Манипуляции изображения, манипуляции с содержимым, расширенные селекторы, все это будет возможно. Но если я должен был назвать одну вещь, то с помощью CSS вы не сможете (и не будете) поворачивать элементы.
Мне не удалось использовать прозрачность для создания текстовой области с переменной высотой на всех страницах. Я считаю, что это невозможно. В конце концов, я просто написал быструю функцию javascript для reset высоты после загрузки страницы, чтобы заставить макет работать. См. http://peterchristopher.com, чтобы понять, что я подразумеваю под прозрачностью для текстовой области.
Абсолютно ничего не может сделать таблицы, которые не могут выполнять CSS.
Похоже, существует распространенное заблуждение, что HTML и CSS должны быть легкими. Это не так. Если вы обнаружите, что хотите использовать таблицы, то ваши навыки CSS, которые нуждаются в улучшении не технологии (хотя у технологии, очевидно, есть много дыр, которые можно было бы улучшить).