Оформление таблиц.



Если размеры ячеек таблиц изначально не заданы, они “подстраиваются” под объем содержимого ячеек.
По умолчанию границы таблиц не отображаются (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">
<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;"


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

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

Код:

<table>
<td> Таблица 1 </td>
<td> Таблица 2 </td>
<td> Таблица 3 </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>


Кнопка на сайт:»MIRZAM.RU»

Заработок в Интернете