Таблицы на web-странице

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

Но, тем не менее, я не хотел бы расставаться с моим творением и удалять страницу, жалко все-таки, трудился над созданием, а вам рекомендую хотя бы посмотреть, как верстались таблицы в недалёком прошлом. Изучите этот материал. Я уверен, он будет Вам полезен, так как наряду с уже устаревшими методами построения таблиц, здесь Вы найдете много современных методов, которые я постоянно включаю в эту статью. Поехали...

Применение таблиц, их виды и коды

Таблицы - популярнейшее средство оформления web-страниц. Одним из способов их применения на сайте является использование в качестве  каркаса всей страницы:

Думаю, что такую таблицу вам соорудить несложно и самим, но на всякий «пожарный» приведу пример html-кода:

<table width="100%" bgcolor="#F0E68C" border="1" 
align="center" cellpadding="10" cellspacing="0">
<tr>
<td colspan="3" height="10%">Шапка сайта
</td></tr>
<tr>
<td width="15%" valign="top">Область навигации по разделам сайта. 
</td>
<td  valign="top">Контент страницы.
</td>
<td width="25%" valign="top">Область новостей, рекламы.
</td>
</tr>
<tr>
<td colspan="3" height="40" align="center">Область дублирующей
 навигации сайта.
</td></tr></table>

Размеры такой таблицы обычно задаются равными размерам окна браузера. Все ячейки таблицы, кроме второй ячейки второй строки имеют жёстко заданные размеры. Благодаря этому при различных размерах окна браузера размеры дополнительных элементов страницы остаются постоянными, а основное содержание подстраивается под размеры окна. Такой способ создания web-страниц называется  резиновой вёрсткой.

Эта схема не является обязательной.  Есть множество других вариантов.

Далее хочу представить вам возможные варианты применения различных таблиц и, соответственно, их html-коды.

Таблица пунктиром

Html-код таблицы выглядит так:

<table style="border-right: 2px dashed; border-top: 2px dashed;
 border-left: 2px dashed; border-bottom: 2px dashed; border-collapse: 
 collapse" cellspacing="0" cellpadding="20" width="70%" align="center"
 border="1">
<tr><td bgcolor="#F0E68C">
<p>Наполнение  таблицы</p> 
</td></tr></table>

Внимание! Важная информация!

Таблица с закруглёнными углами

Пример размещения контента В 1927 году «от руки» автомобиля погибла известная всему миру Айседора Дункан, американская танцовщица, жена Сергея Есенина. Судьба выбрала довольно необычный способ, чтобы оборвать жизнь балерины. Она отдыхала в Ницце, и вечером 14-го сентября поехала кататься на своем шикарном «Bugatti». Концы длинной шелковой шали развевались по ветру. Один из них вдруг попал на колесо автомобиля. Все произошло буквально за доли секунды – намотавшийся на колесо шарф убил Айседору, переломив ей позвоночник и порвав сонную артерию, словно стальной трос. «Великой босоножке» было 49 лет.

Код таблицы:

<table width="600px" align="center" cellpadding="0" cellspacing="0"
 border="0" bgcolor="#F0E68C">
<tr>
<td style="text-align:left;"><img src="images/t1.jpg"
 width="24" height="27"></td>
<td style="text-align:right;"><img src="images/t2.jpg"
 width="24" height="27"></td>
</tr>
<tr>
<td width="100%" bgcolor="#F0E68C" colspan="2">
<p>Наполнение страницы</p>
</td>
<tr>
<td style="text-align:left;"><img src="images/b1.jpg"
 width="24" height="27"></td>
<td style="text-align:right;"><img src="images/b2.jpg"
 width="24" height="27"></td>
</tr></table>

Всё как-будто просто и замечательно, но есть одна маленькая «заморочка». Видите в коде файлы изображений, выделенные маркером? Они представляют собой небольшие рисунки, сделанные в графическом редакторе и выглядят следующим образом:

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

Если цвет таблицы вас удовлетворяет (его можно поменять и сделать заливку изображений любым другим цветом), можно скачать (3,1 кб) эти рисуночки, загрузить их в вашу папку с изображениями на сайте, скопировать код таблицы и   «в добрый путь!»

Один из вариантов этого способа выглядит так:

Заголовок Здесь располагается текст.

Здесь всё то-же самое, только внутрь вставляем ещё одну таблицу другого цвета. Я думаю, всё понятно.

Внимание! Важная информация!

CSS таблицы:

.demo1 
{
width: 85%; 
background-color: #F0E68C;
border: 1px #778899 solid; 
border-collapse: separate;
border-radius: 10px;
margin: 0 auto;
}

DIV с закруглёнными углами

Блок DIV с закруглёнными углами делается проще. Не нужно рисунков, только внести данные в стили в «голове» сайта <head>(выделено жёлтым маркером) или в файл style.css. А код выделенный розовым цветом скопировать и разместить в нужном месте сайта в разделе body.

Заголовок

Здесь располагается контент

Html-код такого блока:

<html>
<head>

<style type="text/css">
div.nifty
{ 
margin: 0 10%; 
background: #9BD1FA;
}
b.rtop, b.rbottom
{
display: block; 
background: #FFF;
}
b.rtop b, b.rbottom b
{
display: block; 
height: 1px;
overflow: hidden; 
background: #9BD1FA;
}
b.r1
{
margin: 0 5px;
}
b.r2
{
margin: 0 3px;
}
b.r3
{
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px; 
height: 2px;
} 
</style>

</head>
<body>
<div class="nifty">
<b class="rtop"><b class="r1"></b>
<b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>
Здесь располагается контент
<b class="rbottom"><b class="r4"></b>
<b class="r3"></b><b class="r2"></b>
<b class="r1"></b></b>
</div>
</body>
</html>

Блок DIV с тенью

Html-код такого блока:

<html>
<head>
<style type="text/css">

div.shadow
{
position: relative;
width: 50%;
margin: 25px auto;/*чтобы расположить блок
 посередине (не работает в IE младше 6-ой версии)*/
background: #777;
}
div.shadow  div
{
position: relative;
left: -5px;
top: -5px;
background: #fff;
border: 1px solid #111;
padding: 10px;
}
</style>
<body>

<div class="shadow">
 <div>
  Как сделать простую тень без использования графики?
 Два блока DIV, расположенные один в другом! 
 </div></div>			 
</body>
</html>

Внимание! Важная информация!

CSS такой таблицы:

.demo2
{ 
background-color: #FFFFFF; 
width: 85%;
margin: 0 auto;
border: 0px #778899 solid;  /* Эту строку можно не писать */
border-collapse: separate;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

Скроллбар

Одесский анекдот

Сара, ваша Фирочка таки выучилась на строителя?
Таки да.
Шо ви говорите! И шо ж она строит?
Азохн вей!  Ходит по Дерибасовской и строит из себя «девочку»!

Html-код такого блока:

<html>
<head>
<style type="text/css">

div.scroll 
{
overflow: auto;
height: 15em;
width: 450px;
padding: 1ex;
margin: 0 0 30px 5px;
border: 1px solid #345411;
background: #F0E68C;
color: #000;
}	
</style>
</head>
<body>

<div class="scroll">
<img src="/images/1b5a5b9bb67f.jpg"
 border="0" vspace="20" hspace="20" align="left" width="250"
 height="250" alt="барышня">
</div>
</body>
</html>

Таблица с «border double»

Двойной контур таблицы

Код такой таблицы:

<table width="600" border="0" cellspacing="15" bgcolor="#F0E68C"
 style="border:5px double #CCCCCC" align="center">
<tr><td>
<img src="images/aisedora_duncan.jpeg" width="110" height="80"
 vspace="10" hspace="0" align="left" alt="">
<p align="center">Двойной контур таблицы</p>
</td></tr></table>