"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

Уроки по HTML. Дополнение к базовому курсу


Строим таблицы в ряд

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

Например, таблицы можно поместить только одна под другой.

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

Уроки html для начинающих

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

Давайте это реализуем, используя знания по HTML и знания о слоях из статьи "Слои на web-странице".

Создаём HTML-файл. Имя файла значения не имеет, можно даже русскими буквами, т. к. в Сеть это выкладываться не будет. Сервер тоже не понадобится, поэтому файл можно поместить в любую папку на жёстком диске.

Пишем код:

<html>
<head>
<title> Таблицы в ряд </title>
</head>

<body>
<table border="1" bordercolor="#FF0000" width="100%">
<tr>
<td>Эта ячейка для шапки сайта</td>
</tr>
<tr>
<td>Эта ячейка для основной информации web-страницы</td>
</tr>
<tr>
<td>Эта ячейка для копирайта</td>
</tr>
</table>

<table border="1" bordercolor="#0000FF" width="100%">
<tr>
<td>Эта ячейка для формы подписки на рассылку, для рекламы и для другой слуюебной информации</td>
<td>Здесь будет панель навигации</td>
</tr>
</table>

</body>
</html>

Сохраните изменения, откройте документ в браузере. Таблицы расположены друг под другом и шириной обе во всю ширину экрана монитора:

Уроки html для начинающих

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

Добавляем в код теги DIV (просто заключаем каждую таблицу в эти теги):

....
<body>

<div>
<table border="1" bordercolor="#FF0000" width="100%">
<tr>
<td>Эта ячейка для шапки сайта</td>
</tr>
<tr>
<td>Эта ячейка для основной информации web-страницы</td>
</tr>
<tr>
<td>Эта ячейка для копирайта</td>
</tr>
</table>
</div>

<div>
<table border="1" bordercolor="#0000FF" width="100%">
<tr>
<td>Эта ячейка для формы подписки на рассылку, для рекламы и для другой слуюебной информации</td>
<td>Здесь будет панель навигации</td>
</tr>
</table>
</div>

</body>
</html>

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

Определим стили для каждого слоя:

....
<body>

<div style="border-color:#00FF00; border-style:solid; border-width:5; position:absolute; left:10px; top:10px; width:60%">
<table border="1" bordercolor="#FF0000" width="100%">
<tr>
<td>Эта ячейка для шапки сайта</td>
</tr>
<tr>
<td>Эта ячейка для основной информации web-страницы</td>
</tr>
<tr>
<td>Эта ячейка для копирайта</td>
</tr>
</table>
</div>

<div style="border-color:#00FF00; border-style:solid; border-width:5; position:absolute; right:10px; top:10px; width:35%">
<table border="1" bordercolor="#0000FF" width="100%">
<tr>
<td>Эта ячейка для формы подписки на рассылку, для рекламы и для другой слуюебной информации</td>
<td>Здесь будет панель навигации</td>
</tr>
</table>
</div>

</body>
</html>

Здесь мы задали слоям:

рамочки (цвет - border-color: #00FF00; стиль - border-style: solid; толщину - border-width: 5);

координаты относительно левого (left), правого (right)и верхнего (top)краёв окна браузера;

ширину слоёв (width);

положение на странице (position:absolute).

Сохраним изменения, обновим страницу в браузере; получилось вот это:

Уроки html для начинающих

Вот, собственно, и всё, ничего сложного.

Успехов.

P. S. Рамки слоёв я добавлял в стили просто чтобы выделить слои на странице, их (рамки) можно убрать, и таблицы форматировать как угодно.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Читать также:

Защита Вашего сайта от копирования

Защищаемся от… поисковых систем

Все о тэге Title

Логические теги

Слои на web-странице

Ваше мнение для нас ценно:



Введите цифровой код с картинки*:

Подпишитесь на рассылку
"Вокруг Сайта "
и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта


Узнать подробней о рассылке "Вокруг Сайта" >>






PHP-песочница
Подписаться письмом



Карта
rss
Карта