Loading





Форекс с Альпари

eTXT




Анкетка


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


<<<на предыдущую   Страница 2

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


Заголовок

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.



Заголовок

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.


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

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

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

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


СКАЧАТЬ ИЗОБРАЖЕНИЯ (7.9 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


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


<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.




<<<на предыдущую   Конец страницы 2

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка