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






Нет, совсем нет. Но используйте таблицы для табличных данных. Только не используйте их для общей разметки.
Но если вы отображаете табличные данные, такие как результаты или, может быть, даже форму, используйте таблицы!
Формы не являются табличными данными. Тег <label> существует для связывания меток с полями в форме.
Прямой ответ, но почему? Таблицы широко используются для макетов, так что в этом плохого? Не могли бы вы сказать, почему, по вашему мнению, нельзя использовать таблицы для разметки? (Я не не согласен с вами - я просто думаю, что во многих случаях таблицы можно разумно использовать для верстки)
В произвольном порядке: 1) Они неэффективны - таблицы занимают место на каждой странице страницы, тогда как CSS можно кэшировать. 2) Они негибкие - вы можете внести изменения в одно место в файле CSS, и все страницы, использующие этот CSS, автоматически обновятся. Кроме того, некоторые браузеры не могут их правильно отображать (мобильные, встроенные и т. д.). 3) Они семантически бессмысленны, если вы на самом деле не используете их для табличных данных.
Концептуальная причина не использовать таблицы для макета заключается в том, что таблицы имеют определенное семантическое значение. Неиспользование их для этого приводит к неправильной интерпретации машины. Практическая причина не использовать таблицы заключается в том, что использование таблиц блокирует вывод в едином макете, в то время как использование макета на основе CSS позволяет использовать несколько презентаций с одной и той же разметкой, в первую очередь оптимизированный для мобильных устройств макет и оптимизированный для настольного компьютера макет.
Немного странно, что годы «использования таблиц для верстки - это плохо!» привели к тому, что люди начали спрашивать, предназначены ли они для использования таблиц вообще!
@ Крис: точно так же, как кажется, что никто не думает, что "и я" когда-либо правильно
Stack Overflow использует таблицы для макета. Шах и мат.
Таблицы используются для отображения табличных данных. Больше нечего добавить :-D
Таблицы предназначены для вывода табличных данных. Все, что вы можете отобразить в электронной таблице, столбцы результатов и тому подобное.
Предлагается использовать CSS вместо таблиц для столбчатых макетов, которые на самом деле не были настоящими таблицами. Никогда не предполагалось, что таблицы следует удалить полностью.
Преимущество CSS в том, что он отделяет дизайн и верстку от контента.
Если у вас есть табличные данные, имеет смысл использовать тег <TABLE>. Если вы хотите разметить разные блоки контента, вам следует использовать <DIV> или <SPAN> и CSS.
Мое очень простое и основное мнение по этому поводу заключается в том, что таблицы существуют для табличных данных, а не для размещения одного элемента поверх или рядом с другим элементом, потому что вам нравится, когда он там находится.
Итак - если вы хотите отобразить таблицу данных: сделайте это (с таблицей). Если вы хотите разместить контент на странице: используйте css.
Если есть причина для использования таблицы семантическим способом (например, для отображения табличных данных), используйте таблицы.
Просто не используйте таблицы для разметки. Семантическая разметка дает много преимуществ для поисковой машины и доступности.
До сих пор все говорили, что таблицы следует использовать только для табличных данных, и это правда. Взгляните на исходный код HTML любой страницы на SO, и вы увидите, что у них другая идея ...
Я думаю, что их объяснение состоит в том, что иногда с использованием таблицы намного проще. Тем не менее, есть много действительно хороших причин, по которым их следует избегать.
Я не поверил этому, пока не увидел. :-)
@nickf У меня вопрос. Базовый HTML-вид Google предназначен для пользователей с медленным подключением. Базовый макет представления Google HTML с использованием большого количества табличных данных. Тогда как это лучше загружается для пользователей с медленным подключением? Могу я узнать причину? Если DIV лучше, то почему они используют таблицу для разделения своего макета в представлении Basic HTML?
Таблицы не имеют эквивалента в CSS2, и их не так просто скопировать с помощью css. Особая часть таблиц, которую трудно воспроизвести, - это автоматический размер столбцов. Хотя легко позволить одной строке вырасти до одного и того же размера на странице, для следующей строки сложно динамически согласовывать размер столбца или размер каждой ячейки, и на самом деле это невозможно сделать без использования других языков сценариев, таких как javascript, php или другие. Вы можете использовать максимальную и минимальную ширину, а также установить процентные значения для размеров ячеек или ширины ячеек жесткого кода, но динамически растущие ячейки отлично работают для 1 строки, следующая строка под ней не будет совпадать.
За исключением табличные данные, таблицы, к сожалению, по-прежнему необходимы, если вы хотите создавать макеты сетки гибкий, такие как сложные формы, совместимым с кросс-браузером способом.
CSS2 поддерживает создание гибких макетов сетки без использования элемента table через отображать свойство, но это не поддерживается в IE6 или IE7.
Однако для большинства основных макетов форм должно быть достаточно CSS.
Я предполагаю, что на самом деле ваш вопрос - «Следует ли мне избегать использования HTML-таблиц для макетов?». Ответ: Нет. На самом деле, таблицы специально предназначены для управления компоновкой. Недостатком использования таблиц для управления компоновкой всей страницы является то, что исходный файл быстро становится трудно понять и отредактировать вручную. (Возможное) преимущество использования таблиц для управления всем макетом состоит в том, что есть особые опасения относительно кроссбраузерной совместимости и рендеринга. Я предпочитаю работать непосредственно с исходным файлом HTML, и для меня использование CSS делает это проще, чем использование таблиц для всего макета.
Нет, таблицы предназначены для табличного данные, а не для управления компоновкой / отображением.
"... специально предназначено для использования для управления макетом" ??? Г-н Бернерс-Ли может не согласиться.
Калр, у тебя есть ссылка, есть цитата?
Скорее всего, они предназначены специально для управления макетом - макетом табличных данных. Да, изначально задумка заключалась в табличной компоновке текстовых или числовых данных, но графические данные тоже являются данными - различие в значительной степени искусственное.
Резервирование таблиц для использования только для табличных данных работает большую часть времени. Есть определенные проблемы с компоновкой, которые намного легче решить с помощью таблиц, чем с чем-либо еще. Например, вертикальное выравнивание и столбцы одинаковой высоты. По другую сторону забора было несколько сложных таблиц данных, для которых я использовал плавающие блоки div, потому что таблицы не соответствовали требованиям.
Как и все остальное, используйте правильный инструмент для правильной работы, и иногда самый прагматичный инструмент не такой, как вы думаете. Тем не менее, я редко использую таблицы для макета, даже в приведенных мною примерах, потому что неизбежно сталкиваюсь с какой-то проблемой, которая заставляет меня все равно делать это с помощью CSS. Ваш пробег может отличаться.
Я верю и надеюсь, что эра использования таблиц для макета ушла. Проще говоря: стол это стол, ничего больше.
Я думаю, что в ближайшие несколько лет новой, похожей темой будет новая тема: следует ли мне использовать новую функцию CSS отображать: стол, таблица-ячейка, стол-ряд и т. д. Для макета ?? ? :-)
Я думаю, вы могли немного запутаться. CSS - это метод стилизации HTML-документов, будь то элемент таблицы или div.
Раньше таблицы использовались в HTML для разработки всего макета страницы. Было обычным явлением видеть несколько вложенных таблиц (обычно генерируемых программами WYSIWYG, такими как Dreamweaver), и это приводило к кошмару обслуживания.
С момента появления и принятия таблиц стилей CSS теперь правильно использовать только таблицу для табличных данных. Это означает, что если ваши данные наиболее естественно отображаются в виде таблицы, используйте элемент table. Вы по-прежнему можете стилизовать таблицу с помощью CSS.
Однако, и я в целом не одобряю этот метод, поскольку он дублирует существующие функции, можно использовать элементы для создания структуры, подобной таблице. На самом деле существует несколько веб-сайтов, которые сгенерируют для вас такой код, но у меня нет под рукой ссылок.
Помните также, что некоторые пользователи могут либо просматривать в текстовом режиме, либо использовать программу чтения с экрана, оба из которых, вероятно, сломают страницу (например, чтение столбцов по вертикали, а не по горизонтали), следовательно, правильное использование таблиц.
HTH
Ради вас самих, пожалуйста, не помещайте табличные данные в div. Это обязательно принесет вам место на Ежедневный WTF
Думаю, я здесь не в большинстве, но я все еще вижу много полезного для таблиц в HTML. Конечно, да, в таких вещах, как формы, вы просто не можете победить стол. Попытка выровнять метки и сопутствующие поля формы, безусловно, была бы возможна с использованием DIV, но какой это был бы PITA, и изменение размера страницы в некоторых случаях было бы некрасивым. Стол здесь творит чудеса.
Но также рассмотрите более крупные вопросы. Например, пробовали ли вы создать стандартный макет из трех столбцов с верхним и нижним колонтитулами, используя только DIV и CSS? Опять же, это очень возможно, и существует около 1000 веб-сайтов с примерами, но все они, как правило, имеют одни и те же проблемы. Первая проблема заключается в том, что столбцы никогда не должны становиться одинаковой высоты без какой-либо помощи javascript. Вторая проблема заключается в том, что изменение макета часто бывает непростой задачей, потому что это немного уравновешивает все, чтобы с самого начала все было «правильно», так что тогда вы не захотите с этим связываться. Наконец, и это возвращается к последнему пункту - это непросто. Вы должны выложить все свои DIV, затем вернуться и создать волшебный CSS, который заставит эти DIV занять правильное положение, а затем потратить несколько часов на его настройку, пока он не станет правильным ... тьфу. А затем просмотр HTML без программы просмотра действительно не дает вам НИКАКОГО представления о том, как выглядит страница, потому что в конце концов все это переинтерпретируется CSS.
Теперь вариант Б. Воспользуйтесь таблицей. Потратьте около 30 секунд на ввод тегов <tr> и <td>, возможно, вообще без CSS, без javascript 'fixit', и ТОЧНО знайте, как это будет выглядеть, просто взглянув на HTML.
Конечно, есть аргументы за и против таблиц, и пуристы, кажется, предпочитают DIV для макета, но не используйте DIV по религиозным причинам только потому, что кто-то сказал вам, что таблицы - зло. Используйте то, что лучше всего подходит для вас, вашей страницы и того, как ваши зрители будут взаимодействовать со страницей. Если это таблица, то используйте ее. Если нет, не надо.
Вы могли бы вызывать метки форм и вводить табличные данные? возможно ... но я использую css для этого, и как только вы сделаете это один раз, его легко применить на всех других сайтах. Делать решительный шаг....
Я знаю, как будет отображаться страница, глядя на разметку и CSS, точно так же, как вы можете мысленно просмотреть структуру сайта, глядя на разметку таблицы - это просто вопрос обучения. Я могу закодировать раскрывающееся меню на чистом CSS с неупорядоченным списком за считанные секунды, в то время как мне потребовались бы минуты, чтобы сделать это с таблицами. Это потому, что после собственного скептицизма я заставил себя думать в терминах блочной модели - и если бы вы хоть представляли, насколько мне помогли эти первые месяцы боли, то вы бы тоже попробовали :)
@alex, но вы должны признать, что вы не можете победить совместимость с браузером макетов таблиц: они просты, понятны и просты.
Мне также не нравится идея использования таблиц для размещения элементов на странице. Однако это не должно становиться религией - столы плохие. Я столкнулся с одним примером, когда у меня макет из трех столбцов, и мне нужно, чтобы центральный столбец рос вместе с содержимым. В итоге самым простым решением, которое хорошо работало во всех необходимых браузерах, было использование таблицы. IMHO CSS все еще имеет некоторые недостатки, и иногда лучше использовать что-то простое, что работает, чем просто слепо придерживаться какой-то идеи («таблицы плохие ...»).
вы даже можете использовать их для макета, если ваш макет несколько табличный. Мне нравится возможность динамической подстройки таблиц и ячеек под любую ширину окна браузера. Никогда не используйте фиксированную ширину или высоту, это просто портит ситуацию.
Если бы только CSS-эквивалент был столь же целесообразным при настройке «табличного» макета, я бы с удовольствием использовал CSS. Я считаю, что время, необходимое для имитации вещей, перечисленных здесь другими (равная высота ячеек, автоматически растущие строки и т. д.), Просто не стоит затраченных усилий. Я не получаю отдачи от своих инвестиций, в отличие от того, что в большинстве случаев быстро собираю стол.
Все браузеры могут договориться о том, как именно должна быть выложена таблица. Бам. Выполнено.
Вот как обычно обстоят дела с моими глупостями с CSS: Попробуйте настроить макет таблицы в CSS. Потратьте 20 минут или больше на получение всего этого в Mozilla, а затем откройте это в IE. Потратьте еще 30 минут на настройку этих двух браузеров. Представьте, что в мире всего два браузера, потому что мне действительно нужно поработать.
Я верю в обещание CSS: разделение проблем. Проблема в том, что для тех, кому нужно работать продуктивно, CSS не готов к работе в прайм-тайм. Или, возможно, это механизмы рендеринга браузеров - в зависимости от того, что.
Неправда, что все браузеры формируют таблицы одинаково. Например, IE распределяет процентные высоты по другому алгоритму, чем Mozilla и WebKit,
Это просто. Думайте о своей веб-странице как о реальной странице на бумаге. Таблицы на веб-странице следует использовать только тогда, когда вы рисуете таблицу на бумаге.
Еще один совет - использовать таблицу только с границей> 0. Таким образом, вы используете таблицы только тогда, когда иметь в виду вам нужна таблица (а не для макета).
Думаю, все зависит от времени / усилий. Хотя пуристы могут сказать «используйте таблицы только для табличных данных», в прошлом я использовал таблицы для облегчения кроссбраузерности.
Для меня это вопрос использования времени. Я могу либо потратить свое время на работу над CSS, чтобы исправить это, либо я могу бросить его в таблицу и потратить на это гораздо меньше времени. Я стараюсь идти этим путем, пока все не наладится. Когда функциональность есть, я возвращаюсь и полирую CSS / HTML.
Я думаю, что причина этого в том, что использование таблиц html легче понять при создании структуры и макета, чем CSS. Использование CSS более абстрактно, но помогает разделить ваш код.
В ответ на аргумент «структура» ... по определению, не используются таблицы html, дающие структуру данных, чтобы вы идентифицировали ее как «табличную». Будь то CSS или html, вы управляете потоком и компоновкой данных. Будь то табличное или иное ...
Если таблицы CSS так важны (и я уверен, что мой ответ приведет к какой-то войне пламени), почему в Visual Studio нет механизма для создания макета с использованием CSS? О, вы не проверяли особенности макета в VS? Да, вы получаете столы прямо от Microsoft. Я не жалуюсь, просто подчеркиваю, что если бы это значило столько же для остального мира, вы бы увидели, что MS перейдет на CSS.
На мой взгляд, делайте то, что лучше всего подходит для вашего проекта. Для одно- или двухстраничных веб-проектов я все еще использую html, потому что то, что он делает, очевидно. Использование CSS более абстрактно, и иногда по утрам я просто не пил столько кофе. Таблицы HTML могут быстро запутаться. CSS требует немного больше времени, чтобы получить беспорядок, но тоже.
Таблицы имеют смысл только тогда, когда вы пытаетесь отобразить табличные данные, и все. Для макетов вы всегда должны использовать DIV и играть с позиционированием CSS.
Здесь я должен использовать подход таблиц. Причина этого просто кроется в стоимости. Пока не появится хорошо поддерживаемый CSS-ориентированный подход к разметке, а я говорю о макроуровне ... а не микро внутри контейнеров, попытка включить позиционирование CSS в обобщенный подход к разметке неэффективна. Вы должны подойти к этому с точки зрения человека, выписывающего чек на разработку.
Несколько лет назад я заключил контракт на разработку и обслуживание сайта для крупной сети отелей. Мы выбрали раскладку, управляемую таблицами; ваш основной заголовок, тело, нижний колонтитул с левыми и правыми столбцами. Мы также использовали таблицы для некоторых более тонких элементов, таких как неграфические кнопки. Материнская компания сети поддерживала собственный сайт и использовала чистый CSS-подход к верстке. Когда вышел IE7, наш сайт работал без изменений. На сайте материнской компании царил беспорядок. В целом они потратили около 1000 часов (между встречами / разработкой / контролем качества / развертыванием) на устранение проблем.
Когда вам платят за разработку сайта, частью вашей ответственности является снижение будущих рисков и минимизация будущих затрат на разработку, особенно если эти затраты не повышают ценность сайта (вашего продукта).
Хотя для некоторых макетов использование таблиц поначалу может показаться более простым, когда приходит время обслуживания, использование css окупается. Особенно, если вы когда-нибудь захотите изменить положение чего-либо или хотите использовать один и тот же макет в нескольких местах.
ИМХО, таблицы следует использовать только при представлении таблиц. Никогда в целях макета.
@toddhd, пропаганда использования таблиц для разметки просто для экономии времени - это отговорка. Если время является проблемой, вы можете быстро создать столбчатый макет без таблиц, используя такую структуру, как Чертеж CSS или 960 сетка.
Похоже, это зависит от того, на что были способны браузеры, когда вы начинали проектировать. Если вы начали еще тогда, когда работали только таблицы, то это то, что вы, вероятно, всегда захотите использовать, потому что вы это знаете. Или, если это то, что вам нравилось использовать даже после того, как браузеры расширили возможности для рендеринга CSS ...
Мне просто не нравится делать одно и то же снова и снова, потому что это легко, и я знаю, как это делать. Это скучно. Я бы предпочел изучить новые техники, чем что-то отвергать, потому что я не знаю, как это использовать, или думаю, что у меня нет времени учиться.
Я не люблю использовать таблицы, я их не понимаю, они кажутся чуждыми и оскорбительными, но это потому, что я начал в 2005 году. Я также не использую дизайнерские программы для создания шаблонов, потому что я предпочитаю ручное кодирование.
если вам нужно использовать стол, ваш макет, вероятно, отстой. Покажите мне один хорошо спроектированный сайт, на котором используются таблицы, и я покажу вам тысячу, на которых их нет.
Многие люди используют термин «пурист». Это чушь. Вы бы напечатали газетный экземпляр в книге? Вы бы разработали брошюру с помощью Excel? Нет? Тогда зачем вам использовать таблицу для отображения нетабличных данных?
В большинстве случаев трудности, с которыми люди сталкиваются при отказе от таблиц для разметки, являются результатом их собственного незнания HTML / CSS / принципов хорошего дизайна. Хотя вам может быть трудно добиться равномерного распределения многоколоночных макетов в вертикальном направлении, вы можете попробовать другой метод. DIV - это не ТАБЛИЦЫ. Вы можете создавать фальшивые столбцы, используя широкие границы, фон страницы и т. д. Потратьте некоторое время на то, чтобы научиться делать то, что вы собираетесь делать, или навсегда останетесь человеком без каких-либо полезных навыков. (http://www.alistapart.com было бы хорошим началом)
Я искренне удивлен, что этот вопрос возник в 2008 году. DIV возникли, когда я учился в старшей школе. Перестань быть новичком.
И, как уже упоминалось выше, таблицы на мобильных устройствах и программах чтения с экрана сильно не работают.
Просматривая эти ответы, я не увидел ни одной реальной причины, по которой таблицы необходимы для разметки, а именно электронной почты html.
Я работаю в очень, очень большой финансовой компании, и мы отслеживаем около 600 различных вакансий в месяц ... многие из которых - это несколько кампаний по электронной почте.
Вы не можете использовать css для разметки для любого почтового читателя. Есть несколько встроенных спецификаций css, которые вы можете использовать, которые относятся к цвету, шрифту и размеру и даже высоте строки довольно широко доступны, но для макета вы должны использовать таблицы как все основные и самые второстепенные программы чтения электронной почты (Outlook 97 / 03, Entourage, MSN и т. д.) Читаются нормально.
Проблемы с таблицами возникают, когда у вас есть td, для которых не указана высота / ширина, независимо от того, содержат ли они данные или нет. Итак, «сломанные» макеты таблиц обычно исправляются, уделяя внимание атрибутам и да ... пробелам в html .... да пробелам, которые не должны иметь значения.
Итак, если вы когда-нибудь будете работать в большой компании / корпорации или у вас появится очень крупный клиент, будьте готовы выбросить все современные технологии и надеть шляпу HTML-таблицы!