Criando 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

1. 
   

. 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

1. 
   
   

e o para colunas é o

1. 
   
   

.


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

1. 
   bgcolor='COR'
   

tanto para a TAG

1. 
   
   
   
   como para as tags de linha e coluna.
   
   
   Parece complicado não acha? Mas não é! Vamos ao exemplo prático.
   
   
   

   1ª coluna - 1ª linha	2ª coluna - 1ª linha
   1ª coluna - 2ª linha	2ª coluna - 2ª linha

   
   
   
   o Código para esta tabela:
   
   
   
   
   
   
   1. 
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      1ª coluna - 1ª linha	2ª coluna - 1ª linha
      1ª coluna - 2ª linha	2ª coluna - 2ª linha

   
   
   
   Note que estamos utilizando o atributo
   
   
   
   1. 
      bgcolor='yellhow'
      
   tanto na TAG
   
   
   
   1. 
      
   como na TAG
   
   
   
   1. 
      
      
   .
   Neste atributo, tanto podemos usar o NOME da cor em INGLÊS como o
   código dela em HEXADECIMAL. (href='http://www.codigofonte.net/?secao=geradores&acc=cores'
   target=_blank> Clique aqui para um assistente de
   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
   
   
   
   1. 
      
   )
   
   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
   
   
   

   rowspan=2>1ª coluna - 1ª linha + 2ª linha	2ª coluna - 1ª linha
   2ª coluna - 2ª linha

   
   
   
   Código:
   
   
   
   
   
   
   1. 
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      1ª coluna - 1ª linha + 2ª linha
      	1ª coluna - 2ª linha	2ª coluna - 2ª linha

   
   
   
   Colspan
   
   
   

   colspan=2>1ª + 2ª coluna - 1ª linha
   1ª coluna - 2ª linha	2ª coluna - 2ª linha

   
   
   
   Código:
   
   
   
   
   
   
   1. 
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      1ª + 2ª coluna - 1ª linha
      1ª coluna - 2ª linha	2ª coluna - 2ª linha

   
   
   
   Bom. É isto ae pessoal. Dúvidas, postem abaixo.
   
   
   Até a próxima.