Таблицы.

Ступенька 20 - "Объединяем ячейки.".

Для того, чтобы объединить ячейки нужно воспользоваться атрибутами colspan и rowspan.

Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца /ряда).

Теперь, чтобы было все наглядно, вернёмся к нашему примеру и растянем в нем ячейку ''1х1'' на два столбца, а ячейку '''1x3'' - на две строки:

<table>
<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>

Как вы видите, ячейка ''1х1'' простирается на длину двух ячеек, а ячейка ''1х2'' занимает ширину двух ячек. Соответственно, длина ячейки ''1х1'' равняется суммированной длине этих двух ячеек (110 пикселов), а ширина ячейки ''1х2'' равняется суммированной ширине этих двух ячеек (70 пикселов). Мы не прописали атрибут width для ячейки ''1x1'', и атрибут height для ячейки ''1x2'' но если бы мы решили это сделать, то width задали бы равным ста десяти пикселам, а height задали бы равным cемидесяти пикселам. Обратите так же внимание, что в нашем примере не стало ячеек ''1х3'' и ''2х3'', потому что ячейки ''1х1'' и ''1х2'' равны двум ячейкам, благодаря атрибутам colspan и rowspan соответственно.

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