Criar tabelas em html

Criar tabelas em HTML pode parecer complicado, mas quando você acompanhar passo

a passo a explicação, verá que é bem fácil.

vamos lá:

Exemplo 1: Organização

<table>

<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

será renderizado no navegador assim:

Célula 1	Célula 2
Célula 3	Célula 4

note que as células ficaram organizadas, mas ainda confusas, isso porque não foi utilizado o atributo <border>, é o que veremos no exemplo a seguir:

exemplo 2: Borda

<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

será renderizado no navegador assim:

Célula 1	Célula 2
Célula 3	Célula 4

Qual a diferença entre as tags <td> e <tr>?

Este com certeza é o código mais complicado até agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags básicas são usadas para inserir tabelas:

1. <table> começa e termina uma tabela.
2. <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela.
3. <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela.

Eis o que acontece no exemplo dado acima: a tabela começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha:
<td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células.

Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.

exemplo 3: Atributos

vou apresentar alguns atributos que podem ser útil na hora de organizar tabelas: ALIGN e VALIGN

1. align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, centre ou right (à esquerda, no centro ou à direita).
2. valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

ex: <td align="right" valign="top">Célula 1</td>

Agora outros dois: COLSPAN E ROWSPAN ambos são usados para criar tabelas singulares.

Colspan é a abreviação para "column span". Colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula:

<table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

Será renderizado assim no navegador:

Célula 1
Célula 2	Célula 3	Célula 4

rowspan especifica quantas linhas estarão contidas em uma célula:

<table border="1">
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
</table>

Será renderizado assim no navegador:

Célula 1	Célula 2
	Célula 3
	Célula 4

No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam duas linhas independentes. Isso não é difícil, é confuso. É bom desenhar a tabela em uma folha de papel antes de começar a codificação HTML.

Bom, é isso ae galera, espero ter ajudado.