Criando e editando tabelas com HTML
Bem, dessa vez essa sessão saiu um pouquinho mais tarde. Hoje vamos aprender a mexer com tabelas! Interessante? Talvez.
O básico da tabela é isso:
<table>
<tr>
<td> </td>
</tr>
</table>
O código acima cria uma tabela de 1 coluna e 1 linha. Como a maioria dos códigos nós podemos incrementar, colocando um tamanho tanto em pixels(fixo) como em porcentagem(tamanho dependente do monitor do usuário).
Uma tabela com 700px:
<table width="700px">
<tr>
<td> </td>
</tr>
</table>
No caso da porcentagem, o tamanho vai se definir conforme é o tamanho do monitor do usuário. Se você fizer uma tabela com o tamanho de 90%, então a tabela tomará 90% do monitor. Entendeu?
O código é esse para porcentagem:
<table width="90%">
<tr>
<td> </td>
</tr>
</table>
Para fazer com que informações apareçam dentro da tabela mude o que esta em vermelho ( )
Explicando o código:
<table></table>: São o começo e o fim do código da tabela, respectivamente.
width="90%" ou width="700px": É o tamanho que você vai dar para sua tabela, tanto em porcentagem(%) ou em pixels(px). Não esqueça dos símbolos.
<tr></tr>: Início e fim da coluna, respectivamente.
<td></td>: Início e fim da linha, respectivamente.
: É o equivalente ao um aperto na barra de espaço.
Você pode fazer com que não aja espaço entre as colunas e linhas e também entre o conteúdo e a linha. Usa-se o cellpadding para dar espaço entre o conteúdo e a linha, ou seja, o conteúdo ficara longe ou perto das linhas dependendo do número que você escolher. E o cellspacing é o espaço externo entre as colunas e linhas, ou seja, quanto maior o número escolhido mais longe umas das outras as linhas e colunas ficarão, sem afetar o conteúdo como o cellpadding. Para usar esse tipo de espaçamento coloque os seguintes códigos na tag <table>: cellpadding=”0″ cellspacing=”0″
Ficando assim:
<table cellpadding=”0″ cellspacing=”0″> ou <table width="700px" cellpadding=”0″ cellspacing=”0″>
Pode também tirar ou colocar a borda, coloque esse código na mesma tag: border="0"(para tirar) ou border="1" (para colocar, sendo que pode ser qualquer número de 1 a 999)
Ficando o código assim:
<table width="700px" border="0" cellpadding="0" cellspacing="0">(sem borda) ou <table width="700px" border=”1″ cellpadding=”0″ cellspacing=”0″>(com borda).
Também podemos colocar planos de fundo (ou cor de fundo) na tabela ou em determinada linha/coluna. Basta colocar o seguinte código na tag <table>, <tr> ou <td>.
bgcolor=”#000″: para colocar cor, que nesse exemplo foi preto. Para mais cores visite a palheta de cores.
background=”URL DA IMAGEM”: para colocar imagens como plano de fundo.
Coloque um desses códigos na tag que você quer que apareça o efeito.
Exemplo:
<table bgcolor=”#000″> ou <table background=”URL DA IMAGEM”>
<tr bgcolor=”#000″> ou <tr background=”URL DA IMAGEM”>
<td bgcolor=”#000″> ou <td background=”URL DA IMAGEM”>
Você pode unir duas colunas ou duas linhas também. Um exemplo é a imagem abaixo, o código da tabela da imagem é esse:
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Ela tem duas linhas e duas colunas, sem borda e com um tamanho de 500px.
Unindo as duas linhas de cima:
O código ficaria assim:
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
As duas linha de baixo:
O código ficaria assim:
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
As linhas da coluna da esquerda:
O código ficaria assim:
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
As linhas da coluna da direita:
O código ficaria assim:
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Alinhando uma tabela:
Basta colocar os seguintes códigos na tag <table>:
Centralizando: align=”center”
Alinhado à direita: align=”right”
Alinhado à esquerda: align=”left”
Ficando assim:
<table align=”center”> ou <table align=”right”> ou <table align=”left”>
Mude as informações em vermelho para as informações que você quer que apareça em sua tabela.
Dúvidas podem ser tiradas pelos comentários. Talvez algumas coisas ditas não foram absorvidas por completo, não se acanhe e pergunte. 
Outros artigos indicados:
- Aprendendo a criar tabelas em HTML
- Guia de Referência HTML e XHTML – Tabelas
Sempre que me dá um ‘branco’ corro aqui para ler seu tuto, muito bem explicado. Parabéns e obrigada!
Obrigado Ariane!!! Eu fico muito feliz com isso.
Te amo, tá? xD
Ótimo tuto…….
Parabéns