Таблицы на web-странице (продолжение)

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

Тот факт, что для создания такой таблицы не нужно прописывать стили в файле CSS, ни в коем случае не упрощает и не усложняет задачу, это просто иной вариант достижения желаемой цели, конечного результата. Как недостаток этого варианта можно отметить невозможность изменения ширины (значения width) таблицы, так как она формируется в браузере с помощью изображений фиксированного размера (523 пиксела).

Установка на сайт

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

Далее в предполагаемом месте разместить код таблицы и заполнить её контентом. Вот и всё.

Код таблицы с зелеными границами

<table width="523" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td height="34" style="background-image: url(imgtable/1green.png);"></td>
</tr><tr>
<td style="background-image: url(imgtable/2green.png);">
<h3 align="center">Заголовок</h3>
<div align="center">
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<p>Same dances in the same old shoes
 Some habits that you just can’t lose
 There’s no telling what a man might lose,
 After the thrill is gone.</p>
</td></tr></table>
</div>
</td></tr>
<tr><td height="19" style="background-image: url(imgtable/3green.png); background-repeat: no-repeat; background-position: bottom;"> 
</td></tr></table>
              

Код таблицы с синими границами

<table width="523" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td height="34" style="background-image: url(imgtable/1blu.png);"> 
</td></tr>
<tr><td style="background-image: url(imgtable/2blu.png);">
<h3 align="center">Заголовок</h3>   
<div align="center">
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<p>The flame rises but it soon descends
 Empty pages and a frozen pen
 You’re not quite lovers and you’re not quite friends
 After the thrill is gone, oh,
 After the thrill is gone.</p>
</td></tr></table>
</div>
</td></tr>
<tr><td height="19" style="background-image: url(imgtable/3blu.png); background-repeat: no-repeat; background-position: top;"> 
</td></tr></table>
                                      

Не забывайте посещать мой сайт. Здесь Вы найдёте много интересного и полезного материала. Желаю удачи! Ваш L.M.