Básico em HTML: criando tabelas

tutorial básico sobre como criar tabelas em HTML

Primeiramente, vamos para o código principal da tabela, que é o

<table> </table>

Este é importante para determinar ao navegador que o código entre eles é uma tabela.

Em tabelas, existem linhas e colunas, como no Excel. O código para linhas é o

<tr> </tr>

e o para colunas é o

<td> </td>

Ainda existem outros códigos que auxiliam na personalização da tabela. Um exemplo é a cor de fundo, onde usamos a tag

bgcolor='COR'

tanto para a TAG

<table></table>

como para as tags de linha e coluna.

Parece complicado não acha? Mas não é! Vamos ao exemplo prático.

<table>
<tr>
<td>1ª coluna - 1ª linha</td> <td>2ª coluna - 1ª linha</td>
</tr>
<tr>
<td>1ª coluna - 2ª linha</td> <td>2ª coluna - 2ª linha</td>
</tr>
</table>

Note que estamos utilizando o atributo

bgcolor='yellhow'

tanto na TAG

<table> </table>

como na TAG

<td> </td>

Neste atributo, tanto podemos usar o NOME da cor em INGLÊS como o código dela em HEXADECIMAL.

Ainda existem outros atributos para as tabelas, alguns dos mais usados são:

cellspacing - especifica o tamanho dos espaços entre as células na tabela.
cellpadding - especifica o tamanho dos espaços entre a borda da célula e seu conteúdo.
border - especifica o tamanho da borda da tabela. (apenas para a TAG)
width - largura da tabela ou coluna
height - algura da tabela ou coluna
rowspan - especifica quantas linhas a célula será mesclada
colspan - especifica quantas colunas a célula será mesclada

Um exemplo de Rowspan e Colspan

Rowspan

<table border=1 bgcolor='yellow'> <tr> <td rowspan=2>1ª coluna - 1ª linha + 2ª linha</td> </tr> <tr> <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td> </tr> </table>

Colspan

<table border=1 bgcolor='yellow'> <tr> <td colspan=2>1ª + 2ª coluna - 1ª linha</td> </tr> <tr> <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td> </tr> </table>

Espero ter ajudado
Fonte: codigofonte.net