Como Criar Sites | Aprenda grátis como fazer seu site

A tabela HTML serve para exibir elementos tabelados, mas ela pode servir para fazer todas as partes do site, todo o formato do site. Atualmente o formato do site pode e deve ser feita sem tabelas, que é o que chamamos de tableless (sem tabela, mas isso é assunto para um post futuro).

Vamos colocar um exemplo de tabela e depois explicamos o seu funcionamento.

<table style="width: 100%; border: 1px solid black;">
	<tr>
		<th>Título 1</th>
		<th style="border: 2px solid red;">Título 2</th>
		<th>Título 3</th>
	</tr>
	<tr>
		<td style="border: 2px solid green;">Campo 11</td>
		<td>Campo 12</td>
		<td style="border: 2px solid blue;">Campo 13</td>
	</tr>
	<tr>
		<td>Campo 21</td>
		<td style="border: 2px solid yellow;">Campo 22</td>
		<td>Campo 23</td>
	</tr>
</table>

Nesse exemplo mostro como fazer uma tabela com a primeira linha de título (<th>) e com duas linhas normais (<td>), tendo cada linha três colunas. Para fazer uma linha de uma tabela você deve iniciar com a tag <tr> e finalizar com o fechamento dessa tag </tr>. Dentro dessa tag vão as tags de colunas, <th> e <td>. Vamos a algumas definições.

<table>

- Cria uma tabela. Essa tag pode ter atributos que podem ser substituidos por estilos (CSS). Alguns atributos da tag <table> são: border, width, height, cellspacing, cellpadding e outros.

<tr>

- Cria uma linha na tabela. A tag <tr> sempre cria uma nova linha na tabela e seus atributos são parecidos com os da tag <table>, sendo que seus efeitos só são vistos dentro da linha ao qual a <tr> define.

<th>

- Cria uma coluna de título dentro de uma linha da tabela. Essa coluna deixa o seus conteúdo em negrito e centralizado. Essa tag também pode usar qualquer atributo, mas seus efeitos só valerão para a coluna que ela define e na linha que ela está contida.

<td>

- Cria uma coluna dentro de uma linha da tabela. Essa coluna dentro da linha pode ser definida como um campo da tabela. Essa tag pode definir qualquer atributo, mas seus efeitos só valerão para a coluna que ela define e na linha que ela está contida.

No nosso exemplo, está definido alguns estilos na tag <table>, como a largura dela (width: 100%) e a como vai ser a borda (border: 1px solid black). Essa borda está definida que vai ter largura de 1 pixels, vai ter o tipo solid (linha continua) e vai ter a cor preta. Em algumas colunas tem o estilo bem parecido com o da tabela, mas está para 2 pixels de largura da borda e de cores variadas. O funcionamento desse exemplo pode ser visto em Exemplo Tabela 1.

Colspan e Rowspan

Os atributos colspan e rowspan servem para dizer para um campo quantas colunas e quantas linhas ele deve ocupar, respectivamente. O padrão desses atributos é 1 (um), que normalmente um campo ocupa somente uma coluna e uma linha.

Exemplo de Colspan:

<table style="border: 1px solid black;">
	<tr>
		<td colspan="2" style="border: 1px solid black;">Campo 11 e Campo 12</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 21</td>
		<td style="border: 1px solid black;">Campo 22</td>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo, o primeiro campo vai ocupar duas colunas (colspan = “2″), por isso, para manter a primeira linha com três colunas devemos colocar apenas mais uma coluna (<td>).

Exemplo de Rowspan

<table style="border: 1px solid black;">
	<tr>
		<td rowspan="2" style="border: 1px solid black;">Campo 11 e Campo 21</td>
		<td style="border: 1px solid black;">Campo 12</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 22</td>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo o primeiro campo vai ocupar duas linhas (rowspan=”2″), por isso, para manter a segunda linha com três colunas devemos colocar apenas duas colunas (<td>) na segunda linha.

Exemplo de Colspan e Rowspan Juntos

<table style="border: 1px solid black;">
	<tr>
		<td colspan="2" rowspan="2" style="border: 1px solid black;">Campo 11, Campo 12, Campo 21 e Campo 22</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo temos o primeiro campo ocupando duas colunas e também ocupando duas linhas, por isso temos que colocar somente mais uma coluna (<td>) na primeira e na segunda linha.

Para ver esse exemplos funcionando entre em Exemplos de Colspan e Rowspan.

Para mais informações sobre tabelas HTML acesse http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.4.