Следует ли избегать таблиц в HTML любой ценой?

Question

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

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

Вопросы, относящиеся

• Tables instead of DIVs
• DIV vs TABLE
  • DIVs vs. TABLEs a rebuttal please

Answer 1

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

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

Answer 2

Таблицы используются для отображения табличных данных. Больше нечего добавить: -D

Answer 3

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

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

Answer 4

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

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

Answer 5

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

Итак - если вы хотите отобразить таблицу данных: сделайте это (со столом). Если вы хотите разместить контент на странице: используйте css.

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

Помимо таблиц tabular data, таблицы, к сожалению, по-прежнему необходимы, если вы хотите создать гибкие сетки, такие как сложные формы, совместимые с кросс-браузером.

CSS2 имеет поддержку для создания гибких макетов сетки без использования элемента table через display property, но это not supported in IE6 or IE7.

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

Answer 10

Я собираюсь предположить, что ваш вопрос на самом деле - «Должен ли я избегать использования таблиц HTML для целей макета?». Ответ таков: Нет. Фактически, таблицы предназначены специально для управления макетом. Недостаток использования таблиц для управления макетом всей страницы заключается в том, что исходный файл становится затруднительным для понимания и редактирования вручную. A (возможное) преимущество использования таблиц для управления всей компоновкой - если есть особые проблемы в отношении совместимости и рендеринга кросс-браузера. Я предпочитаю работать непосредственно с исходным файлом HTML, и для меня использование CSS упрощает работу с таблицами для всего макета.

Answer 11

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

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

Answer 12

Я верю и надеюсь, что эпоха использования таблиц для макета исчезла. Проще говоря: стол - это стол, ничего больше.

То, что я думаю, что буду новая, похоже, flamewar темы на ближайшие несколько лет: я должен использовать новую особенность CSS дисплей: стола, стола-клетку, настольных ряд и т.д. для макет ?? ? :-)

Answer 13

Думаю, вы можете быть немного смущены. CSS - это метод стилизации HTML-документов, будь то элемент таблицы или «div».

Раньше считалось, что таблицы были использованы в HTML для разработки всего макета страницы. Было обычным видеть несколько вложенных таблиц (обычно генерируемых программами WYSIWYG, таких как Dreamweaver), и это привело к кошмару для поддержания.

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

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

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

НТН

Answer 14

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

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

Теперь, вариант B. Используйте таблицу. Потратьте около 30 секунд, набрав теги, возможно, не CSS вообще, без javascript 'fixit' и узнайте ТОЧНО, как это будет выглядеть, просто взглянув на HTML.

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

Answer 15

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

Answer 16

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

Answer 17

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

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

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

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

Answer 18

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

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

Answer 19

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

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

Answer 20

Я думаю, что причина в том, что использование таблиц html легче понять при создании структуры и макета, чем CSS. Использование CSS более абстрактно, но помогает отделить ваш код.

В ответ на аргумент «структура» ... по определению не использует таблицы html, дающие структуру данным, так что вы определяете их как «табличные». Будь то CSS или html, вы контролируете поток и компоновку данных. Будь это табличным или иным образом ...

Если таблицы CSS настолько важны (и я уверен, что мой ответ начнет какую-то пламенную войну), почему в Visual Studio нет механизма для создания макета с использованием CSS ? О, вы не проверили особенность компоновки в VS? Да, вы получаете столы, прямо из Microsoft. Я не жалуюсь, просто заявляя, что если это значило бы для всего остального мира, вы увидите, что MS переключается на CSS.

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

Answer 21

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

Answer 22

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

Несколько лет назад я договорился о разработке и обслуживании сайта для крупной сети отелей. Мы пошли с табличным управлением; ваш основной заголовок, тело, нижний колонтитул слева/справа. Мы также использовали таблицы для некоторых более тонких элементов, таких как неграфические кнопки. Материнская компания цепи поддерживала свой собственный сайт и придерживалась чистого CSS-подхода к макету. Когда IE7 вышел, наш сайт отлично работал без каких-либо изменений. Сайт материнской компании был беспорядок. В целом они потратили около 1000 общих часов (между встречами/разработкой/QA/развертыванием), которые фиксировали проблемы.

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

Answer 23

Хотя для некоторых макетов с использованием таблиц сначала может показаться проще, когда время обслуживания приходит с использованием калькулятора css. Особенно, если вы когда-либо хотите изменить положение чего-либо или хотите использовать один и тот же макет в нескольких местах.

IMHO, таблицы следует использовать только при представлении таблиц. Никогда для целей компоновки.

Answer 24

@toddhd, выступая за использование таблиц для компоновки, просто для экономии времени - это компьютер. Если это проблема, вы можете быстро создать столбчатый макет без таблиц, используя фреймворк, например Blueprint CSS или 960 Grid.

Answer 25

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

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

Мне не нравятся столы, я их не понимаю, они кажутся чуждыми и оскорбительными, но это потому, что я начал в 2005 году. Я также не использую программы разработки, чтобы выплевывать шаблоны, потому что я предпочитаю руку кодирование.

Answer 26

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

Многие люди бросают вызов термину «пурист». Это мусор. Будете ли вы печатать газетную копию в книге? Вы бы разработали брошюру с Excel? Нет? Тогда зачем использовать таблицу для отображения не табличных данных?

В большинстве случаев трудности, с которыми сталкиваются люди в отпуске таблиц для макета, являются результатом их собственного незнания HTML/CSS/Good Design Principles. Хотя вам может быть трудно сделать равномерное распределение нескольких столбцов в вертикальном направлении, вы можете подумать попробовать другой метод. DIV не являются ТАБЛИЦАМИ. Вы можете создавать фальшивые столбцы с использованием широких границ, фоновых страниц и т. Д. Проведите некоторое время, фактически научившись делать то, что вы собираетесь делать, или навсегда будете рассматриваться как кто-то, не обладающий никаким полезным навыком. (http://www.alistapart.com было бы хорошим началом)

Я искренне удивлен, что этот вопрос возникает в 2008 году. DIVs появились, когда я учился в старшей школе. Прекратите быть noob.

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

Answer 27

Сканирование по этим ответам, я не видел ни одной реальной причины, когда таблицы необходимы для макета, а это html-письма.

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

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

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

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