Tabelas em html

Olá pessoal, tudo bem? 

Hoje vou falar um pouco sobre TABELAS. 

No desenvolvimento de websites, por mais simples que seja, é necessário uma maneira de organizar seus conteúdos e ajustar seu website. Para isto, usamos as famosas TABELAS. Vou explicar passo a passo como criar a sua sem a necessidade de qualquer programa que desenvolva páginas. 

Para isto, vamos precisar do Bloco de notas, isto mesmo! O bloco de notas do Windows. Ou qualquer programa editor de textos simples que você tenha instalado em seu computador. 

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 border=1 bgcolor='yellow'><tr><td>1ª coluna - 1ª linha</td><td bgcolor='#aaddbb'>2ª coluna - 1ª linha</td></tr><tr><td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td></tr></table> 

o Código para esta tabela: 

<table border=1 bgcolor='yellow'>
<tr>
<td>1ª coluna - 1ª linha</td> <td bgcolor='#aaddbb'>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. (<a href='http://www.codigofonte.net/?secao=geradores&acc=cores' target=_blank> Clique aqui para um assistente de hexadecimal</a>). 

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
<table></table>
) 
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><td> 2ª coluna - 1ª linha</td></tr><tr><td>2ª coluna - 2ª linha</td></tr></table> 

Código: 

<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> 

Código: 

<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>


Bom. É isto ae pessoal. Dúvidas, postem abaixo. 

Até a próxima.