HTML - Tabelas

Tabelas podem ser difícies no começo, mas com um pouco de paciência e prática vocÇe verá que as coisas nem sempre são como parecem. A tag <table> é usada para abrir uma tabela. Com essa tag encontraremos outras tags típicas. <tr> (as linhas da tabela) e <td> (as colunas da tabela). Mas a melhor explicação é sempre um exemplo:

html<table border="1">
	<tr>
		<td>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>
	</tr>
</table>

Demo

Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2

O conteudo será colocado entre as filas da tabela. A fila representa o que está entre <td> e </td>. O atributo de bostra estabiliza o comprimento das margens da tabela.

HTML - Tabelas assimetricas

Para formar uma tabela assimetrica iremos usar 'rowspan' para cruzar mais de uma linha e 'colspan' para cruzar mais de uma coluna. Se quisermos que a primeira linha sirva de título para todas as colunas usaremos a tag <th> . Essas serão escritas em negrito, como veremos no seguinte exemplo:

html<table border="1"> 
	<tr>
		<th>Column 1</th> 
		<th>Column 2</th>
		<th>Column 3</th>
	</tr>
	<tr>
		<td rowspan="2">Row 1 Cell 1</td> 
		<td>Row 1 Cell 2</td>
		<td>Row 1 Cell 3</td>
	</tr>
	<tr>
		<td>Row 2 Cell 2</td>
		<td>Row 2 Cell 3</td>
	</tr> 
	<tr>
		<td colspan="3">Row 3 Cell 1</td>
	</tr>
</table>

Demo

Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

HTML - Espaçando as células

Com a ajudade dos atributos 'cellpadding' e 'cellspacing' estabeleceresmos as distâncias entre as células, 'Cellspacing' estabiliza o tamanho da margem e 'cellpadding' a distância entrea margem e o conteúdo. No exemplo a seguir um pouco de cor foi adicionado.

html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> 
	<tr> 
		<th>Column 1</th>
		<th>Column 2</th> 
	</tr> 
	<tr>
		<td>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>
	</tr> 
</table>

Para fazer uma diferença melhor delineada, apague as margens do exemplo anterior.

A distância entre as células e a o tamanho d margem será interpretado pelo navegador em pixels. Usando essa rega, o valor 10 na verdade significa 10 pixels. Esse não é o único atributo que usa pixels como unidade de medida, mas aprenderesmos sobre os outros a medida que avançamos pelos próximos tutoriais.