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>
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.<head>
<title>Tabela de Preços de produtos</title>
</head><body>
</html><p>Tabela de Preços de produtos:</p>
</table>
</body><table border="1">
<tr>
<td>Produto</td>
<td>Preço Unitário</td>
<td>Quantidade em estoque</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>
<td>R$ 85,00</td>
<td>35</td>
</tr>
<tr>
<td>Pen Drive 2 GB</td>
<td>R$ 15,00</td>
<td>150</td>
<td>R$ 15,00</td>
<td>150</td>
</tr>
<tr>
<td>Impressora Laser Colorida</td>
<td>R$ 613,99</td>
<td>18</td>
<td>R$ 613,99</td>
<td>18</td>
</tr>
<tr>
<td>Monitor LCD 17'</td>
<td>R$ 309,00</td>
<td>41</td>
<td>R$ 309,00</td>
<td>41</td>
</tr>
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:
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:
- Aprenda agora a Mesclar Células em uma Tabela HTML;
- Saiba também como Criar Formulários HTML;
- Aprenda a Criar Listas Ordenadas e Listas Não Ordenadas com HTML;
- Veja como é fácil Inserir Links em Páginas HTML;
- Aprenda a Exibir Imagens em Páginas HTML;
- Adicione Links de Imagem em suas Páginas HTML;
- Saiba como Adicionar Títulos às Páginas HTML;
- Use as Cores RGB e tenha mais de 16 milhôes de opções;
- Leia Introdução ao PHP e comece a criar páginas dinâmicas;
só queria fazer 1 pergunta, podia dizer-me qual a tag utilizada no atributo TEXT??
ResponderExcluirFala aí Alexis,
ResponderExcluirVamos 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!
Thank you for posting such a useful, impressive and a wicked article./Wow.. looking good!
ResponderExcluirGerador De Linha Laser
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?
ResponderExcluirPor favor me ajude.
Olá Rafaela,
ExcluirBom, 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!
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.
ResponderExcluirOi Sérgio, tudo bom?
ExcluirBem, 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!
obg me ajudou muito no trabalho que eu estava fazendo
ResponderExcluirvaleu!!!