Урок 7. Убираем некоторые огрехи. Атрибуты cellspacing, cellpadding, VALIGN

Если непредвзятым взглядом посмотреть на то, что у нас получилось в предыдущем уроке (Наша первая страница с текстом в центральной ячейке, внутри дополнительной таблички 95% border="0" ), можно заметить, что в правой ячейке второй таблицы надпись "баннеры и реклама" расположена по центру, вместо того, чтобы прилипнуть к самому верху таблицы. Здесь мы забыли поставить в ячейку значение VALIGN=top.
Если вы уже забыли, то атрибут VALIGN отвечает за выравнивание содержимого ячейки по верхнему краю, центру или нижнему краю. Соответственно, значения VALIGN будут:
VALIGN=top, - верхний край;
VALIGN=bottom - нижний край;
VALIGN=middle - середина.

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

<td WIDTH=200px VALIGN=top> Баннеры <br> и реклама </td>

Помимо выравнивания, второй "дефект", который можно наблюдать на нашей странице - это отступы между бордером и содержимым таблицы. Если присмотреться, вы увидите, что между рамочкой таблицы и её содержимым как бы проглядывает тоненькая полоска фона. Если вам это нравится или подходит для конкретного вашего дизайна - оставьте всё как есть. Но если вы хотите, чтобы между рамочкой и содержимым не было никакого расстояния, вам необходимо ввести ещё два значения: cellspacing="0", cellpadding="0"
cellspacing задаёт расстояние между ячейками таблицы.
cellpadding задаёт левое, правое, верхнее и нижнее поля самих ячеек. То есть отодвигает содержимое ячеек от её краёв.

Зададим эти значения для нашей средней таблицы, а заодно приравняем к нулю значение бордера для средней таблицы:

<html>
<head>
<style type="text/css">
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>
<title> Наша первая страница </title>
</head>
<body bgcolor="#c0c0c0" background="f3.gif">

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="3" cellspacing="0", cellpadding="0" VALIGN=top>
<td>

<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width="100%" cellspacing="0", cellpadding="0" border="0">
<td WIDTH=200px VALIGN=top>

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>

<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>

</td>

<td>
<table width="100%" body bgcolor=#e5e5e7 border="3"> <td align="center">

<table width="95%" border="0" VALIGN=top>
<td align="center">
<font face="Arial" font color="#000000" style="font-size: 14pt">
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
</p>
</font>
</td> </table>
</td> </table>
</td>
<td WIDTH=200px VALIGN=top> Баннеры <br> и реклама </td>
</table>

<table width="100%" cellspacing="0" cellpadding="0" border="3">
<td align="center"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br>

<a href="http://palmernw.ru/" target="_blank"> <img src="http://palmernw.ru/bannerw.jpg" border="0" width="88" height="31" alt="Монастыри и храмы Северо-запада"> </a>
<a href="http://dugward.ru/" target="_blank"> <img src="http://dugward.ru/banner4.jpg" border="0" width="88" height="31" alt="Литература и жизнь. Проблемы современной литературы"> </a>
<a href="http://greatserenada31.ucoz.ru/" target="_blank"> <img src="http://greatserenada31.ucoz.ru/baners/rpg3.jpg" border="0" width="88" height="31" alt="RPG Политический детектив. Англия 1931"> </a>
<a href="http://trustworthysw.ucoz.ru/" target="_blank"> <img src="http://trustworthysw.ucoz.ru/avat2/b3.jpg" border="0" width="88" height="31" alt="RPG Настоящие Звёздные Войны - II"> </a>
<a href="http://trustworthy.ucoz.ru" target="_blank"> <img src="http://rb.foto.radikal.ru/0709/01/179bacf2245c.jpg" border="0" width="88" height="31" alt="RPG Город Неуязвимых"> </a>
<a href="http://foxyfox3.narod.ru/index.html" target="_blank"> <img src="http://s51.radikal.ru/i133/0809/69/2fef14206376.jpg" border="0" alt="Форумные ролевые игры. Проблемы, решения, реклама"> </a>

</td>
</table>

</body>
</html>

Чтобы не пустовало место, я на место для рекламных баннеров поставила несколько рекламных баннеров.
Теперь поставим всю эту конструкцию на страницу: Наша первая страница - и можем полюбоваться тем, что получилось.

Урок окончен.

Перейти к Уроку 8

Наверх