Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento na tabela

21-01-2007 02:33

Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se nenhum alinhamento for definido, o conteúdo das células é alinhado à horizontalmente esquerda e verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal) e VALIGN (alinhamento vertical) devem ser usados dentro dos tags <TR> e <TD> (além de <TH>, se for o caso). Os alinhamentos possíveis são:
Alinhamento horizontal
ALIGN=LEFT: alinha o conteúdo à esquerda
ALIGN=RIGHT: alinha o conteúdo à direita
ALIGN=CENTER: alinha o conteúdo ao centro
Alinhamento vertical
VALIGN=BASELINE: mantém as linhas de texto com o mesmo alinhamento (para ser usado dentro de <TR> ou no primeiro <TD> de uma linha)
VALIGN=TOP: alinha o conteúdo no topo
VALIGN=MIDDLE: alinha o conteúdo ao centro
VALIGN=BOTTOM: alinha o conteúdo na base da célula
Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento padrão.
<TABLE BORDER>
<TR>
<TH>Título 1</TH><TH>Título 2</TH>
</TR>
<TR>
<TD>Célula 1</TD>
<TD><B>Célula 2</B><P>
Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.</TD>
</TR>
</TABLE>

A largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda coluna. Vamos melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a largura da borda da tabela.
<TABLE BORDER=3>
<TR>
<TH>Título 1</TH><TH>Título 2</TH>
</TR>
<TR>
<TD valign=top>Célula 1</TD>
<TD width=300><B>Célula 2</B><P>
A largura de cada célula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD>
</TR>
</TABLE>
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado