Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Интернет-магазин под ключ

Статьи для сайтов!!!
Главная Дополнительно Табличная верстка Советы по использованию

Каркас веб-страницы. Табличная верстка

Шаг 1. Основная таблица
Шаг 2. Таблица для контента
Шаг 3. Вертикальное выравнивание
Шаг 4. Заполняем таблицу: шапка, подвал и контент
Шаг 5. Оформляем границы


Табличная верстка - это условное названия метода верстки страниц сайта.

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

Это наиболее распространенный способ верстки веб-страниц. Преимущество табличной верстки в том, что она проста и быстра в исполнении. Кроме этого, страницы, имеющие в своей основе таблицу, корректно отображаются в различных браузерах.

Я думаю, что Вы уже знакомы с основными тегами таблиц: это теги <tr> и <td>, создающие строку и ячейку таблицы соответственно. А также Вы, наверняка, знаете основы работы с таблицами в HTML. Если нет, то советую сначала немного почитать об этом.

А сейчас давайте перейдем непосредственно к созданию каркаса страницы методом табличной верстки.

В основном верстка с созданием таблиц выполняется так, что границы и таблиц и их ячеек невидимы (атрибут border="0"). Я же буду создавать таблицы, имеющие границы (атрибут border="1"). Так Вам проще будет ориентироваться.

 

Шаг 1. Основная таблица

Стандартная первоначальная таблица, составляющая основу страницы, обычно состоит из трех строк: верхняя строка предназначена для шапки сайта - это может быть любое изображение, созданное Вами в редакторе Adobe Photoshop или позаимствованное из какого-либо источника; нижнюю строку занимает подвал или так называемый «футер» сайта (от англ. footer - нижняя сноска); и основная строка расположена по середине. Далее Вы узнаете для чего она предназначена.

Предлагаю назвать первоначальную таблицу основной. Делаем это для исключения путаницы, так как далее будут создаваться другие таблицы.

Здесь стоит отметить следующий важный момент: тег <tr> не может существовать сам по себе. Обязательно наличие тега <td>. То есть строка таблицы создается только при наличии в ней хотя бы одной ячейки.

 

Фрагмент кода:

<body>

<table width="1000" border="1" align="center" height="700"> Основная таблица
<tr> <td>
&nbsp;</td> </tr> Шапка сайта
<tr> <td>
&nbsp;</td> </tr> Основная строка
<tr> <td>
&nbsp;</td> </tr> Подвал
</table>

</body>

Результат:

Что касается ширины основной таблицы, то, как Вы видите, мы ее установили фиксированной: равной 1000 px. Вы можете установить любую ширину, но делайте ее не более, чем разрешение экрана. Например, если у Вас установлено разрешение 1280х1024, то желательно, чтобы ширина основной таблицы не превышала 1280 px, иначе какая-то ее часть не будет видна, а у окна браузера появиться горизонтальная полоса прокрутки.

А что если у определенного числа пользователей разрешение экрана меньше Вашего, например 1024х768? В этом случае при ширине основной таблицы более 1024 px, какой-то части пользователей будет неудобно просматривать страницы Вашего сайта, так как им придется пользоваться горизонтальной полосой прокрутки.

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

Также можно сразу задать значение атрибута height тега <table>, устанавливающего высоту таблицы. Пусть высота основной таблицы составляет 700 px.

Следует знать, что значения высоты и ширины таблицы не являются постоянными, то есть меньше таблица не станет, а вот больше может - всё зависит от размеров её содержимого.


Шаг 2. Таблица для контента

Создаем в ячейке основной строки еще таблицу. Назовем ее таблица для контента - в ней будет размещено основное содержимое страницы.

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

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

Фрагмент кода:

<body>

<table width="1000" border="1" align="center" height="700"> Основная таблица
<tr> <td>
&nbsp;</td> </tr> Шапка сайта

<tr> <td> Начало основной строки

<table border="1" width="100%" height="100%"> Устанавливаем ширину и высоту таблицы для контента равными 100%
<tr>
<td>&nbsp;</td> Левая ячейка таблицы для контента
<td>&nbsp;</td> Центральная ячейка таблицы для контента
<td>&nbsp;</td> Правая ячейка таблицы для контента
</tr>
</table>

</td> </tr> Конец основной строки


<tr> <td>
&nbsp;</td> </tr> Подвал
</table>

</body>

Результат:

Ширину и высоту таблицы для контента устанавливаем равными 100%. Таким образом она сразу растянется на всю ширину основной таблицы и на всю высоту основной строки.


Шаг 3. Вертикальное выравнивание

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

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

Поэтому, при помощи атрибута valign тега <td>, устанавливаем вертикальное выравнивание содержимого тех ячеек, для которых это необходимо. В основном для содержимого ячеек устанавливают вертикальное выравнивание по верхнему краю.

 

Фрагмент кода:

<body>

<table width="1000" border="1" align="center" height="700"> Основная таблица
<tr> <td valign="top">
&nbsp;</td> </tr> Шапка сайта. Содержимое ячейки выравнено по ее верхнему краю.

<tr> <td> Начало основной строки

<table border="1" width="100%" height="100%"> Таблицы для контента
<tr>
<td valign="top">&nbsp;</td> Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
<td valign="top">&nbsp;</td> Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
<td>&nbsp;</td> Правая ячейка таблицы для контента
</tr>
</table>

</td> </tr> Конец основной строки


<tr> <td>
&nbsp;</td> </tr> Подвал
</table>

</body>

Результат:


Шаг 4. Заполняем таблицу: шапка, подвал и контент

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

Сейчас давайте перейдем к заполнению основной таблицы. Начнем с шапки.

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

 

шапка сайта

Зная высоту изображения, устанавливаем для ячейки, отведенной под шапку, соответствующее значение высоты: 121 px.

Переходим к подвалу: нижнюю ячейку основной таблицы, являющуюся «футером» страницы, зальем синим цветом (атрибут bgcolor тега <td> задает фоновый цвет ячейки) и сделаем ее по высоте, равной 35 px.

Далее редактируем таблицу для контента: установим ширину левой ячейки равной 250 px, а правой ячейки - 150 px. Центральная ячейка занимает все свободное пространство: ее ширина становится равной 600 px.

 

Фрагмент кода:

<body>

<table width="1000" border="1" align="center" height="700"> Основная таблица

<tr> <td height= "121">
<img src=
"img/header_1000.jpg" width="1000" height="121">
</td> </tr> Шапка сайта.

<tr> <td> Начало основной строки

<table border="1" width="100%" height="100%"> Таблицы для контента
<tr>
<td valign="top" width="250">&nbsp;</td> Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
<td valign="top">&nbsp;</td> Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
<td width="150">&nbsp;</td> Правая ячейка таблицы для контента
</tr>
</table>

</td> </tr> Конец основной строки


<tr> <td
height="35px" bgcolor="#6699FF">&nbsp;</td> </tr> Подвал. Светло-синий фон
</table>

</body>

Результат:

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


Шаг 5. Оформляем границы

Это последний шаг, в котором мы оформим границы.

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

 

Фрагмент кода:

<body>

<table width="1000" align="center" height="700"> Основная таблица

<tr> <td height= "121" style="border:#6699FF solid 1px">
<img src=
"img/header_1000.jpg" width="1000" height="121">
</td> </tr> Шапка сайта. Светло-синяя граница

<tr> <td> Начало основной строки

<table width="100%" height="100%" style="border:#6699FF solid 1px"> Таблицы для контента. Светло-синяя граница
<tr>
<td valign="top" width="250" style="border:#0000FF solid 1px">&nbsp;</td> Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Темно-синяя граница
<td valign="top" style="border:#0000FF solid 1px">&nbsp;</td> Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Темно-синяя граница
<td width="150" style="border:#0000FF solid 1px">&nbsp;</td> Правая ячейка таблицы для контента. Темно-синяя граница
</tr>
</table>

</td> </tr> Конец основной строки


<tr> <td height=
"35px" bgcolor="#6699FF">&nbsp;</td> </tr> Подвал. Светло-синий фон
</table>

</body>

Результат:

На этом, пожалуй, закончим создание каркаса страницы методом табличной верстки.

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

Впрочем, Вы можете сделать это самостоятельно. Заодно закрепите пройденный материал!


Adobe Photoshop Табличная верстка Советы по использованию
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru