Преимущества бесконтактного дизайна веб-страниц?

Возможный дубликат:
Почему бы не использовать таблицы для компоновки в HTML?

В эти дни я читаю много, что мы должны писать HTML без таблиц. Я считаю, что это требует много знаний CSS. Мои вопросы:

  • Каковы преимущества дизайна без таблиц?
  • Каковы условия использования таблиц?
  • Как начать?

Ответ 1

Каковы преимущества таблицы меньше дизайн?

Есть много, не в последнюю очередь сокращение полезной нагрузки HTML и гибкость в изменении макета (через CSS) без изменения разметки.

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

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

Каковы условия использования таблиц?

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

Как начать?

Я поклонник w3schools и awsome CSS Zen Garden. Это дало мне мое начало.

Ответ 3

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

Ответ 4

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

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

Использование выделенного css также упрощает обмен мнениями на основе используемого браузера (например, я хочу отображать что-то очень отличающееся от пользователей iPhone, чем пользователи IE).

Это также упрощает изменение внешнего вида вашего сайта без изменения кода, генерирующего сам контент (например, если вы создаете свой html с помощью PHP).

Ответ 5

Безлистный веб-дизайн дает вам следующее:

Меньшая разметка

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

Простое обслуживание

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

Содержание и презентация являются отдельными

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

Таблицы для данных

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

Catch

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

Ответ 6

вы получите лучшую производительность при рендеринге страницы, и это будет основано на стандартах. Используйте теги <div>, чтобы использовать дизайн без таблиц.

Ответ 7

Широко распространено обсуждение таблиц и разделов всех интернет-страниц.

Я большой сторонник использования таблиц для представления табличных данных. Однако это та степень их использования. Для структуры страницы и макета вы должны использовать divs и css.

Прочтите это углубленное smashing magazine article о таблицах против divs.