ТАБЛИЦЫ

В работе над написанием поста, нам довольно часто приходиться использовать таблицы. Принцип написания таблиц в HTML, мы и рассмотрим в данном посте...

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

<table border=1>

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

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

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

</table>

<table border=1>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

</table>

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

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

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

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

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;"

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

Код:

<table>

<td> Таблица 1 </td>

<td> Таблица 2 </td>

<td> Таблица 3 </td>

</table>

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

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

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

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

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

<table bgcolor="teal" cellpadding="5">

<tr>

<td><font color="white"> TEXT </font></td>

</tr>

</table>

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

<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 вместо многоточий ставятся размеры картинки (их можно узнать из пункта «Свойства» вашей картинки)

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

<table width="100%" cellpadding="0" cellspacing="10" border="0">
<tr>

<td> TEXT1</td>

<td width="2" bgcolor="#000000"></td>

<td> TEXT2</td>

</tr>

</table>

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

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

Ее код:

<table cellspacing=8>

<tr>

<td>картинка-один</td>

<td>картинка-два</td>

</tr>

<tr>

<td>картинка-три</td>

<td>картинка-четыре</td>

</tr>

<tr>

<td>картинка-пять</td>

<td>картинка-шесть</td>

</tr>

</table>


Или так:

Код:

<table cellspacing=8>

<tr>

<td>картинка-один</td>

<td>картинка-два</td>

<td>картинка-три </td>

</tr>

<tr>

<td>картинка-четыре</td>

<td>картинка-пять</td>

<td>картинка-шесть</td>

</tr>

</table>

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

Источник

Серия сообщений "Теги HTML":
Часть 1 - Бесплатные библиотеки, огромный выбор.
Часть 2 - В помощь работе с HTML кодами (тегами)
...
Часть 26 - Приложения для Web Дизайнеров (Free OnLine Service)
Часть 27 - Инструменты для подбора цвета
Часть 28 - HTML - Таблицы
Часть 29 - HTML - Вставляем в пост изображения
Часть 30 - HTML - Оформляем ссылки