Убираем огрехи

Убираем некоторые огрехи. Атрибуты 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>

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

We remove some flaws. Attributes cellspacing, cellpadding, VALIGN

 

If an unbiased opinion to look at what we did in the previous tutorial Our first page with text in the central cell in an additional panel 95% border = «0»), you will notice that the right-hand cell in the second table shows «banners and advertising» located in the center, rather than stick to the very top of the table. We forgot to put in a cell value VALIGN = top.

If you have forgotten, the attribute VALIGN responsible for the alignment of the cell contents to the top, middle or bottom. Accordingly, the values will be VALIGN:

VALIGN = top, — the upper edge;

VALIGN = bottom — the bottom edge;

VALIGN = middle — the middle.

 

Alignment can be either for the contents of the cell and for the whole table. The code of the cell aligned along the top edge will look like this:

 

<td WIDTH = 200px VALIGN = top> <br> Banners and ads </ td>

 

In addition to the alignment of the second «defect», which can be seen on our website — it offsets between Border and the contents of the table. If you look closely, you will see that between the outline in the table and its contents as it looks through a thin strip backgrounds. If you like it, or for a specific your design — leave it at that. But if you want to have between the frame and the contents there was no distance, you need to enter two more values: cellspacing = «0», cellpadding = «0»

cellspacing specifies the distance between table cells.

cellpadding specifies the left, right, top and bottom margins of the cells themselves. That is, the contents of the cell moves from its edges.

 

We define these values for our middle of the table, and at the same time we equate to zero the value of a border for the middle of the table:

 

<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> Our first page </ 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»> Read the book </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/»> Article </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»> Forum </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»> As we did this site </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»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

</ font>

</ td> </ table>

</ td> </ table>

</ td>

<td WIDTH = 200px VALIGN = top> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» cellspacing = «0» cellpadding = «0» border = «3»>

<td align = «center»> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br>

 

<a href=»http://palmernw.ru/» target=»_blank»> <img src = «http://palmernw.ru/bannerw.jpg» border = «0» width = «88» height = » 31 «alt =» Temples and Monasteries of the North-West «> </a>

<a href=»http://dugward.ru/» target=»_blank»> <img src = «http://dugward.ru/banner4.jpg» border = «0» width = «88» height = » 31 «alt =» Literature and Life. The problems of contemporary literature «> </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 Political Cartoons. England 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 Real Star Wars — 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 City of invulnerability «> </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 = «forumnye role-playing games. The problems, solutions, advertising»> </a>

 

</ td>

</ table>

 

</ body>

</ html>

In order not to empty the place, I place advertising banners put some advertising banners.

Now we put all this construction to the page: Our first page- and we can admire what happened.