Colspan & Rowspan

Na forma como a marcação HTML está estruturada, em algumas linhas você pode ter quatro células, em outras pode ter três células, em algumas duas células e assim por diante. Para que isto realmente funcione, você precisa utilizar os atributos colspan e rowspan (o valor destes atributos é dado sempre em números inteiros). Pode ser um pouco complicado utilizar estes atributos então você deverá ter alguma paciência.

Vamos utilizar o exemplo do capítulo anterior e fazer a primeira linha possuir apenas duas células em vez de três e, também, unir a segunda célula das linhas três e quatro.

<table border="1" width="100%">
	<tr>
		<td colspan="2">Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
	<tr>
		<td>Row 3, cell 1</td>
		<td rowspan="2">Row 3, cell 2</td>
		<td>Row 3, cell 3</td>
	</tr>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

Como você pode ver, eu removi a terceira célula da linha 1 e inclui o atributo colspan na primeira célula da linha 1. O que você precisa saber quando desejar criar células que se estendem através de colunas é que a extensão é sempre para a direita.

Para criar uma célula que se estende através de linhas, você deve lembrar de que quando você estende através de linhas a extensão será sempre para baixo. Isto significa que você deve remover a célula na linha seguinte ou a tabela não irá se parecer como você planejou