Горизонтальное растягивание
Иногда необходимо сделать вот так:
Чтобы сделать так, как показано в примере, необходимо прописать в этой ячейки colspan=2, где цифра означает насколько необходимо растянуть ячейку от других:
<table>
<tr>
<td height="50" width="50" bgcolor="#7094b7" valign="top"
colspan="2">1х1</td>
<td width="50" bgcolor="#ff9426">1х2</td>
</tr>
<tr>
<td height="70" width="50" bgcolor="#ff9426" valign="top">2х1</td>
<td width="50" bgcolor="#7094b7">2х2</td>
<td width="50" bgcolor="#ff9426" valign="bottom">2х3</td>
</tr>
</table>
или например так:
<table>
<tr>
<td height="50" width="50" bgcolor="#7094b7" valign="top"
colspan="3">1х1</td>
</tr>
<tr>
<td height="70" width="50" bgcolor="#ff9426" valign="top">2х1</td>
<td width="50" bgcolor="#7094b7">2х2</td>
<td width="50" bgcolor="#ff9426" valign="bottom">2х3</td>
</tr>
</table>
Вот, что должно получиться:
Обратите внимание, что двух ячеек в первой строке нет (удалены), так как первая ячейка равняется трём с помощью тэга colspan="3".
Вертикальное растягивание
Вертикальное растягивание задается тэгом rowspan="2". Например, нужно растянуть последнюю ячейку между двумя строками:
Тэги этого примера:
<table>
<tr>
<td height="50" width="50" bgcolor="#7094b7" valign="top">1х1</td>
<td width="50" bgcolor="#ff9426">1х2</td>
<td width="50" bgcolor="#7094b7"
rowspan="2">1х3</td>
</tr>
<tr>
<td height="70" width="50" bgcolor="#ff9426" valign="top">2х1</td>
<td width="50" bgcolor="#7094b7">2х2</td>
</tr>
</table>
Для того чтобы растянуть ячейку между тремя строками, нужно изменить rowspan="2" на rowspan="3" и так далее...
на предыдущую страницу |
Оглавление |
на следующую страницу