HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






HTML - Tabelas - Contrução

O uso de tabelas possibilitam aos desenvolvedores de site arquitetar páginas com aparência mais profissional, tornado-as mais atraentes. Com elas se criam espaços organizados que possibilitam arrumar convenientemente os diversos elementos na página, o que dificilmente seria possível com simples comandos.

Uma tabela é constituída por linhas e colunas de células nas quais é possível inserir diversos elementos tais como: texto, imagens, links, listas, filmes e até mesmo outras tabelas.

A construção de tabelas se obtém através dos seguintes comandos:
<TABLE></TABLE> - responsável por abrir uma tabela.
<TR></TR> - insere uma linha na tabela.
<TD></TD> - insere colunas nas linhas. É entre essas tags que se colocam os elementos desejados, texto, imagens etc..

coluna1 coluna2 coluna3
coluna1 coluna2 coluna3
coluna1 coluna2 coluna3

Você poderá acrescentar mais linhas conforme evidenciado na cor marrom no diagrama abaixo:

Resultado:

coluna1coluna2coluna3
coluna1coluna2coluna3
coluna1coluna2coluna3
coluna1 coluna2 coluna3

ou mais colunas conforme evidenciado em marrom no diagrama a seguir:

Resultado:

coluna1coluna2coluna3 coluna4
coluna1coluna2coluna3 coluna4
coluna1coluna2coluna3 coluna4

Quando não se especifica a altura e largura da tabela, ela é dimensionada conforme o conteúdo, isto é, a altura e largura das células se expandem automaticamente para que todo o conteúdo caiba dentro dela.
Uma tabela sem conteúdo desaparece, portanto é oportuno frisar que se deve inserir algum conteúdo nas células, podendo ser uma referência especial como &nbsp; (Non-Breaking SPace) que representa um espaço vazio ou uma Gif  Espaçadora Transparente.
As três tabelas abaixo foram construídas com a mesma estrutura, porém suas células comportam elementos diversos: texto, figura e espaço em branco.

kithome

                   

 


Alinhamento

Com o uso do comando <DIV></DIV> e a propriedade ALIGN é possível alinhar as tabelas à direita, ao centro e à esquerda (default).
Sintaxe: <DIV ALIGN="X">tabela</DIV>, onde X poderá assumir os valores RIGHT, CENTER e LEFT.

Exemplo:
<div align="center">
<table border="1">
<tr><td>Alinhado ao centro</td></tr>
</table>
</div>

Resultado:

Alinhado ao centro

O alinhamento vertical do conteúdo de uma célula pode ser controlada com o parâmetro VALIGN.
Os valores mais comuns são: BOTTOM, MIDDLE, TOP e BASELINE.

Exemplo:

<TABLE BORDER="1" WIDTH="400" height="150" cellspacing="4" cellpadding="4">
<TR>
<TD VALIGN="BOTTOM" width="100">bottom</TD>
<TD width="100">MIDDLE</TD>
<TD VALIGN="TOP" width="100">top</TD>
<TD VALIGN="BASELINE" width="100">baseline</TD>
</TR>
</TABLE>
bottom middle top baseline

O alinhamento horizontal do conteúdo de uma célula é feito através do parâmetro ALIGN associado aos valores LEFT, RIGHT ou CENTER.

Exemplo:

<TABLE BORDER WIDTH="300">
<TR>
<TD ALIGN="RIGHT">right</TD>
<TD ALIGN="CENTER">center</TD>
<TD ALIGN="LEFT">left</TD>
</TR>
</TABLE>
right center left

Obs: O alinhamento pode ser aplicado a linhas inteiras, com:
<TR ALIGN="VALOR" VALIGN="VALOR">conteúdo</TR>
Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da linha.


Na caixa de Teste on-line abaixo você poderá configurar e testar uma tabela.
Teste on-line: