Следует ли избегать таблиц в HTML любой ценой?
Желательно использовать таблицы на страницах HTML (теперь, когда у нас есть CSS)?
Каковы применения таблиц? Какие функции / возможности есть у таблиц, которых нет в CSS?
Смежные вопросы
27 ответов
Нет, совсем нет. Но используйте таблицы для табличных данных. Только не используйте их для общего размещения.
Но если вы отображаете табличные данные, такие как результаты или, возможно, даже форму, используйте таблицы!
Я думаю, что я не в большинстве, но я все еще вижу много пользы для таблиц в HTML. Конечно, да, для таких вещей, как формы, вы просто не можете победить таблицу. Попытка выстроить метки и сопровождающие поля формы, безусловно, была бы возможна с использованием DIV, но какой это будет PITA, и изменение размера страницы в некоторых случаях было бы уродливым. Стол творит чудеса здесь.
Но также рассмотрим более крупные вопросы. Например, вы пытались создать стандартный макет из 3 столбцов с верхним и нижним колонтитулами, используя только DIV и CSS? Опять же, это очень возможно, и есть около 1000 сайтов с примерами, но все они, как правило, страдают от одних и тех же проблем. Первая проблема заключается в том, что столбцы никогда не станут одинаковыми по высоте без помощи javascript. Вторая проблема заключается в том, что изменение макета часто является сложной задачей, потому что сначала нужно все уладить, чтобы все было "правильно", поэтому вы не хотите с этим связываться. Наконец, и это возвращает нас к последнему пункту - это не легко. Вы должны выложить все свои DIV, затем вернуться и создать волшебный CSS, который вынуждает эти DIV в правильное положение, а затем потратить несколько часов, настраивая его, пока он не станет правильным... тьфу. А затем просмотр HTML без просмотра действительно не даст вам никакого представления о том, как выглядит страница, потому что в конце концов она ВСЕ интерпретируется CSS.
Теперь вариант Б. Используйте таблицу. Потратьте около 30 секунд, набирая теги
Конечно, есть аргументы за и против таблиц, и пуристы, кажется, предпочитают DIV для разметки, но не используйте DIV по религиозным соображениям только потому, что кто-то сказал вам, что таблицы являются злом. Используйте то, что лучше всего подходит для вас, вашей страницы и того, как ваши зрители будут взаимодействовать со страницей. Если это таблица, то используйте ее. Если нет, не надо.
2008-09-17 12:28Все до сих пор говорили, что таблицы должны использоваться только для табличных данных, и это правда. Посмотрите на источник HTML любой страницы на SO, и вы увидите, что у них другая идея...
Я думаю, что их обоснование в том, что иногда использование таблицы намного проще. Тем не менее, есть много действительно хороших причин юзабилити, чтобы их избегать.
К сожалению, кроме табличных данных, таблицы все еще необходимы, если вы хотите создавать гибкие макеты сетки, такие как сложные формы, кросс-браузерно-совместимым образом.
CSS2 поддерживает создание гибких макетов сетки без использования table элемент через свойство display, но это не поддерживается в IE6 или IE7.
Однако для большинства базовых макетов форм достаточно CSS.
Если бы только CSS-эквивалент был таким же целесообразным при настройке "табличного" макета, я бы с удовольствием использовал CSS. Я считаю, что время, необходимое для имитации того, что другие перечислили здесь (равные высоты в ячейках, автоматически растущие ряды и т. Д.), Просто не стоит усилий. Я не получаю отдачу от своих инвестиций, в отличие от быстрого составления таблицы в большинстве случаев.
Все браузеры могут договориться о том, как именно должен быть накрыт стол. Bam. Готово.
Вот как обычно работают мои CSS-глупости: Попробуйте настроить табличный макет в CSS. Потратьте 20 минут или больше, чтобы получить все в Mozilla, а затем откройте его в IE. Проведите еще 30 минут между этими двумя браузерами. Притворимся, что в мире только два браузера, потому что мне действительно нужно поработать.
Я верю в обещание CSS: разделение интересов. Проблема в том, что для тех, кто должен быть продуктивным, CSS не готов к прайм-тайм. Или, возможно, это движки рендеринга браузеров - в зависимости от того, что.
Преимущество CSS состоит в том, что он отделяет дизайн и макет от контента.
Если у вас есть табличные данные, то имеет смысл использовать <TABLE> тег. Если вы хотите расположить разные блоки контента, используйте <DIV> или же <SPAN> и CSS.
Таблицы не имеют эквивалента в CSS2, и их нелегко дублировать с помощью css. Особая часть таблиц, которую трудно воспроизвести, - это автоматическое изменение размера столбцов. Несмотря на то, что легко позволить 1 строке вырасти до одинакового размера на странице, следующей строке трудно подобрать размер столбца или размер каждой ячейки динамически, и на самом деле это невозможно сделать без использования других языков сценариев, таких как JavaScript, PHP или другие. Вы можете использовать максимальную и минимальную ширину, а также заданные проценты для размеров ячеек или ширину ячеек жесткого кода, но динамически растущие ячейки работают нормально для 1 строки, следующая строка ниже не будет совпадать.
Таблицы предназначены для вывода табличных данных. Все, что вы можете отобразить в электронной таблице, столбцы результатов и тому подобное.
Предложение использовать CSS вместо таблиц для столбчатых макетов, которые на самом деле не были настоящими таблицами. Никогда не предполагалось, что таблицы должны быть полностью удалены.
Просматривая эти ответы, я не увидел ни одной реальной причины, по которой для разметки необходимы таблицы, а именно - HTML-письма.
Я работаю в очень, очень крупной финансовой компании, и мы отслеживаем около 600 различных рабочих мест в месяц... многие из которых являются несколькими кампаниями по электронной почте.
Вы не можете использовать CSS для макета для любого почтового ридера. Есть несколько встроенных css-спецификаций, которые вы можете использовать, которые относятся к цвету, шрифту и размеру шрифта, и даже высота строки довольно широко доступны, но для макета вы должны использовать таблицы как все основные и самые второстепенные программы чтения электронной почты (Outlook 97/03, Entourage, MSN и т. Д.) Читать их просто отлично.
Проблемы с таблицами вступают в игру, когда у вас есть тд, для которых не указана высота / ширина, независимо от того, содержат они данные или нет. Итак, "разбитые" макеты таблиц обычно исправляются, обращая внимание на атрибуты и да... пробел в html.... да пробел, который не должен иметь значения.
Так что, если вы когда-нибудь работаете в крупной компании / корпорации или у вас есть очень крупный клиент, будьте готовы выбросить все современные технологии и надеть шапку html-стола!
Я думаю, что все зависит от времени / усилий. Хотя пурист может сказать "использовать таблицы только для табличных данных", в прошлом я использовал таблицы для упрощения кросс-браузерной компоновки.
Для меня это вопрос использования времени. Я могу либо потратить свое время на изучение CSS, чтобы понять его правильно, либо я могу бросить его в таблицу и потратить на это гораздо меньше времени. Я склонен идти по этому пути, пока все не заработает. Как только функциональность будет там, я вернусь и отполирую CSS/HTML.
Я должен идти с подходом таблиц здесь. Причина этого сводится просто к стоимости. Пока не получится хорошо поддерживаемый CSS-ориентированный подход к компоновке, и я говорю о макроуровне... а не о микроконтроллере внутри контейнеров, попытка включить позиционирование CSS в обобщенный подход к компоновке неэффективна. Вы должны подходить к этому с точки зрения человека, выписывающего чек на разработку.
Несколько лет назад я заключил контракт на разработку и обслуживание сайта для крупной сети отелей. Мы пошли с настольным расположением; ваш основной колонтитул, тело, нижний колонтитул с левым / правым столбцами. Мы также использовали таблицы для некоторых более тонких элементов, таких как неграфические кнопки. Компания-учредитель сети поддерживала собственный сайт и придерживалась чистого CSS-подхода к верстке. Когда вышел IE7, наш сайт работал без каких-либо изменений. На сайте материнской компании был беспорядок. В целом они потратили около 1000 часов (между встречами / разработкой /QA/ развертыванием), чтобы решить проблемы.
Когда вам платят за разработку сайта, часть вашей ответственности состоит в том, чтобы уменьшить риск в будущем и минимизировать будущие затраты на разработку, особенно если эти затраты не повышают ценность сайта (вашего продукта).
Я думаю, вы можете быть немного смущены. CSS - это метод стилизации HTML-документов, будь то элемент таблицы или div.
Раньше таблицы использовались в HTML для разработки всего макета страницы. Было обычным видеть несколько вложенных таблиц (обычно генерируемых программами WYSIWYG, такими как Dreamweaver), и это приводило к кошмару обслуживания.
С момента появления и принятия таблиц стилей CSS теперь правильно использовать только таблицу для табличных данных. Это означает, что если ваши данные наиболее естественно отображаются в виде таблицы, используйте элемент таблицы. Вы все еще можете стилизовать таблицу с помощью CSS.
Однако, и я в целом не одобряю этот метод, поскольку он дублирует существующие функциональные возможности, можно использовать элементы для построения структуры, подобной таблице. На самом деле есть несколько сайтов, которые будут генерировать такой код для вас, но у меня нет ссылок на руки.
Помните также, что некоторые пользователи могут либо просматривать только в текстовом режиме, либо использовать программу чтения с экрана, которая, вероятно, сломает страницу (например, чтение столбцов по вертикали, а не по горизонтали), следовательно, правильное использование таблиц.
НТН
Я верю и надеюсь, что эра использования таблиц для разметки прошла. Проще говоря: стол - это стол, больше ничего.
То, что я думаю, будет новой, похожей, пламенной темой в течение следующих нескольких лет: я должен использовать новую функцию отображения CSS: таблица, ячейкатаблицы, строка таблицы и т. Д. Для макета???:-)
Хотя для некоторых макетов использование таблиц может показаться более простым на первый взгляд, когда время обслуживания приходит, использование css окупается. Особенно, если вы когда-нибудь захотите изменить положение чего-либо, или если вы хотите использовать один и тот же макет в нескольких местах.
ИМХО, таблицы следует использовать только при представлении таблиц. Никогда в целях макета.
Мое очень простое и базовое мнение по этому поводу состоит в том, что таблицы предназначены для табличных данных, а не для размещения одной вещи сверху или рядом с другим элементом, потому что вам, как оказалось, там нравится.
Итак, если вы хотите отобразить таблицу данных: сделайте это (с таблицей). Если вы хотите разместить контент на странице: используйте css.
Я думаю, что причина этого так велика в том, что использование HTML-таблиц легче понять при создании структуры и макета, чем CSS. Использование CSS более абстрактно, но помогает отделить ваш код.
В ответ на аргумент "структура"... по определению не использует таблицы html, дающие структуру данным, чтобы вы идентифицировали ее как "табличную". Будь то CSS или HTML, вы управляете потоком и макетом данных. Будь то табличное или нет...
Если таблицы CSS так важны (и я уверен, что мой ответ положит начало некоторой войне пламени), почему в Visual Studio нет механизма для создания макета с использованием CSS? О, вы не проверяли функцию разметки в VS? Да, вы получаете таблицы, прямо из Microsoft. Я не жалуюсь, просто подчеркиваю, что если бы это значило для всего остального мира, вы бы увидели, что MS переключилась на CSS.
По моему мнению, делайте то, что лучше всего подходит для вашего проекта. Для веб-проектов на одну или две страницы я все еще использую html, потому что это очевидно. Использование CSS более абстрактно, и по утрам у меня просто не было много кофе. Таблицы HTML могут стать грязными, быстро. CSS занимает немного больше времени, чтобы запутаться, но тоже.
Если есть причина для использования таблицы семантическим способом (например, для отображения табличных данных), используйте таблицы.
Просто не используйте таблицы, чтобы делать макеты. Существует множество преимуществ поиска и доступности, которые вы получаете с помощью семантической разметки.
Мне также не нравится идея использования таблиц для размещения элементов на странице. Однако это не должно стать религией - таблицы плохие. Я сталкивался с одним примером, где у меня есть макет из трех столбцов, и мне нужен центральный столбец, чтобы расти вместе с содержимым. В конце концов, решение, которое было самым простым и хорошо работало во всех необходимых браузерах, заключалось в использовании таблицы. ИМХО CSS все еще имеет некоторые недостатки, и иногда лучше использовать что-то простое, которое работает, а не просто слепо придерживаться какой-либо идеи ("таблицы плохие...").
Кажется, зависит от того, на что способны браузеры, когда вы начинаете проектировать. Если вы начали тогда, когда работали только таблицы, то это то, что вы, вероятно, всегда захотите использовать, потому что вы это знаете. Или, если это то, что вам нравилось использовать даже после того, как браузеры продвинулись, чтобы иметь возможность отображать CSS...
Я просто не люблю повторять одни и те же вещи снова и снова, потому что это легко, и я знаю, как это делать. Это скучно. Я бы лучше изучил новые техники, чем отказался бы от чего-либо, потому что я не знаю, как его использовать, или я думаю, что у меня нет времени на обучение.
Я не люблю использовать таблицы, я не понимаю их, они кажутся чуждыми и оскорбительными, но это потому, что я начал в 2005 году. Я также не использую дизайнерские программы, чтобы выкладывать шаблоны, потому что я предпочитаю ручное кодирование.
Таблицы используются для отображения табличных данных. Больше нечего добавить:-D
Резервирование таблиц для использования только для табличных данных работает большую часть времени. Существуют определенные проблемы с компоновкой, которые гораздо проще решить с помощью таблиц, чем что-либо еще. Например, вертикальное выравнивание и столбцы равной высоты. С другой стороны, были некоторые сложные таблицы данных, для которых я использовал плавающие div, потому что таблицы не соответствовали требованиям.
Как и все остальное, используйте правильный инструмент для правильной работы, и иногда самый прагматичный инструмент - это не то, что вы думаете. Тем не менее, я редко использую таблицы для разметки, даже в приведенных мной примерах, потому что неизбежно сталкиваюсь с некоторой проблемой, которая в любом случае заставляет меня делать это с помощью CSS. Ваш пробег может отличаться.
Вы даже можете использовать их для макета, если ваш макет несколько табличный. Мне нравится особенность таблиц и ячеек, динамически приспосабливающихся к любой ширине окна браузера. Никогда не используйте фиксированную ширину или высоту, это просто мешает.
Это просто. Думайте о своей веб-странице как о реальной странице на бумаге. Вы должны использовать таблицы на веб-странице только тогда, когда вы будете рисовать таблицу на бумаге.
Другой совет - использовать таблицу только с границей> 0. Таким образом, вы используете таблицы только тогда, когда вы хотите, чтобы таблица была (а не для макета).
@toddhd, отстаивание использования таблиц для разметки просто для экономии времени. Если время является проблемой, то вы можете быстро создать столбчатый макет без таблиц, используя такую среду, как Blueprint CSS или 960 Grid.
Таблицы имеют смысл только тогда, когда вы пытаетесь отобразить табличные данные и все. Для макетов вы всегда должны использовать DIVs и играть с позициями CSS.
Я собираюсь предположить, что ваш вопрос на самом деле - "Следует ли мне избегать использования таблиц HTML для разметки?", Ответ: Нет. На самом деле, таблицы специально предназначены для управления макетом. Недостаток использования таблиц для управления макетом всей страницы заключается в том, что исходный файл быстро становится трудно понять и редактировать вручную. (Возможное) преимущество использования таблиц для управления всей компоновкой состоит в том, что существуют конкретные проблемы совместимости браузера и рендеринга. Я предпочитаю работать напрямую с исходным файлом HTML, и для меня использование CSS делает это проще, чем использование таблиц для всего макета.
Если вам нужно использовать таблицу, ваш макет, вероятно, отстой. Покажите мне один хорошо разработанный сайт, который использует таблицы, и я покажу вам тысячи, которые этого не делают.
Многие люди используют термин "пурист". Это мусор. Вы бы напечатали копию газеты в книге? Вы бы разработали брошюру с помощью Excel? Нет? Тогда зачем вам использовать таблицу для отображения не табличных данных?
В большинстве случаев трудности, с которыми люди сталкиваются при отпускании таблиц для разметки, являются результатом их собственного незнания HTML/CSS/ Принципов хорошего дизайна. В то время как вам может быть трудно сделать макеты из нескольких столбцов равномерно вытянутыми в вертикальном направлении, вы можете попробовать другой метод. DIVs не ТАБЛИЦЫ. Вы можете создавать искусственные столбцы, используя широкие границы, фоны страниц и т. Д. Потратьте некоторое время на то, чтобы научиться делать то, что вы намереваетесь делать, или навсегда стать кем-то без каких-либо полезных навыков. ( http://www.alistapart.com/ будет хорошим началом)
Я искренне удивлен, что этот вопрос возникает в 2008 году. DIV появились, когда я учился в средней школе. Перестань быть нубом.
И, как упоминалось выше, таблицы терпят неудачу на мобильных устройствах и средствах чтения с экрана.