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

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

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

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

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

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

• Если вас лимит времени и просто некогда делать верстку сложнее. Основные преимущества табличного метода верстки — быстрая и простая верстка, а главное это корректное отображение веб-страницы в разных браузерах (кроссбраузерность).

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

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

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

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

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

• Удобное выравнивание элементов: содержимое в ячейках можно выравнивать по горизонтали и по вертикали одновременно. За счет этого возможности по размещению элементов на веб-странице в целом расширяются. Легко делать кроссбраузерное отображение

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

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

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

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

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