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