Следует ли избегать использования таблиц в HTML любой ценой?
https://stackoverflow.com/questions/82391
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Целесообразно ли использовать таблицы на HTML-страницах (теперь, когда у нас есть CSS)?
Каковы области применения таблиц?Какими функциями / возможностями обладают таблицы, которых нет в CSS?
Сопутствующие вопросы
Решение
Нет, вовсе нет.Но используйте таблицы для табличных данных.Только не используйте их для общей компоновки.
Но если вы отображаете табличные данные, такие как результаты или, может быть, даже форму, продолжайте использовать таблицы!
Другие советы
Я предполагаю, что я здесь не в большинстве, но я все еще вижу много пользы для таблиц в HTML.Конечно, да, для таких вещей, как формы, вы просто не можете превзойти таблицу.Попытка выровнять метки и сопроводительные поля формы, безусловно, была бы возможна с помощью DIV, но какой бы это был ЛАВАШ, и изменение размера страницы в некоторых случаях было бы некрасивым.Таблица здесь творит чудеса.
Но также рассмотрим более масштабные проблемы.Например, вы пробовали создать стандартный макет из 3 столбцов с верхним и нижним колонтитулами, используя только DIV и CSS?Опять же, это очень возможно, и существует около 1000 веб-сайтов с примерами, но все они, как правило, страдают от одних и тех же проблем.Первая проблема заключается в том, что столбцам на самом деле никогда не нравится, когда все они становятся одинаковой высоты без какой-либо помощи javascript.Вторая проблема заключается в том, что изменение макета часто является сложной задачей, потому что для начала нужно немного сбалансировать все "в самый раз", чтобы потом не хотелось с этим возиться.Наконец, и это возвращается к последнему пункту - это нелегко.Вы должны выложить все свои DIV, затем вернуться назад и создать волшебный CSS, который установит эти DIV в нужное положение, а затем потратить несколько часов на настройку, пока они не станут правильными....тьфу.И тогда, просматривая HTML без программы просмотра, вы действительно НЕ представляете, как выглядит страница, потому что в конце концов ВСЕ это переосмысливается CSS.
Теперь перейдем к варианту Б.Используйте таблицу.Потратьте около 30 секунд на ввод <tr> и <td> теги, вероятно, вообще не содержат CSS, никакой "фиксации" javascript, и вы точно знаете, как это будет выглядеть, просто взглянув на HTML.
Конечно, есть аргументы за и против таблиц, и пуристы, похоже, предпочитают DIV для компоновки, но не используйте DIV по религиозным соображениям только потому, что кто-то сказал вам, что таблицы - это зло.Используйте то, что лучше всего подходит для вас, вашей страницы и того, как ваши зрители будут взаимодействовать со страницей.Если это таблица, то используйте ее.Если нет, то не делай этого.
До сих пор все говорили, что таблицы следует использовать только для табличных данных, и это правда.Взгляните на исходный код HTML любой страницы на SO, и вы увидите, что у них другая идея...
Я думаю, что их обоснование заключается в том, что иногда использовать таблицу намного проще.Хотя есть много действительно веских причин для удобства использования, по которым их следует избегать.
Кроме как для табличные данные, таблицы , к сожалению, все еще необходимы, если вы хотите создать Гибкий макеты сетки, такие как сложные формы, совместимые с другими браузерами.
CSS2 поддерживает создание гибких макетов сетки без использования table элемент через свойство отображения, но это не поддерживается в IE6 или IE7.
Однако для большинства базовых макетов форм должно быть достаточно CSS.
Если бы только эквивалент CSS был столь же целесообразен при настройке "табличного" макета, то я бы с удовольствием использовал CSS.Я нахожу, что время, необходимое для имитации того, что другие перечислили здесь (равные высоты ячеек, автоматически растущие строки и т.д.), просто не стоит затраченных усилий.В большинстве случаев я не получаю отдачу от своих инвестиций, в отличие от быстрого составления таблицы.
Все браузеры могут договориться о том, как именно должна быть оформлена таблица.Бам.Выполнено.
Вот как обычно проходят мои CSS-безумства:Попробуйте настроить табличный макет в CSS.Потратьте 20 минут или больше на то, чтобы сделать все именно так в Mozilla, а затем откройте это в IE.Потратьте еще 30 минут на настройку между этими двумя браузерами.Притворись, что в мире есть только два браузера, потому что мне действительно нужно кое-что сделать.
Я верю в перспективы CSS:Разделение интересов.Проблема в том, что для тех, кому нужно быть продуктивным, CSS не готов к прайм-тайму.Или, возможно, это движки рендеринга браузеров - в зависимости от того, что именно.
Преимущество CSS в том, что он отделяет дизайн и верстку от контента.
Если у вас есть табличные данные, то имеет смысл использовать <TABLE> бирка.Если вы хотите разместить разные блоки контента, вам следует использовать <DIV> или <SPAN> и CSS.
Таблицы предназначены для вывода табличных данных.Все, что вы могли бы отобразить в электронной таблице, столбцы результатов и тому подобное.
Предложение использовать CSS вместо таблиц предназначено для столбчатых макетов, которые на самом деле не были настоящими таблицами.Это никогда не предполагало, что таблицы должны быть полностью удалены.
Таблицы не имеют эквивалента в CSS2, и их не так-то просто скопировать с помощью css.Конкретная часть таблиц, которую трудно воспроизвести, - это автоматическое определение размера столбцов.Хотя легко позволить 1 строке увеличиться до одинакового размера по всей странице, следующей строке сложно динамически соответствовать размеру столбца или каждой ячейки, и фактически это невозможно сделать без использования других языков сценариев, таких как javascript, php или другие.Вы можете использовать максимальную и минимальную ширину, а также задать проценты для размеров ячеек или жестко прописать ширину ячейки, но динамически растущие ячейки отлично работают для 1 строки, следующая строка под ней не будет совпадать.
Просматривая эти ответы, я не увидел ни одной реальной причины, по которой таблицы необходимы для верстки, и это электронные письма в формате html.
Я работаю в очень, очень крупной финансовой компании, и мы отслеживаем около 600 различных заданий в месяц .... многие из которых представляют собой несколько кампаний по электронной почте.
Вы не можете использовать css для верстки ни для одной программы чтения почты.Есть несколько встроенных спецификаций css, которые вы можете использовать, которые относятся к цвету, начертанию шрифта и размеру, и даже высота строки довольно широко доступна, но для верстки вам придется использовать таблицы, поскольку все основные и большинство второстепенных программ чтения электронной почты (Outlook 97/03, Entourage, MSN и т.д.) Читают их просто отлично.
Проблемы с таблицами возникают, когда у вас есть td, у которых не указана высота / ширина, независимо от того, содержат они данные или нет.Итак, "сломанные" макеты таблиц обычно исправляются путем обращения внимания на атрибуты и yes...пробелы в html .... да, пробелы, которые не должны иметь значения.
Итак, если вы когда-нибудь будете работать в крупной компании / корпорации или у вас появится очень крупный клиент, будьте готовы выбросить за дверь все современные технологии и надеть шляпу с таблицами html!
Я думаю, все зависит от времени / усилий.Хотя пурист мог бы сказать "используйте таблицы только для табличных данных", в прошлом я использовал таблицы для упрощения кроссбраузерных макетов.
Для меня это вопрос использования времени.Я могу либо потратить свое время на то, чтобы поработать с CSS, чтобы сделать это правильно, либо поместить это в таблицу и потратить на это гораздо меньше времени.Я обычно иду по этому пути до тех пор, пока все не наладится.Как только функциональность будет готова, я вернусь и отшлифую CSS / HTML.
Здесь я должен использовать табличный подход.Причина этого сводится просто к стоимости.Пока не появится хорошо поддерживаемый CSS-ориентированный подход к верстке, и я говорю о макроуровне ... не микро внутри контейнеров, попытки встроить позиционирование CSS в обобщенный подход к верстке неэффективны.Вы должны подойти к этому с точки зрения человека, выписывающего чек на разработку.
Несколько лет назад я заключил контракт на разработку и сопровождение сайта для крупной сети отелей.Мы выбрали табличную компоновку;ваш базовый верхний, основной и нижний колонтитулы с левыми / правыми столбцами.Мы также использовали таблицы для некоторых более мелких элементов, таких как неграфические кнопки.Материнская компания сети поддерживала свой собственный сайт и использовала чистый CSS-подход к верстке.Когда вышел IE7, наш сайт работал безукоризненно, без каких-либо изменений.Сайт материнской компании был в полном беспорядке.В целом они потратили около 1000 часов (между совещаниями / разработкой / контролем качества / внедрением) на устранение проблем.
Когда вам платят за разработку сайта, частью вашей ответственности является предотвращение будущих рисков и минимизация будущих затрат на разработку, особенно если эти затраты не повышают ценность сайта (вашего продукта).
Мое очень простое и принципиальное мнение по этому поводу заключается в том, что таблицы существуют для табличных данных, а не для размещения чего-то сверху или рядом с другим элементом, потому что вам так уж случилось, что вам это нравится.
Итак, если вы хотите отобразить таблицу данных:сделайте это (с помощью таблицы).Если вы хотите разместить контент на странице:используйте css.
Я думаю, вы, возможно, немного сбиты с толку.CSS - это метод стилизации HTML-документов, будь то элемент таблицы или "div".
Раньше таблицы использовались в HTML для оформления всего макета страницы.Часто можно было увидеть несколько вложенных таблиц (обычно генерируемых программами WYSIWYG, такими как Dreamweaver), и это приводило к кошмару при обслуживании.
С момента появления и внедрения таблиц стилей CSS теперь корректно использовать таблицу только для табличных данных.Это означает, что если ваши данные наиболее естественно отображаются в виде таблицы, используйте элемент table.Вы все еще можете оформить таблицу с помощью CSS.
Однако, и я в целом не одобряю этот метод, поскольку он дублирует существующую функциональность, можно использовать элементы для построения табличной структуры.На самом деле есть несколько веб-сайтов, которые сгенерируют такой код для вас, но у меня нет ссылок под рукой.
Помните также, что некоторые пользователи могут просматривать только в текстовом режиме или использовать программу чтения с экрана, что, вероятно, приведет к разрыву страницы (например, чтение столбцов по вертикали, а не по горизонтали), отсюда и правильное использование таблиц.
HTH
Я верю и надеюсь, что эпоха использования таблиц для верстки ушла в прошлое.Проще говоря: стол есть стол, и ничего больше.
Что, я думаю, станет новой, похожей темой flamewar на ближайшие несколько лет, так это :должен ли я использовать новую функцию CSS дисплей: таблица, таблица-ячейка, таблица-строка и т.д.для верстки???:-)
Я думаю, причина, по которой это так часто встречается, заключается в том, что использование html-таблиц легче понять при создании структуры и макета, чем CSS.Использование CSS более абстрактно, но помогает разделить ваш код.
В ответ на определение "структуры" argument...by не использует html-таблицы, придающие структуру данным, чтобы вы идентифицировали их как "табличные".Будь то CSS или html, вы контролируете поток и расположение данных.Будь то табличный или какой-либо другой...
Если CSS-таблицы так важны (и я уверен, что мой ответ положит начало какой-то пламенной войне), почему в Visual Studio нет механизма для создания макета с использованием CSS?О, вы не проверяли функцию верстки в VS?Да, вы получаете таблицы прямо из Microsoft.Я не жалуюсь, просто хочу подчеркнуть, что если бы это так же много значило для остального мира, вы бы увидели, как MS переключается на CSS.
На мой взгляд, делайте то, что лучше всего подходит вашему проекту.Для одно- или двухстраничных веб-проектов я по-прежнему использую html, потому что то, что он делает, очевидно.Использование CSS более абстрактно, и иногда по утрам я просто не пью так много кофе.HTML-таблицы могут быстро запутаться.CSS требует немного больше времени, чтобы запутаться, но это тоже произойдет.
Хотя для некоторых макетов использование таблиц на первый взгляд может показаться более простым, когда приходит время обслуживания, использование css окупается.Особенно, если вы когда-нибудь захотите изменить положение чего-либо, или если вы хотите использовать один и тот же макет в нескольких местах.
ИМХО, таблицы следует использовать только при представлении таблиц.Никогда не для целей верстки.
Таблицы используются для отображения табличных данных.Добавить больше особо нечего :-D
Если есть причина для использования таблицы семантическим способом (например, для отображения табличных данных), используйте tables .
Просто не используйте таблицы для создания макета.Существует множество преимуществ searchengine и accessibility, которые вы получаете с помощью семантической разметки.
Резервирование таблиц для использования только для табличных данных работает в большинстве случаев.Существуют определенные проблемы с компоновкой, которые гораздо легче решить с помощью таблиц, чем с чем-либо другим.Например, выравнивание по вертикали и столбцы одинаковой высоты.С другой стороны, было несколько сложных таблиц данных, для которых я использовал плавающие divs, потому что таблицы не соответствовали требованиям.
Как и все остальное, используйте правильный инструмент для правильной работы, и иногда самый прагматичный инструмент оказывается не таким, каким вы его себе представляете.Тем не менее, я редко использую таблицы для верстки, даже в приведенных мною примерах, потому что неизбежно сталкиваюсь с какой-то проблемой, из-за которой мне все равно приходится делать это с помощью CSS.Ваш пробег может отличаться.
Мне также не нравится идея использования таблиц для упорядочивания элементов на странице.Однако это не должно становиться религией - столы - это плохо.Я столкнулся с одним примером, когда у меня макет из трех столбцов, и мне нужно, чтобы центральная колонка росла вместе с контентом.В конце концов, решением, которое было самым простым и хорошо работало во всех необходимых браузерах, было использование таблицы.ИМХО, CSS все еще имеет некоторые недостатки, и иногда лучше использовать что-то простое, что работает, а не просто слепо придерживаться какой-то идеи ("таблицы плохие ...").
вы даже можете использовать их для верстки, если ваш макет несколько табличный.Мне нравится функция динамической настройки таблиц и ячеек в зависимости от ширины окна браузера.Никогда не используйте фиксированную ширину или высоту, это только все испортит.
Это просто.Думайте о своей веб-странице как о реальной странице на бумаге.Вам следует использовать таблицы на веб-странице только тогда, когда вы хотите нарисовать таблицу на своем листе бумаги.
Еще один совет - использовать таблицу только с границей > 0.Таким образом, вы используете таблицы только тогда, когда вы подлый вам нужна таблица (а не для верстки).
@toddhd, выступать за использование таблиц для верстки просто для экономии времени - это отговорка.Если проблема во времени, то вы можете быстро создать столбчатый макет без таблиц, используя такой фреймворк, как Схема действий CSS или Сетка 960.
Кажется, это зависит от того, на что были способны браузеры, когда вы начинали разрабатывать.Если вы начали еще тогда, когда работали только таблицы, то это то, что вы, вероятно, всегда будете хотеть использовать, потому что вы это знаете.Или, если это то, что вам нравилось использовать даже после того, как браузеры продвинулись вперед, чтобы иметь возможность отображать CSS...
Мне просто не нравится делать одно и то же снова и снова, потому что это легко, и я знаю, как это делать.Это скучно.Я бы предпочел изучить новые техники, чем отмахиваться от чего-то, потому что я не знаю, как это использовать, или я думаю, что у меня нет времени на обучение.
Мне не нравится использовать таблицы, я в них не разбираюсь, они кажутся чуждыми и оскорбительными, но это потому, что я начал в 2005 году.Я также не использую дизайнерские программы для создания шаблонов, потому что предпочитаю ручное кодирование.
Я собираюсь предположить, что ваш вопрос на самом деле - "Должен ли я избегать использования HTML-таблиц для целей верстки?".Ответ таков:Нет.Фактически, таблицы специально предназначены для использования для управления компоновкой.Недостатком использования таблиц для управления макетом всей страницы является то, что исходный файл быстро становится трудным для понимания и редактирования вручную.(Возможное) преимущество использования таблиц для управления всем макетом заключается в том, что существуют особые опасения по поводу кроссбраузерной совместимости и рендеринга.Я предпочитаю работать непосредственно с исходным файлом HTML, и для меня использование CSS упрощает это, чем использование таблиц для всего макета.
Таблицы имеют смысл только тогда, когда вы пытаетесь отобразить табличные данные, и все.Для макетов вы всегда должны использовать DIVs и играть с позиционированием CSS.
если вам нужно использовать таблицу, ваш макет, вероятно, отстой.Покажите мне хоть один хорошо продуманный сайт, который использует таблицы, и я покажу вам тысячу сайтов, которые этого не делают.
Многие люди употребляют термин "пурист".Это чушь собачья.Вы бы напечатали газетную статью в книге?Вы бы разработали брошюру с помощью Excel?Нет?Тогда зачем вам использовать таблицу для отображения нетабличных данных?
В большинстве случаев трудности, с которыми люди сталкиваются, отказываясь от таблиц для верстки, являются результатом их собственного незнания HTML / CSS / Принципов хорошего дизайна.Хотя вам может быть трудно сделать так, чтобы макеты с несколькими столбцами равномерно распределялись по вертикали, вы можете попробовать другой метод.DIV - это не таблицы.Вы можете создать искусственные столбцы, используя широкие рамки, фон страницы и т.д.Потратьте некоторое время на то, чтобы научиться делать то, что вы задумали, иначе вас всегда будут считать человеком без каких-либо полезных навыков.(http://www.alistapart.com было бы хорошим началом)
Я, честно говоря, удивлен, что этот вопрос возник в 2008 году.ДИВс появился, когда я учился в старших классах.Перестань быть нубом.
И, как уже упоминалось выше, таблицы сильно отказывают на мобильных устройствах и программах чтения с экрана.
