Веб-инструмент
Веб-мастерская
Очень часто таблицы используются как элемент оформления страницы, с помощью которого можно точно разместить на странице текст и графику. При этом обычно используется страница без рамок, а в ячейки вставляются элементы страницы — текстовые фрагменты, изображения и другие таблицы.
Пример:
Форматирование веб-страницы при помощи таблиц
<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.
Они задают отступ от края окна веб-браузера до элемента страницы:
Если эти параметры, а также параметр 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>
В окне веб-браузера это будет выглядеть ТАК.
Обсудить на форуме