|
Tabelas
Organização de tabelas e a noção de como estruturar um documento utilizando as tags de tabela.
As
tabelas são definidas pelas tags <table> </table>. Dentro
dessas tags, você deve definir as linhas <tr> </tr> e as
colunas <td> </td> da tabela.
Para definir uma tabela com duas linhas e duas colunas, por exemplo, você terá a seguinte estrutura:
<table> - inicializa a tabela
<tr> - inicializa a primeira linha
<td> conteúdo da célula </td> - inicializa e fecha coluna da esquerda
<td> conteúdo da célula </td> - inicializa e fecha a coluna da direita
</tr> - fecha a primeira linha
<tr> - inicializa a segunda linha
<td> conteúdo da célula </td> - inicializa e fecha a coluna da esquerda
<td> conteúdo da célula </td> - inicializa e fecha a coluna da direita
</tr> - fecha a segunda linha
</table> - fecha a tabela
Exemplo de uma tabela:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1">
<tr>
<td width="150" height="25">Célula 1</td>
<td width="150" height="25">Célula 2</td>
</tr>
<tr>
<td width="150" height="25">Célula 3</td>
<td width="150" height="25">Célula 4</td>
</tr>
</table>
</body>
</html>
Exemplo de uma tabela:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1">
<tr>
<td width="150" height="25">Célula 1</td>
<td width="150" height="25">Célula 2</td>
</tr>
<tr>
<td width="150" height="25">Célula 3</td>
<td width="150" height="25">Célula 4</td>
</tr>
</table>
</body>
</html>
As tags <taable> </table> podem ter os seguintes atributos:
border="n" : define a espessura da borda da tabela, onde n recebe um valor de 1 a 6.
cellspacing="n" : define o espaçamento horizontal entre as células.
cellpadding="n" : define o espaçamento vertical entre as células, sem refletir na largura da borda.
widht="n"
: define a largura da tabela em relação à página. Pode ser dada em
pixels (width="400") ou em porcentagem (width="80%").
height="n"
: define a altura da tabela em relação à página. Pode ser dada em
pixels (height="350") ou porcentagem (height="50%").
bgcolor="cor"
: define a cor de fundo da tabela. Aqui, você também pode optar por
escolher uma imagem como fundo da tabela, com o atributo
background="imagem", que receberá um arquivo .gif ou .jpg.
AS tags <td> </td> e <tr> </tr> podem receber atributos também:
aling="alinhamento"
: define o alinhamento da célula, que pode ser right, left e center,
definindo um alinhamento à direita, à esquerda e ao centro,
respectivamente.
valing="alinhamento_vertical"
: define o alinhamento vertical da célula, ou seja, a distribuição do
texto em relação à página. Esse texto pode ser definido como top, para o
topo da célula; middle, para o meio da célula e bottom para a base da
célula.
colspan="n" : define o número de colunas a serem agrupadas em uma única célula.
rowspan="n" : define o número de linhas a serem agrupadas em uma única célula.
Veja Mais:
Veja Mais:
- Introdução ao HTML- Editar texto em html
- Formatar imagem em html
- Criar Links em html
- Criar Listas em html
- Criar Tabelas em html
- Mesclando as células de uma tabela com COLSPAN e ROWSPAN
- Criar Régua em HTML
0 comentários:
Postar um comentário