Criação de Tabelas em HTML

É muito fácil criar uma tabela utilizando a Linguagem HTML. Para isso, vamos usar basicamente as Tags <table>, <tr> e <td>. Seguem as definições:

Tag <table>: Como o próprio nome diz, cria uma tabela;

Tag <tr>: Cria uma linha.

Tag <td>: Cria uma célula.

Vamos ver um exemplo para entender na prática. O código abaixo deve gerar uma tabela com 5 linhas e 3 colunas (Três células por linha). Coloquei a Tag <table> na cor Azul, a Tags <tr> na cor Vermelho e as Tags <td> na cor Roxo apenas para facilitar o entendimento:
<html>
<head>
<title>Tabela de Preços de produtos</title>
</head>
<body>
<p>Tabela de Preços de produtos:</p>
<table border="1">
<tr>
<td>Produto</td>
<td>Preço Unitário</td>
<td>Quantidade em estoque</td>
</tr>
<tr>
<td>HD SATA 80 GB</td>
<td>R$ 85,00</td>
<td>35</td>
</tr>
<tr>
<td>Pen Drive 2 GB</td>
<td>R$ 15,00</td>
<td>150</td>
</tr>
<tr>
<td>Impressora Laser Colorida</td>
<td>R$ 613,99</td>
<td>18</td>
</tr>
<tr>
<td>Monitor LCD 17'</td>
<td>R$ 309,00</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Perceba que, apesar de o código ser grande, é de fácil entendimento pois as Tags <tr> (Linhas) e <td> (Células) se aparecem várias vezes.

Repare que as Tags <tr> estão dentro da Tag <table> (pois as linhas estão dentro da tabela) e que as Tags <td> estão dentro das Tags <tr> (pois as células estão dentro das linhas).

Veja o resultado:
Criar Tabela HTML

Nota: O parâmetro border da Tag <table> não é obrigatório. Utilizei-o apenas para deixar claro que criamos uma tabela já que seu valor padrão é 0 (zero), ou seja, por padrão uma Tabela HTML não contém borda.

Mais parâmetros da Tag <table>
Parâmetro Descrição Observações
width Largura da tabela Pode ser definido em pixels ou em percentual.
align Alinhamento da tabela Valores Possíveis: left (Padrão), center, right
bgcolor Cor de fundo da tabela
bordercolor Cor das linhas da tabela
cellspacing Distância entre uma célula e outra
cellpadding Distância entre as extremidades das células e seus conteúdos

Alguns Parâmetros da Tag <tr>
Parâmetro Descrição
bgcolor Cor de fundo da linha
height Altura da linha

Alguns Parâmetros da Tag <td>
Parâmetro Descrição Observações
align Alinhamento horizontal do conteúdo da célula Valores Possíveis: left (Padrão), center, right
valign Alinhamento vertical do conteúdo da célula Valores Possíveis: top, middle (Padrão), bottom
bgcolor Cor de fundo da célula
colspan Mescla duas ou mais células na horizontal Aprenda a Mesclar Células em uma Tabela HTML
rowspan Mescla duas ou mais células na vertical


Leia mais:

8 comentários:

  1. só queria fazer 1 pergunta, podia dizer-me qual a tag utilizada no atributo TEXT??

    ResponderExcluir
  2. Fala aí Alexis,

    Vamos ver se entendi sua pergunta, você quer saber qual TAG HTML possui o atributo TEXT. Certo?

    Caso afirmativo, a resposta é TAG BODY.

    O atributo TEXT é usado na TAG BODY para definir a cor dos textos da página.

    Expliquei isso em:
    http://denecir.blogspot.com/2010/08/parametros-das-tags-html.html


    Isso tirou sua dúvida? Se não, posta aí que assim que possível eu respondo.


    Forte Abraço!

    ResponderExcluir
  3. Thank you for posting such a useful, impressive and a wicked article./Wow.. looking good!

    Gerador De Linha Laser

    ResponderExcluir
  4. Olá gostaria de saber como faço pra fazer uma tabela que tem do esquerdo uma imagem e lado direito mais 4 colunas com 4 links sendo que em baixo tem uma caixa de texto, isso tudo do lado da imagem?
    Por favor me ajude.

    ResponderExcluir
    Respostas
    1. Olá Rafaela,

      Bom, pelo que entendi, você vai precisar fazer uma mesclagem de linhas (rowspan="2") para célula onde vai ficar a imagem e uma mesclagem de colunas (colspan="4") para célula onde vai ficar a caixa de texto.

      Não tenho como colocar tags aqui em comentário aqui no blogger, mas tenta aí e se não conseguir fala aí que tento te ajudar de outro jeito.

      Espero ter ajudado!

      Abraço!

      Excluir
  5. olá amigo, sou novo em html e gostaria da sua ajuda, estou fazendo um site para o trabalho da faculdade e estou com dificuldade em inserir 2 tabelas uma no lado da outra, sendo q uma ficaria só um logo pequeno e na outras um texto, sempre q tento fazer isso acaba ficando uma tabela pra fora.

    ResponderExcluir
    Respostas
    1. Oi Sérgio, tudo bom?

      Bem, pelo que entendi você na verdade esta querendo uma tabela com apenas uma linha e duas células. Não é isso?

      Em uma célula ficaria a logo e, em outra o texto. Certo?

      Se não for isso, posta aí!


      Abraço irmão!

      Excluir
  6. obg me ajudou muito no trabalho que eu estava fazendo
    valeu!!!

    ResponderExcluir

O que você achou do post? Faça um comentário.

Aprenda a receber dados de Formulário com PHP

Existem três arrays associativos que podemos usar para receber dados de Formulários HTML em PHP. São eles: $_GET , $_POST e $_REQUEST . O...