Tutor Designer: < TABLE>

quarta-feira, 21 de julho de 2010

< TABLE>

Tabela usada para organizar os dados dentro do site!
Tabela Simples 1x1:
< table> Tabela< /table>
Tabela

Tabela 1x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< /table>
O resultado:
L1 C1 L1 C2

Tabela 2x2:
< table>
< tr>
< td>L1 C1< /td>
< td>L1 C2< /td>
< tr>
< td>L2 C1< /td>
< td>L2 C2< /td>
< /table>

O resultado é:
L1 C1 L1 C2
L2 C1 L2 C2

Dentro da Tag < TABLE> existem SUBTAGS como você viu eu usei < tr>, < td>.

< TR> É justamente o commando que manda os dados para a linha de baixo, no caso de vir logo após a tag < TABLE> ela marca o inicio da entrada de dados na tabela, tento se passado a primeira linha e queremos ir para a segunda linha da tabela simplesmente a colocamos novamente, e assim para irmos para as demais linha que nossa tabela venhaa ter!

< TD> É o comando que passa os dados para a proxima coluna da mesma linha!

Atributos

Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta < table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes:

align Alinha horizontalmente a tabela em relação ao seu entorno.(left, center, right)

background Permite-nos colocar um fundo para a tabela desde um link a uma imagem.

bgcolor Dá cor de fundo à tabela.(tanto em Ingle quanto em HTML)Tabela de cor

border Define o número de pixels da borda principal. Se 0 a tabela exista, mas não aparece!

bordercolor Define a cor da borda.

cellpadding Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.

cellspacing Define o espaço entre as bordas (em pixels).

height Define a altura da tabela em pixels ou porcentagem.

width Define a largura da tabela em pixels ou porcentagem.

Podemos alinha toda nossa tabela usando o atributo ALIGN dentro da tag HTML.
Veja < TABLE align="center">< TR>< TD>dados< /TD>< /TABLE>
o resultado é:
dados

Podemos colocar tabela dentro de tabela.
Vamos fazer uma tabela externa 1x2 e uma interna na segunda coluna 3x1 ambas com borda 2.

Ou seja:
< table border="2">
< tr>
< td>Tabela 1< /td>
< td>
< table border="2" bordercolor="yellow" bgcolor="red">
< tr>
< td>1< /td>
< tr>
< td>2< /td>
< tr>
< td>3< /td>
< /table>
< /td>
< /table>

Tabela 1
1
2
3