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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

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

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

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

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

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

То, что я думаю, будет новой, аналогичной, проблематичной темой на следующие несколько лет: следует ли использовать новую функцию CSS display: таблица, ячейка, таблица-строка и т.д. для компоновки???: -)

Ответ 14

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

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

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

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

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

НТН

Ответ 15

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

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

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

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

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

Ответ 19

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

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

Ответ 20

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

Ответ 21

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

Ответ 22

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

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

Ответ 23

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

Ответ 24

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

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

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

Ответ 25

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

Ответ 26

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

Ответ 27

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

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

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

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

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