Aprendendo a produzir tabelas em HTML

Muitas vezes é necessário passar uma informação de uma maneira mais explicativa, ai surgem as tabelas.
Para se criar uma tabela em html precisamos conhecer suas tags e atributos.
É usada a tag “table” e dentro dessa tag são criadas linhas e colunas.

• “tr”: Gera a linha de sua tabela.
• “td”:Gera a célula de sua tabela.

Este exemplo mostra a produção de uma tabela com uma linha e uma coluna e depois duas linhas e três colunas. Mostra também o atributo da tag “table” , o border, esse atributo define a borda de sua tabela, que pode ser trocada como o exemplo a baixo demonstra (obs: se você não especificar a borda de sua tabela, sua tabela será produzida sem nenhuma borda).



Cabeçalho de uma tabela
Para criar o cabeçalho de uma tabela é usada a tag “th” (table heading).
O exemplo abaixo mostra como um cabeçalho é criado.


Inserindo Título em Uma Tabela
Para inserir título em uma tabela é usado a tag “caption”, mostrada no exemplo abaixo:

Células que ocupam mais de uma coluna ou linha
Existem casos em que há a necessidade de que uma célula ocupe mais de uma linha ou coluna. Para atender a essa necessidade usamos os atributos "colspan" e "rowspan" (colspan define quantas colunas aquela celula deve ocupar e rowspan quantas linhas). Exemplo:

E também há como inserir tags dentro de sua tabela, como o exemplo abaixo demonstra.

Espaçamento nas células

Para produzir o espaçamento nas células, usamos o cellpadding, ele cria um espaço entre o conteúdo da célula e sua borda. Exemplo

Também é possível trocar a cor do fundo ou inserir uma imagem no fundo de sua tabela, assim:

Também há como fazer isso no fundo de uma célula trocando o atributo bgcolor ou o background de posição, você o tira da tag table e o coloca na tag .

Alinhando o Conteúdo de Uma Célula

Para alinhar o conteúdo de uma célula usamos o atributo align e especificamos onde ele deve estar (Center, right...), como no exemplo abaixo:

Neste exemplo encontramos outro atributo diferente chamado width, ele define a largura padrão de cada célula.

Atributo Frame

É utilizado para controlar as bordas da página. Este exemplo define melhor o que ele faz.