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



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

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