Почему бы не использовать таблицы для разметки в HTML? [закрыто]

Похоже, общее мнение , что таблицы не должны использоваться для разметки в HTML.

Почему?

Я никогда (или редко быть честным) не видел хороших аргументов для этого. Обычные ответы:

  • Хорошо отделить контент от макета
    Но это ошибочный аргумент; Трафаретное мышление . Я предполагаю, что это правда, что использование элемента таблицы для разметки имеет мало общего с табличными данными. И что? Мой босс заботится? Заботятся ли мои пользователи?

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

    Кстати ... почему использование div или span хорошо отделяет контент от макета и таблицы нет? Чтобы получить хороший макет с использованием только div, часто требуется много вложенных div.

  • Читаемость кода
    Я думаю, что все наоборот. Большинство людей понимают HTML, мало кто понимает CSS.

  • Для SEO лучше не использовать таблицы
    Почему? Кто-нибудь может показать некоторые доказательства того, что это так? Или заявление Google о том, что таблицы не рекомендуется с точки зрения SEO?

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

  • Пересмотр макета проще без таблиц, см. css Zen Garden .
    Большинство веб-сайтов, которые нуждаются в обновлении, также нуждаются в новом контенте (HTML). Сценарии, когда новой версии веб-сайта нужен только новый файл CSS, маловероятны. Zen Garden - хороший веб-сайт, но немного теоретический. Не говоря уже о его злоупотреблении CSS.

Я действительно заинтересован в хороших аргументах, чтобы использовать divs + CSS вместо таблиц.

665
задан 21 revs, 14 users 69% 6 November 2018 в 00:07
поделиться

54 ответа

Я собираюсь пройти Ваши аргументы один за другим и попытаться показать ошибки в них.

хорошо разделить содержание от расположения, Но это - ошибочный аргумент; Взгляды ClichГ©.

Это не ошибочно вообще, потому что HTML был разработан намеренно. Неправильное употребление элемента не могло бы быть абсолютно исключено (в конце концов, новые идиомы разработали на других языках, также), но должны быть уравновешены возможные отрицательные последствия. Кроме того, даже если бы не было никаких аргументов против неправильного использования <table> элемент сегодня, могло бы быть завтра из-за способа, которым поставщики браузера применяют специальный режим к элементу. В конце концов, они знают, что “ <table> элементы для табличных данных only” и могли бы использовать этот факт для улучшения механизма визуализации в процессе, тонко изменяющемся, как <table> с ведут себя, и таким образом повреждающиеся случаи, где это ранее неправильно использовалось.

И что? мой босс заботится? Мои пользователи заботятся?

Зависит. Действительно ли Ваш босс с заостренными волосами? Тогда он не мог бы заботиться. Если она будет компетентна, то она будет заботиться, потому что пользователи будут .

, Возможно, меня или моих поддерживающих разработчиков, которые должны поддержать уход о веб-странице... Действительно ли таблица менее удобна в сопровождении? Я думаю с помощью таблицы, легче, чем использование отделений и css.

большинство профессиональных веб-разработчиков, кажется, выступает против Вас <глоток> [ необходима цитата ] . Это представляет в виде таблицы , на самом деле менее удобны в сопровождении, должно быть очевидным. Используя таблицы для средств расположения, что изменение корпоративного расположения будет на самом деле означать изменять каждую страницу. Это может быть очень дорого. С другой стороны, разумное использование семантически значимого HTML, объединенного с CSS , могло бы ограничивать такие изменения в CSS и используемых изображениях.

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

Глубоко вложило <div>, с являются антишаблоном так же, как разметками таблицы. Хорошим веб-разработчикам не нужны многие из них. С другой стороны, даже у таких глубоко вложенных отделений нет многих проблем разметок таблицы. На самом деле они могут даже способствовать семантической структуре путем логичного деления содержания на части.

Удобочитаемость кода я думаю, что это наоборот. Большинство людей понимает HTML, мало понимает css. Это более просто.

“Most people” не имеют значения. Вопрос профессионалов. Для профессионалов разметки таблицы создают намного больше проблем, чем HTML + CSS. Это похоже на высказывание, что я не должен использовать GVim или Emacs, потому что Блокнот более прост для большинства людей. Или это, я не должен использовать ЛАТЕКС, потому что MS Word более прост для большинства людей.

для SEO лучше не использовать таблицы

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

Таблицы медленнее. Должен быть вставлен дополнительный tbody элемент. Это - арахис для современных веб-браузеров.

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

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

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

Большинству веб-сайтов, которым нужно обновление, нужно новое содержание (HTML) также. Сценарии, где для новой версии веб-сайта только нужен новый css файл, не вероятны.

Нисколько. Я работал над несколькими случаями, где изменение дизайна было упрощено разделением содержания и дизайном. Часто все еще необходимо изменить некоторый код HTML, но изменения будут всегда намного более заключаться. Кроме того, конструктивные изменения должны при случае быть сделаны динамично. Считайте движки шаблонов, такие как тот используемыми системой блоггинга WordPress. Разметки таблицы буквально уничтожили бы эту систему. Я работал над подобным случаем для коммерческого программного обеспечения. Способность изменить дизайн, не изменяя код HTML была одним из бизнес-требований.

Другая вещь. Расположение таблицы делает автоматизированный парсинг веб-сайтов (анализ экранных данных) намного тяжелее. Это могло бы звучать тривиальным, потому что, в конце концов, кто делает это? Я был удивлен сам. Анализ экранных данных может помочь много, если рассматриваемый сервис не предлагает альтернативу WebService для доступа к к ее данным. Я работаю в биоинформатике, где это - печальная действительность. Современные веб-методы и WebServices не достигали большинства разработчиков и часто, анализ экранных данных является единственным способом автоматизировать процесс получения данных. Неудивительный, что многие биологи все еще выполняют такие задачи вручную. Для тысяч наборов данных.

497
ответ дан 6 revs, 4 users 94% 6 November 2018 в 00:07
поделиться

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

1
ответ дан Adam Rosenfield 6 November 2018 в 00:07
поделиться

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

См. также: злоупотребление ViewState

1
ответ дан Greg Hurlman 6 November 2018 в 00:07
поделиться

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

1
ответ дан Davy 6 November 2018 в 00:07
поделиться

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

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

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

1
ответ дан Sal 6 November 2018 в 00:07
поделиться

Я действительно полагаю, что это - проблема, подключенная к общей проблеме. Когда HTML родился, никто не мог предвидеть его широкое использование. Другая технология, которая почти вышла из строя под весом ее собственного успеха. Когда страницы HTML были записаны в vi на зеленом текстовом терминале, ТАБЛИЦА была всем, что было необходимо для представления данных посетителям страницы, и это главным образом были данные, которые имели смысл в табличной форме.

Все мы знаем как развитые вещи. ТАБЛИЦЫ пошли вышедшие из моды сравнительно недавно, но существует много причин предпочесть ОТДЕЛЕНИЯ и основанные на CSS разметки (доступность не последний из них). Конечно, я не могу записать CSS для спасения моей жизни:-), и я думаю, что эксперт по графическому дизайну должен всегда быть под рукой.

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

1
ответ дан Manrico Corazzi 6 November 2018 в 00:07
поделиться

Я стараюсь избегать ТАБЛИЦ как можно больше, но когда мы разрабатываем сложные формы, которые смешивают несколько типов управления и различных положений подписи с довольно строгим контролем над группировкой, использование ОТДЕЛЕНИЙ ненадежно или часто почти невозможно.

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

, поскольку представление форм является динамичным (где дисплей некоторых разделов основан на состоянии случая или полномочиях пользователя), мы используем наборы сложенных ОТДЕЛЕНИЙ, каждый содержащий ТАБЛИЦУ логически сгруппированных элементов формы. Каждый столбец ТАБЛИЦЫ классифицируется так, чтобы ими мог управлять CSS. Тем путем мы можем выключить различные разделы формы без проблемы того, чтобы не быть таблицей для обертывания строк в ОТДЕЛЕНИЯ

1
ответ дан CMPalmer 6 November 2018 в 00:07
поделиться

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

я использую и "таблицу" и "отделение" / теги "промежутка" в разметке HTML.

Позволяют мне дать Вам немного аргументов, почему я выбираю отделения:

  1. для таблицы необходимо записать по крайней мере 3 тега (таблица, TR, td, thead, tbody), для хорошего дизайна, иногда у Вас есть много вложенных таблиц

  2. , мне нравится иметь компоненты на странице. Я не знаю, как объяснить точно, но попробую. Предположим, что Вам нужен логотип, и это должно быть помещено, просто маленькая часть его, по содержанию следующей страницы. Используя таблицы необходимо сократить 2 изображения и поместить это в 2 различных TDS. Используя ОТДЕЛЕНИЯ у Вас может быть простой CSS для расположения его, как Вы хотите. Какое решение прилагают все усилия?

  3. , когда более тогда 3 вложенных таблицы для того, чтобы сделать что-то я думаю для перепроектирования его ОТДЕЛЕНИЯ использования

, НО я все еще использую таблицы для:

  1. табличные данные

  2. содержание, которое расширяется сам

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

1
ответ дан Dani 6 November 2018 в 00:07
поделиться

От прошлого опыта я должен был бы пойти для DIV. Даже в ООП, основная цель состоит в том, чтобы уменьшить связь между объектами, таким образом, это понятие может быть применено к ОТДЕЛЕНИЯМ и таблицам. Таблицы используются для содержания данных, не для расположения его приблизительно страница. DIV специально предназначен для расположения объектов приблизительно страница, таким образом, дизайн должен использовать DIV, таблицы должны использоваться, чтобы хранить данные.

кроме того, редактируя веб-сайты, сделанные с таблицами, просто твердо (по-моему)

1
ответ дан Richard 6 November 2018 в 00:07
поделиться

Я извиняюсь за свой английский, но вот еще одна причина:

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

Проблема в том, что этот «переводчик» не может прочитать сайт, если он сделан с помощью TABLE. Зачем ? Потому что ТАБЛИЦА для ДАННЫХ.

На самом деле, если вы используете ТАБЛИЦЫ, для каждой КЛЕТКИ вы должны указать некоторую информацию, чтобы инвалиды знали, где они находятся в ТАБЛИЦЕ. Представьте, что у вас большой стол, и вам нужно увеличить его, чтобы увидеть на экране только 1 ячейку: вы должны знать, в какой строке / столбце вы находитесь.

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

Я также предпочитаю, чтобы TABLE делал быстрые и простые шаблоны, но теперь я привык к CSS ... это мощно, но вам действительно нужно знать, что вы делаете ...:)

1
ответ дан RVeur23 6 November 2018 в 00:07
поделиться

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

Тогда попробуйте это с хорошим семантически правильным сайтом макета div.

Вы увидите разницу.

Таблицы не являются злом, если данные в них являются табличными, чтобы не разметить страницу.

1
ответ дан 2 revs, 2 users 71% 6 November 2018 в 00:07
поделиться

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

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

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

Если бы был ответ на этот вопрос, я был бы в восторге от - , чтобы сделать правильную вещь - Просто скажите мне что-то вроде: «Эй, ты пробовал ** поток: вертикальный | горизонтальный ", и я совершенно не в себе.

1
ответ дан 2 revs 6 November 2018 в 00:07
поделиться

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

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

аргумент, что с помощью таблицы для проверки несколько элементов выстраиваются в линию правильно, вызывает это крупное увеличение кода, имеют тенденцию включать примеры того, как единственный DIV может удовлетворить все их потребности. Они не всегда включают 10 строк CSS и специальных взломов браузера, которые они должны были записать для IE5, IE5.5, IE6, IE7...

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

0
ответ дан HB 6 November 2018 в 00:07
поделиться

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

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

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

Наконец, CSS позволяет одно ГЛАВНОЕ преимущество, которое никогда не будут предоставлять таблицы: способность переформатировать на основе содержимого на дисплее. CSS позволяет мне использовать совершенно другой набор стиля (включая положение, форматирование, и т.д.) для принтера, чем тот, который я использую для монитора. Это может быть расширено на другие медиа также, превосходным примером является Opera Show, который позволяет умно разработанный (и очень стандартный), CSS улучшил страницу, которая будет просматриваться как показ слайдов.

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

1
ответ дан 2 revs, 2 users 95% 6 November 2018 в 00:07
поделиться

Конечно, OP был чем-то вроде ветра, аргументы кажутся так неделя и легко противостоявший.

Веб-страницы являются доменом веб-разработчиков, и если они говорят отделение & CSS лучше, чем таблицы, это достаточно хорошо для меня.

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

Плюс, доступность. Таблицы, используемые для расположения, делают веб-сайт недоступным, не используйте их. Это не brainer, не говоря уже о нелегале.

0
ответ дан Ian 6 November 2018 в 00:07
поделиться

Используя DIV, вы можете легко переключать вещи. Например, вы можете сделать это:

Menu | Content

Content | Menu

Menu
----
Content

Это легко изменить в CSS, а не в HTML. Вы также можете предоставить несколько стилей (правша, левша, специально для маленького экрана).

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

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

0
ответ дан ofaurax 6 November 2018 в 00:07
поделиться

С точки зрения обслуживания сайта и перестройки дизайна при сохранении контента (что происходит постоянно, особенно в электронной коммерции):

Контент и дизайн объединяются с помощью таблиц = обновление как контента, так и дизайна.

Контент отдельно от дизайна = обновление дизайна и, возможно, немного контента.

Если бы у меня было все по-другому, я бы сохранял свой контент на PHP, генерируя XML, конвертируя в разметку в XSLT и создавая CSS и Javascript для взаимодействия. Что касается Java, JSP - JSTL для генерации разметки.

0
ответ дан mltorrefranca 6 November 2018 в 00:07
поделиться

Супер короткий ответ: разработка удобных в сопровождении веб-сайтов является трудной с таблицами и простой со стандартным способом сделать это.

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

0
ответ дан Rich Bradshaw 6 November 2018 в 00:07
поделиться

WYSIWYG!!! Я не могу ни за что в жизни заставить наших разработчиков прекращать использовать вложенные ОТДЕЛЕНИЯ и разработанный elementID css в шаблонах, которые, как предполагается, используются клиентами в проектах CMS. Это - смысл WYSIWYG редактор онлайн. Вы управляете и содержанием и расположением одновременно! Нет никакого разделения вообще во-первых в этом сценарии. Расположенные и разработанные Отделения в некоторой внешней таблице стилей являются анафемой на всю эту мысль о редактировании WYSIWYG. Таблицы видны, вставленные строки, ячейки, объединенные и так далее. Удача пробуя это отделениями способом, которое не расстраивает пользователей.

-1
ответ дан Nathan Stites 6 November 2018 в 00:07
поделиться

Данные: использовать таблицы. Макет: используйте стили. Таблицы могут рендериться быстрее всего с очень скудным браузером, то есть Links 2 или Lynx без стилизации, просто с простой разметкой.

-1
ответ дан 2 revs, 2 users 71% 6 November 2018 в 00:07
поделиться

Это не должна быть война. Гармония возможна.

Использование одна таблица для полного расположения и отделений в нем.

<table> 
    <tr><td colspan="3"><div>Top content</div></td></tr>
    <tr> 
        <td><div>Left navigation</div></td> 
        <td><div>Main content</div></td> 
        <td><div>Right navigation</div></td> 
    </tr>
    <tr><td colspan="3"><div>Bottom content</div></td></tr>
</table>

Взгляд - никакие вложенные таблицы.

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

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

Примечание, что этот подход даст Вам 100%-е соответствие CSS в текст ссылки

-3
ответ дан 5 revs, 3 users 63% 6 November 2018 в 00:07
поделиться

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

то же верно, когда отделения или другие элементы блочного уровня используются для воссоздания таблиц и высоко вкладываются. Цель отделений состоит в том, чтобы использоваться в качестве форматирования и элемента макета, и как таковая, предназначаются используемые, чтобы содержать подобную информацию и разметить его на экране для визуальных пользователей. Когда программа экранного доступа встречается со страницей, она часто игнорирует любую информацию макета, оба CSS, базирующиеся, а также базирующийся атрибут HTML (Это не верно для всех программ экранного доступа, но для самых популярных, как JAWS, Windows Eyes и Косатка для Linux, который это).

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

Наконец, с основанным на таблице расположением, для достижения мелкомодульного управления положения элементов на странице, очень вложенные таблицы часто используются. Это имеет два эффекта: 1.) Увеличенный размер кода для каждой страницы - Начиная с навигации и общей структуры часто делается с таблицами, тот же код отправляется по сети за каждым запросом, тогда как div/css базировался, расположение вытягивает css файл по однажды, и затем использует менее многословные отделения 2.) Очень вложенные таблицы берут намного дольше для браузера клиента для рендеринга, ведя к немного более медленному времени загрузки.

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

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

1
ответ дан cdeszaq 6 November 2018 в 00:07
поделиться

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

-5
ответ дан MonkeyBrother 6 November 2018 в 00:07
поделиться

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

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

1
ответ дан 2 revs, 2 users 57% 6 November 2018 в 00:07
поделиться

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

И я действительно думаю, что легче поддержать tableless расположение. Вы не должны волноваться о rowspans, colspans, и т.д. Вы просто создаете некоторые контейнерные отделения и помещаете содержание, где Вы должны. И это сказало, что я думаю он также более читаемый (<div id="sidebar"> по сравнению с <tr><td>...</td><td>...<td>sidebar</td></tr>).

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

2
ответ дан 2 revs, 2 users 75% 6 November 2018 в 00:07
поделиться

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

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

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

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

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

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

Удача с Вашим ROI, поскольку Вы принимаете то решение.

2
ответ дан John Dunagan 6 November 2018 в 00:07
поделиться

Один из примеров: вы хотите центрировать основную область содержимого страницы, но для того, чтобы содержать плавающие элементы внутри нее, она должна быть перемещена. В CSS нет "float: center".

Это не единственный способ «удерживать поплавки» внутри центрированного элемента. Таким образом, это не очень хороший аргумент!

В некотором смысле, это ложная предпосылка, вещь «divs против таблиц».

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

Настоящим аргументом является «позиционирование, выполненное CSS (возможно, в удаленном файле)», а не «позиционирование, выполняемое HTML на странице». Конечно, каждый может увидеть преимущества первого по сравнению с последним?

  1. Размер - если ваш макет страницы находится в HTML, на страницах он не может быть кэширован, и он имеет повторяться на каждой странице. Вы сэкономите огромную пропускную способность, если ваш макет находится в кэшированном файле CSS, а не на странице.
  2. Несколько разработчиков могут работать над одной и той же страницей одновременно - я работаю над HTML, другой - над CSS. Нет необходимости в репозитории, нет проблем с перезаписью, блокировкой файлов и т. Д.
  3. Вносить изменения проще - будут проблемы с версткой в ​​разных браузерах, но вам нужно исправить только один файл, CSS-файл, чтобы разобраться в них.
  4. Доступность, как уже упоминалось ранее. Таблицы предполагают, что двумерный макет работает для всех. Это не то, как некоторые пользователи видят ваш контент, и это не то, как Google просматривает ваш контент.

Рассмотрим это:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

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

picture picture picture caption caption caption

, и связь, которая очевидна с таблицей на месте, исчезает.

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

2
ответ дан AmbroseChapel 6 November 2018 в 00:07
поделиться

Вот мой ответ программиста от подобный поток

, Семантика 101

Первый смотрит на этот код и думает обо что случилось здесь...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

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

Семантика 102

Теперь применяют это к разметке документа. Если бы Ваш документ должен представить табличные данные, то соответствующий тег был бы <table>. Если Вы помещаете навигацию в таблицу однако, то Вы неправильно используете намеченную цель <table> элемент. Во втором случае Вы не представляете табличные данные - Вы - (mis) использование <table> элемент для достижения представляемой цели.

Заключение

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

290
ответ дан 4 revs, 3 users 88% 6 November 2018 в 00:07
поделиться

Очевидный ответ: см. CSS Zen Garden . Если вы скажете мне, что вы можете легко сделать то же самое с макетом на основе таблиц (помните - HTML не меняется), тогда непременно используйте таблицы для макета.

Две другие важные вещи - это доступность и SEO.

Обе заботятся о том, в каком порядке представлена ​​информация. Вы не можете легко представить свою навигацию в верхней части страницы, если макет на основе таблицы помещает ее в 3-ю ячейку 2-й строки 2-й вложенной таблицы на странице.

Итак, ваши ответы - ремонтопригодность, доступность и SEO.

Не ленись. Делайте вещи правильно и правильно, даже если их немного сложнее освоить.

104
ответ дан erlando 6 November 2018 в 00:07
поделиться

Посмотрите этот дублирующийся вопрос.

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

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

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

91
ответ дан 4 revs 6 November 2018 в 00:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: