Basics of Tables

Tabelas HTML devem apenas ser utilizadas para a exibição de dados que naturalmente pertencem a uma grade. Estou citando isto uma vez que tabelas já foram previamente utilizadas para o layout de páginas HTML e isto nunca foi a idéia. Muitos desenvolvedores web utilizaram tabelas para o layout de páginas, mas há duas principais razões para não fazê-lo:

• Isto é semanticamente incorreto
• Tabelas são menos flexíveis que, por exemplo, divs (e outros elementos semânticos)

Os elementos das tabelas são muito compreensíveis, mas o primeiro que você deverá conhecer é o elemento <table>. Este é o primeiro elemento e define que a próxima marcação está dentro de uma tabela.

Quando você está estruturando tabelas, a marcação HTML é basicamente organizada em linhas e células (notar que não existem tags para colunas, apenas linhas).

A tag para as linhas é <tr> (abreviação para "table row" ou linha da tabela, em inglês) e a tag para cada célula é <td> (que vem de "table data" ou dados da tabela, em inglês) e aqui é onde o conteúdo real está.

Antes de você iniciar a escrever suas marcações para a tabela, você precisa saber exatamente como ela deverá ser - isto irá tornar o trabalho muito mais fácil para você. Vamos exercitar e criar uma tabela realmente simples - com três colunas e quatro linhas.

<table border="1" width="100%">
	<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</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>Row 3, cell 2</td>
			<td>Row 3, cell 3</td>
		</tr>
		<tr>
			<td>Row 4, cell 1</td>
			<td>Row 4, cell 2</td>
			<td>Row 4, cell 3</td>
		</tr>
</table>

Como você pode ver, as tags <td> estão aninhadas dentro das tags <tr>, e isto significa que toda a célula em uma linha deve estar dentro do elemento <tr>.

NB!

E note, por favor, que eu adicionei o atributo borda "border" na tag <table> de modo que você possa realmente ver as bordas da tabela quando você testar os exemplos, mas você nunca deverá fazer isto quando estiver escrevendo suas próprias marcações - bordas de tabelas devem ser especificadas no CSS!