Хаки и Скрипты Next Generation CMS : Таблицы : Не много о таблицах

irbees2008 Опубликовано - 16 - января Таблицы

Автор: ----------
Адаптировал: ----------

Таблицы

Если размеры ячеек таблиц изначально не заданы, они «подстраиваются» под объем содержимого ячеек.

По умолчанию границы таблиц не отображаются (border=0), чтоб назначить минимальную окантовку, нужно задать border=1.

Столбец 1

Столбец 2

Столбец 3

Код:

<table border=1>

<td> Столбец 1 </td>

<td> Столбец 2 </td>

<td> Столбец 3 </td>

</table>

Первая ячейка 1-й строки	Вторая ячейка 1-й строки
Первая ячейка 2-й строки	Вторая ячейка 2-й строки

Код:

<table border=1>

<tr>

<td>Первая ячейка 1-й строки</td>

<td>Вторая ячейка 1-й строки</td>

</tr>

<tr>

<td>Первая ячейка 2-й строки</td>

<td>Вторая ячейка 2-й строки</td>

</tr>

</table>

Рамки таблиц рельефно-двойные. так как по умолчанию атрибут cellspacing=2

Зададим cellspacing=0

Заголовок 1	Заголовок 2
Содержание 1	Содержание 2

Код:

<table border=1 cellpadding=8 cellspacing=0 bordercolor=black>

<tr>

<th>Заголовок 1</th>

<th>Заголовок 2</th>

</tr>

<tr>

<td>Содержание 1</td>

<td>Содержание 2</td>

</tr>

</table>

Город	Население
Москва	10.000.000

Код:

<table cellpadding="5" cellspacing="5" style="margin: 0 5px 2px 0;">
<TR></p>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Москва</td>
<td>10.000.000</td>
</tr>
</table>
<p> <table cellpadding="5" cellspacing="5">

<tr>

<th bgcolor="#CCCCCC">Город</th>

<th bgcolor="#CCCCCC">Население</th>

</tr>

<tr>

<td>Москва</td>

<td>10.000.000</td>

</tr>

</table>

Для плавного обтекания таблицы текстом:

Город	Население
Москва	10.000.000

Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam…

в первый тег

Код:

<table>

нужно добавить

Код:

style="float: left; margin: 0 5px 2px 0;"

Код:

style="float: right; margin: 0 0 2px 5px;"

style="float: right; margin: 0 0 2px 5px;"

Поместить несколько таблиц в ряд, например:

Город	Население
Москва	10.000.000

Город	Население
Минск	2.000.000

Город	Население
Киев	2.000.000

Код:

<table>
<td>
<table cellpadding="5" cellspacing="5">
<TR></p>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Москва</td>
<td>10.000.000</td>
</tr>
</table>
</td>
<td>
<table cellpadding="5" cellspacing="5">
<TR></p>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Минск</td>
<td>2.000.000</td>
</tr>
</table>
</td>
<td>
<table cellpadding="5" cellspacing="5">
<TR></p>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Киев</td>
<td>2.000.000</td>
</tr>
</table>
</td>
</table>

Город	Население
Москва	10.000.000
Минск	2.000.000
Киев	2.000.000

<table cellspacing="5" cellpadding="5">

<tr bgcolor="#aaaaff">

<th>Город</th><th>Население</th>

</tr>

<tr bgcolor="#dddddd">

<td>Москва</td><td>10.000.000</td>

</tr>

<tr bgcolor="#dddddd">

<td>Минск</td><td>2.000.000</td>

</tr>

<tr bgcolor="#dddddd">

<td>Киев</td><td>2.000.000</td>

</tr>

</table>

Заголовок 1	Заголовок 2	Заголовок 3
РЯД 2	РЯД 2	РЯД 2
РЯД 3	РЯД 3	РЯД 3
РЯД 4	РЯД 4	РЯД 4

<table>

<tr>

<th>Заголовок 1</th>

<th>Заголовок 2</th>

<th>Заголовок 3</th>

</th>

<tr>

<td>РЯД 2</td>

<td>РЯД 2</td>

<td>РЯД 2</td>

</tr>

<tr>

<td>РЯД 3</td>

<td>РЯД 3</td>

<td>РЯД 3</td>

</tr>

<tr>

<td>РЯД 4</td>

<td>РЯД 4</td>

<td>РЯД 4</td>

</tr>

</table>

Цветная ячейка 1	Цветная ячейка 2
Цветная ячейка 3	Цветная ячейка 4

<table border="8">

<tr>

<td bgcolor="#00CCFF">Цветная ячейка 1</td>

<td bgcolor="#CC00FF">Цветная ячейка 2</td>

</tr>

<tr>

<td bgcolor="#00FF00">Цветная ячейка 3</td>

<td bgcolor="#FFFF00">Цветная ячейка 4</td>

</tr>

</table>

Цветная ячейка 1	Цветная ячейка 2
Цветная ячейка 3	Цветная ячейка 4

<table border="0" cellspacing="5">

<tr>

<td bgcolor="#00CCFF">Цветная ячейка 1</td>

<td bgcolor="#CC00FF">Цветная ячейка 2</td>

</tr>

<tr>

<td bgcolor="#00FF00">Цветная ячейка 3</td>

<td bgcolor="#FFFF00">Цветная ячейка 4</td>

</tr>

</table>

Блогсервисы	ЖЖ	Ли.ру
Блогсервисы	Диари	Я.ру

<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>

<tr>

<td rowspan=2 align=center><b>Блогсервисы</b></td>

<td>ЖЖ</td>

<td>Ли.ру</td>

</tr>

<tr>

<td>Диари</td>

<td>Я.ру</td>

</tr>

</table>

Блогсервисы
ЖЖ	Ли.ру	Диари	Я.ру

<table border=5 bordercolor=99CCFF cellpadding=7 width=40%>

<tr>

<td colspan=4 align=center><b>Блогсервисы</b></td>

</tr>

<tr>

<td>ЖЖ</td>

<td>Ли.ру</td>

<td>Диари</td>

<td>Я.ру</td>

</tr>

</table>

Табличным кодом можно задать цветной фон поста:

Теги… Все эти кавычечки, буквочки и скобочки — как узоры следов на снегу. Сначала — неизвестная азбука, а потом, когда вникнешь — книга, прочтение которой не вызывает затруднений. Упоительнейшее занятие — пишешь слово, затем оборачиваешь его замысловатыми иероглифами, кутаешь в слои черно-белых символов и получаешь восхитительнейший результат. © singita

Можно фоном поста сделать картинку:

Спокойной ночи, дорогие друзья мои…

<table cellpadding=30>

<tr>

<td background=URL картинки><font color=white>TEXT</font></td>

</tr>

</table>

Параметр cellpadding задает оступ текста от границ картинки. Если объем текста превышает размеры картинки, она будет автоматически продублирована нужное число раз (в примере выше 2 раза)

Таблицей можно сделать рамку картинки:

ЗАКАТ

<center><table border="20" bgcolor="brown">

<caption align=bottom>ВАША ПОДПИСЬ</caption>

<tr><td>

<table border="12" bgcolor="brown">

<tr><td><img src=АДРЕС КАРТИНКИ></td></tr>

</table></td></tr>

</table></center>

Размер картинки любой — рамка сама «подгонится»

Быстро наложить текст на картинку без графических редакторов:

Закат на даче

<table border="0" cellpadding="0" cellspasing="0">

<tr>

<th width=.. height=.. background="URL КАРТИНКИ" valign="bottom">

<font color="yellow">ВАШ ТЕКСТ</font></th>

</tr>

</table>

В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта «Свойства» вашей картинки)

Разделить пост на две части можно так:

Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis …

В качестве разделителя служит пустой столбец
<td width="2" bgcolor="#000000"></td> , меняя width и bgcolor , меняем цвет и толщину разделителя

Делаем галереи картинок с помощью таблиц:

(здесь использованы кликабельные превьюшки. что и вам советую)

Ее код:

Код:

<table cellspacing=8>
<tr>
<td><a href="http://www.imagebam.com/image/d6f78016236112" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/d6f78016236112.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/a3a56c16236113" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/a3a56c16236113.gif" alt="free image host"rel="nofollow"></a></td>
</tr>
<tr>
<td><a href="http://www.imagebam.com/image/17546016236114" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/17546016236114.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/81240016236115" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/81240016236115.gif" alt="free image host"rel="nofollow"></a></td>
</tr>
<tr>
<td><a href="http://www.imagebam.com/image/abd8e216236116" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/abd8e216236116.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/c6833916236117" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/c6833916236117.gif" alt="free image host"rel="nofollow"></a></td>
</tr>
</table>

Или так:

Код:

<table cellspacing=8>
<tr>
<td><a href="http://www.imagebam.com/image/d2157f16236118" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/d2157f16236118.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/a3632516236121" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/a3632516236121.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/2ac94616236122" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/2ac94616236122.gif" alt="free image host"rel="nofollow"></a></td>
</tr>
<tr>
<td><a href="http://www.imagebam.com/image/7d9ac216236123" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/7d9ac216236123.gif" alt="free image host"></arel="nofollow"></td>
<td><a href="http://www.imagebam.com/image/ce147716236124" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/ce147716236124.gif" alt="free image host"rel="nofollow"></a></td>
<td><a href="http://www.imagebam.com/image/5559bb16236125" target="_blank"rel="nofollow"><img src="http://thumbnails10.imagebam.com/1624/5559bb16236125.gif" alt="free image host"rel="nofollow"></a></td>
</tr>
</table>

Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов

Можешь почитать и вот эту статейку "Размещаем рекламу между новостями на TWIGе"

Это тоже интересно

25.08.13Таблицы

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.