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

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

Жёсткая табличная  вёрстка

Пример жесткой табличной верстки:

 

А теперь будем разбираться в выше приведённом коде жесткой табличной верстки сайта:

Как вы уже успели заметить, в одной строчке есть такой тег, как <td>. Это значит, что данному столбцу будет присвоен такой класс, как  left_col, его параметры описаны, в нашем примере, между тегами  <style type="text/css"> и </style>.

Теперь необходимо рассмотреть, какие же параметры в данном примере указаны для наших классов. Здесь отчетливо видно, что для левого (left_col) и правого (right_col) столбцов указаны значения ширины: «width: 120px» — ширина самой ячейки и «padding: 15px» — это ширина отступа содержимого ячейки от её краёв. Итого мы имеем сумму в 150 пикселей — это и есть ширина левого и правого столбцов. Ширина среднего столбца (500px)подобрана так, чтобы его значение в сумме со значением ширины боковых столбцов не превышало ширину нашей таблицы (860px): 860 – 150 – 150 = 560. Так же 30 пикселей уходит на отступы содержимого центрального столбца от его краёв, итого, по нашим подсчетам, ширина среднего столбца не должна превышать 530 пикселей. Что же касается высоты, то  все столбцы в строке автоматически примут высоту самой высокой ячейки, и для этого значение высоты (height) указано только для одного столбца.

«Резиновая» табличная верстка

Теперь стоит разобрать верстку, которую в среде верстальщиков называют резиновой. Данное имя она получила благодаря своей способности «растягиваться» в зависимости от того, какой размер окна браузера у пользователя. Так же, как и в предыдущем примере, наша страница будет содержать шапку, футер, правый, левый и центральный разделы.

Вот пример «резиновой» табличной верстки сайта:

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

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

На сегодня наш урок окончен.

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.