Логотип imagecms

Табличная верстка страниц и ее особенности

Что же такое табличная верстка веб-страниц? Это метод верстки, при котором в качестве основы структуры расположения различных графических и текстовых элементов используют тег <table> применяемый верстальщиками "при создании множества сайтов. Фактически, такие таблицы, являются модульной сеткой, в которой очень удобно и просто размещать отдельные элементы страниц.

Тем не менее, использовать только табличный метод - это не всегда правильное решение. Так как каждый объект HTML имеет свои, собственные цели. Поэтому, если повсеместно использовать этот элемент не по назначению – результат может быть далек от желаемого.
Интенсивное развитие XМL и ХНTML, которые скрупульозно относятся к написанию кода, требуют твёрдо придерживаться общих стандартов HТML и СSS. А это значит, что в первую очередь, стоит использовать таблицы конкретно для хранения табличных данных. Так как именно для этих цели они и были созданы. А для самой верстки и непосредственно для оформления страниц – следует применять верстку div-блоками.

Применение табличной верстки может быть оправдано в таких случаях:

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

К основным преимуществам данного метода можно отнести:

  • Таблицы не перекрывают друг друга при маленьком разрешении: Таблицы хорошо использовать как модульную, многоколонную сетку, где все ячейки являют собой отдельную колонку. Это дает возможность создавать 2-х и 3-х колоночные макеты документов. Если изменить размер окна браузера - колонки будут сохранять свой исходный вид. Также, они не будут переносится на соседние колонки, как слои. Дополнительно к этому, высота колонок останется равной, независимо от объема содержимого
  • Таблицы хорошо подходят для создания макетов, размеры которых привязаны к размерам окна браузера. Это достигается тем, что размеры таблицы можно задавать в процентном соотношении. Тогда таблица способна занимать все отведенное для нее пространство.
  • Дизайнерские изыски часто требуют разрезания рисунков, при котором их фрагменты выбрасивають или заменяют другим изображением. В этом случае таблицы могут обеспечить легкую сборку отдельних рисунков, или изображений в целосною картинку. Следует только поместить фрагменты в определенные ячейки и установить соответствующие параметры таблицы
  • В таблицу можно добавлять фоновые рисунки. В зависимости от размера ячейки, фоновый рисунок, может повторяться как по вертикали, или горизонтали, так и в двух направлениях сразу. За счет этого эффекта, можно создавать рамки или линии разного вида.
  • Удобное выравнивание элементов: содержимое в ячейках можно выравнивать по горизонтали и по вертикали одновременно. За счет этого возможности по размещению элементов на веб-странице в целом расширяются. Легко делать кроссбраузерное отображение

К основным недостаткам данного метода можно отнести:

  • Долгая загрузка документов - особенность таблиц в том, что пока браузер не подгрузит самое последнее слово, в самом низу, самой объемной таблицы, браузер не отобразит содержимого ячеек страницы. Такой подход оправдан – браузер должен знать как правильно форматировать содержимое страницы.

Существует и способ обхода этого свойства, по средствам, разбиения больших таблиц на меньшие таблицы, или использованием свойства table-layout.

  • Громоздкий код – так как таблицы содержат иерархическую структуру вложенных тегов, что увеличивает объем кода, повышая тем самым сложность изменения отдельных параметров.
  • Плохая индексация в поисковиках – текст, что расположен в отдельных ячейках таблицы, может находиться далеко друг от друга в коде. Как следствие – поисковик воспринимает данные как таблицу, а не как отдельный документ. Это может стать произвести к тому, что сайт может не попасть в топ выдачи по ключевым словам, только по этой причине.
    Отсутствие разделения между содержимым и оформлением - HTML-код должен содержать исключительно теги стилевого класса и идентификатора. А оформление элементов, должно выносится в CSS. Такое разделение дает возможность легко и независимо править код, или менять ее отдельные элементы.

Читайте также:
11 Февраля 2014 2121 0
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
(Комментарии: 0)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или