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