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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Форматирование веб-страницы при помощи таблиц

Форматирование веб-страницы при помощи таблиц

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

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форматирование веб-страницы при помощи таблиц</title>
</head>

<body bgcolor="#CCFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="5" width="100%" height="100%">
<!--Таблица полностью заполняет всю страницу -->
<tr>
<td align="center" colspan="3" height="100" bgcolor="silver"
<font size="5" face="serif" color="#FF0000"><b>Шапка документа</b></font>
</td>
</tr>
<tr valign="top">
<td width="180">
<!--Эта ячейка содержит панель навигации -->
<br>
<h3 align="center">Оглавление</h3>
<ul type="disc">
<li><a href="91.html">Форматирование веб-страницы</a></li>
<li><a href="75.html">Заголовок таблицы</a></li>
<li><a href="76.html">Строки таблицы</a></li>
<li><a href="76.html">ячейки таблицы</a></li>
</ul>
</td>
<td align="center">
<!--Эта ячейка содержит основную часть страницы -->
<br>
<h2>Форматирование веб-страницы</h2>
<p>Содержание статьи</p>
<!--Пример вложенной таблицы -->
<table width="200" border="1">
<caption>Заголовок таблицы</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td width="150" align="center">
<!--Эта ячейка содержит изображение -->
<p>Осень в лесу <img src="images/100-IMGA0442.JPG" width="144" height="89" alt="текст подсказки" vspace="10" align="top"></p>
</td>
</tr>
<tr><td colspan="3" align="center" height="50" bgcolor="silver">
<!--Эта ячейка содержит информацию об авторе -->
© Авторские права
</td>
</tr>
</table>

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Обратите внимание на строчку

<body bgcolor="#CCFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">

Здесь использованы еще не знакомые нам параметры тега <body> ІІІ bottommargin, leftmargin, rightmargin, topmargin.

Они задают отступ от края окна веб-браузера до элемента страницы:

  • topmargin ІІІ сверху;
  • bottommargin ІІІ снизу;
  • leftmargin ІІІ слева;
  • rightmargin ІІІ справа.

Если эти параметры, а также параметр cellspacing тега <table> приравнять к нулю, то можно полностью убрать отступы от края окне веб-браузера до таблицы.

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

С помощью таблицы можно выравнивать элемент веб-страницы по центру не только горизонтально

Выравнивание элемента веб-страницы по центру

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форматирование веб-страницы при помощи таблиц</title>
</head>

<body bgcolor="#CCFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td colspan="2" bgcolor="#CCCCCC" align="center" height="50">
<font color="#FF0000" size="5"><b>Шапка страницы</b></font>
</td>
</tr>
<tr>
<td width="180" align="center">Панель навигации</td>
<td align="center" valign="middle">
<b> Текст в центре окна</b>
</td>
</tr>
</table>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.