Следует ли избегать таблиц в HTML любой ценой? - PullRequest
34 голосов
/ 17 сентября 2008

Желательно использовать таблицы на страницах HTML (теперь, когда у нас есть CSS)?

Какое применение таблиц? Какие функции / возможности есть у таблиц, которых нет в CSS?

Похожие вопросы

Ответы [ 27 ]

76 голосов
/ 17 сентября 2008

Нет - совсем нет. Но используйте таблицы для табличных данных. Только не используйте их для общего размещения.

Но если вы отображаете табличные данные, такие как результаты или, возможно, даже форму, используйте таблицы!

69 голосов
/ 17 сентября 2008

Я думаю, что я не в большинстве, но я все еще вижу много пользы для таблиц в HTML. Конечно, да, для таких вещей, как формы, вы просто не можете победить стол. Попытка выстроить метки и сопровождающие поля формы, безусловно, была бы возможна с использованием DIV, но какой это будет PITA, и изменение размера страницы в некоторых случаях было бы уродливым. Стол творит чудеса здесь.

Но учтите и более крупные проблемы. Например, вы пытались создать стандартный макет из 3 столбцов с верхним и нижним колонтитулами, используя только DIV и CSS? Опять же, это очень возможно, и есть около 1000 сайтов с примерами, но все они, как правило, страдают от одних и тех же проблем. Первая проблема заключается в том, что столбцы никогда не станут одинаковыми по высоте без помощи javascript. Вторая проблема заключается в том, что смена макета часто бывает сложной задачей, потому что сначала нужно все уладить, чтобы все было «правильно», поэтому вы не хотите с этим связываться. Наконец, и это возвращает нас к последнему пункту - это не легко. Вы должны выложить все свои DIV, затем вернуться и создать волшебный CSS, который заставляет эти DIV в правильное положение, а затем потратить несколько часов, настраивая его, пока он не станет правильным ... тьфу. А затем просмотр HTML без просмотра действительно не даст вам никакого представления о том, как выглядит страница, потому что в конечном итоге она ВСЕ интерпретируется CSS.

Теперь, вариант B. Используйте таблицу. Потратьте около 30 секунд, набирая теги

и , вероятно, вообще без CSS, без javascript 'fixit' и точно узнайте, как это будет выглядеть, просто взглянув на HTML.

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

12 голосов
/ 17 сентября 2008

Все до сих пор говорили, что таблицы должны использоваться только для табличных данных, и это правда. Взгляните на исходный HTML-код любой страницы SO, и вы увидите, что у них другая идея ...

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

11 голосов
/ 17 сентября 2008

За исключением табличных данных , к сожалению, таблицы все еще необходимы, если вы хотите создать гибкие сеточные макеты, такие как сложные формы, в кросс-браузерно-совместимом режиме.

CSS2 поддерживает создание гибких макетов сетки без использования элемента table через свойство отображения , но это не поддерживается в IE6 или IE7 .

Однако для большинства основных макетов форм достаточно CSS.

6 голосов
/ 17 сентября 2008

Если бы при настройке «табличного» макета было бы целесообразно использовать только CSS-эквивалент, я бы с удовольствием использовал CSS. Я считаю, что время, необходимое для имитации того, что другие перечислили здесь (равные высоты в ячейках, автоматически растущие ряды и т. Д.), Просто не стоит усилий. Я не получаю отдачу от своих инвестиций, в отличие от быстрого составления таблицы в большинстве случаев.

Все браузеры могут договориться о том, как именно должна быть накрыта таблица. Bam. Готово.

Вот как обычно работают мои CSS-глупости: Попробуйте настроить табличный макет в CSS. Потратьте 20 минут или больше, чтобы получить все в Mozilla, а затем откройте его в IE. Проведите еще 30 минут между этими двумя браузерами. Притворимся, что в мире всего два браузера, потому что мне действительно нужно поработать.

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

4 голосов
/ 17 сентября 2008

Преимущество CSS состоит в том, что он отделяет дизайн и макет от контента.

Если у вас есть табличные данные, то имеет смысл использовать тег <TABLE>. Если вы хотите расположить разные блоки контента, используйте <DIV> или <SPAN> и CSS.

3 голосов
/ 17 сентября 2008

Таблицы не имеют эквивалента в CSS2, и их нелегко дублировать с помощью css. Особая часть таблиц, которую сложно воспроизвести, - это автоматическое изменение размера столбцов. Несмотря на то, что легко позволить 1 строке вырасти до одинакового размера на странице, следующей строке трудно подобрать размер столбца или размер каждой ячейки динамически, и на самом деле это невозможно сделать без использования других языков сценариев, таких как JavaScript, PHP или другие. Вы можете использовать максимальную и минимальную ширину, а также заданные проценты для размеров ячеек или ширину ячеек жесткого кода, но динамически растущие ячейки работают хорошо для 1 строки, следующая строка ниже не будет соответствовать.

3 голосов
/ 18 июня 2010

Просматривая эти ответы, я не увидел ни одной реальной причины, по которой таблицы нужны для разметки, а именно HTML-письма.

Я работаю в очень, очень крупной финансовой компании, и мы отслеживаем около 600 различных рабочих мест в месяц ... многие из которых являются несколькими кампаниями по электронной почте.

Вы не можете использовать CSS для макета для любого почтового ридера. Есть несколько встроенных css-спецификаций, которые вы можете использовать, которые относятся к цвету, шрифту и размеру шрифта, и даже высота строки довольно широко доступны, но для макета вы должны использовать таблицы как все основные и самые второстепенные программы чтения электронной почты (Outlook 97 / 03, Entourage, MSN и т. Д.) Прочитайте их просто отлично.

Проблемы с таблицами вступают в игру, когда у вас есть тд, для которых не указана высота / ширина, содержат ли они данные или нет. Таким образом, «разбитые» макеты таблиц обычно исправляются путем уделения внимания атрибутам и да ... пробелам в html .... да пробелам, которые не должны иметь значения.

Так что, если вы когда-нибудь работаете в крупной компании / корпорации или у вас есть очень крупный клиент, будьте готовы выбросить все существующие технологии на улицу и надеть шапку html-стола!

3 голосов
/ 17 сентября 2008

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

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

2 голосов
/ 17 сентября 2008

Я думаю, все зависит от времени / усилий. Хотя пурист может сказать «использовать таблицы только для табличных данных», в прошлом я использовал таблицы для упрощения кросс-браузерной компоновки.

Для меня это вопрос использования времени. Я могу либо потратить свое время на изучение CSS, чтобы понять его правильно, либо я могу бросить его в таблицу и потратить на это гораздо меньше времени. Я склонен идти по этому пути, пока все не заработает. Как только функциональность появится, я возвращаюсь и полирую CSS / HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...