Благодетели сайта

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

Табличная верстка — это верстка страницы в HTML в качестве структурной основы с применением табличных тегов <table> для расположения текстовых и графических элементов документа.

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

На данный момент, табличная верстка не является семантически правильной и рекомендуемой, так как верстка сайта должна быть логической и таблицы должны применяться только для представления табличных данных, таких как прайс-литов, статистических данных, технических характеристик, сравнительных таблиц и т. д., а для верстки документа применять CSS. Табличная верстка очень громоздкая по коду, в документе создается много тегов HTML и приводит к большому увеличению «веса» страницы. Например, поисковые системы, при сканировании страницы отделяют теги HTML от текста и чем больше кода на странице, тем дольше этот процесс. При загрузки страницы с табличной версткой, браузеры, как привило начинают «читать» сверху вниз, прочитав первый тег table, браузер ищет закрывающий тег этой таблицы, при применении глобальной таблицы, то есть таблицы в которую входят все элементы страницы, браузер пока не доберется до конца страницы и не найдет закрывающий тег этой таблицы, отображать содержание документа не будет и только после прочтения всей страницы, выдаст результат.

С помощью табличной верстки можно реализовать как фиксированные, так и «резиновые» страницы. Фиксированные сайты, это верстка в жесткими размерами, как по ширине, так и по высоте. «Резиновая» верстка, это сайта с динамическими размерами зависящие от разрешения экрана и размера окна браузера, так же, при динамических размерах можно задавать минимальную и максимальную ширину верстки, то есть при изменении размера окна браузера, «съеживание» ширины сайта остановится на указанных параметрах минимальной ширины и в окне браузера появится нижняя прокрутка страницы, а сжимание страницы прекратится и правые элементы документы уйдут за границу видимости браузера, просмотреть эти элементы можно будет посредством передвижения нижней полосы прокрутки. В Internet Explorer шестой версии, разработчиками не предусмотренны параметры минимального и максимального размера документа, этого можно добиться только посредством JavaScript, который специально написан для этого браузера и является своеобразной заглушкой. Максимальный размер подразумевает под собой ширину страницы которая фиксируется при больших разрешений экрана и как правило, содержание документа центрируется по центру окна.

Беспорное преимущество табличной верстки — это кроссбраузерность, так как таблицы применялись с самого начала жизни интернета, то все разработчики браузеров уже давно отработали спецификацию HTML и отображают табличную верстку практически одинаково, что нельзя сказать про блочную верстку в DIV.

Итак, подведем итог всему выше сказанному:

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

<table>
 <tr>
  <td></td>
 <tr>
</table>

или в случае вложенных таблиц:

<table>  <!-- начало основной таблицы -->
 <tr>
  <td>
   <table>  <!-- начало вложенной таблицы -->
    <tr>
     <td></td>
    </tr>
   </table>  <!-- конец вложенной таблицы -->
  </td>
 </tr>
</table>  <!-- конец основной таблицы -->

В Internet Explorer-е пустые, без текстового или графического наполнения, ячейки не отображаются.

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

Страницы созданные с помощью табличной верстки имеют большой «вес» в килобайтах и сильно «захламлены» HTML тегами, что ведет к долгой загрузки документа.

Табличную верстку очень не любят поисковые системы, так как HTML теги «забивают» кэшь поискового робота и сильно снижают его работоспособность.