Таблицы.

Ступенька 22 - "Устанавливаем расстояние между рамками ячеек, и между рамкой ячейки и текстом".

Расстояние между рамками ячеек устанавливается при помощи атрибута cellspacing для тэга <table></table>. Если его задать равным нулю, то пространства между ячейками таблицы не будет. Чем больше будет значение этого атрибута, тем больше будет пространства между ячейками.

Проиллюстрируем это на нашем примере. Сначала присвоим атрибуту cellspacing значение десять, а затем ноль.

<table cellspacing="10" border="10" bordercolor=white>
<caption align="top">пример</caption>
<tr align=center>
<td colspan="2" valign=top height="35" bgcolor=red> 1x1 </td>
<td rowspan="2" width="55" bgcolor=black> 1x2 </td>
</tr>
<tr align=center>
<td valign="bottom" height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
</tr>
</table>

<table cellspacing="0" border="10" bordercolor=white>
<caption align="top">пример</caption>
<tr align=center>
<td colspan="2" valign=top height="35" bgcolor=red> 1x1 </td>
<td rowspan="2" width="55" bgcolor=black> 1x2 </td>
</tr>
<tr align=center>
<td valign="bottom" height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
</tr>
</table>

Расстояние между рамкой ячейки и текстом устанавливается при помощи атрибута cellpadding для тэга <table></table>, который задает верхнее, нижнее, правое и левое поля ячейки. Поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибуту cellpadding значение равное нулю (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячейками).

Покажем, как действует этот атрибут наглядно на нашем примере. Сначала присвоим атрибуту cellpadding значение тридцать, а затем ноль.

<table cellpadding="30" cellspacing="0" border="10" bordercolor=white>
<caption align="top">пример</caption>
<tr align=center>
<td colspan="2" valign=top height="35" bgcolor=red> 1x1 </td>
<td rowspan="2" width="55" bgcolor=black> 1x2 </td>
</tr>
<tr align=center>
<td valign="bottom" height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" border="10" bordercolor=white>
<caption align="top">пример</caption>
<tr align=center>
<td colspan="2" valign=top height="35" bgcolor=red> 1x1 </td>
<td rowspan="2" width="55" bgcolor=black> 1x2 </td>
</tr>
<tr align=center>
<td valign="bottom" height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
</tr>
</table>

[ Назад: Ступенька 21-ая ] [ Далее: Ступенька 23-ая ]