uma tabela é composta por linhas e colunas que formam...
TRANSCRIPT
HTML - TABELAS
TABELAS
Uma tabela é composta por linhas e colunas que formam células. Essas células podem conter textos, imagens e até mesmo outras tabelas
TABELAS
<TABLE [BORDER="n"] [CELLPADDING="n"] [CELLSPACING="n"] [WIDTH="n"]>
.... definição do conteúdo da tabela
</ TABLE>
TABELAS
A ausência do atributo border, ou border= "0", indica que essa tabela não terá nenhuma borda
border= “4”
LINHAS E COLUNAS
Cada uma das linhas de uma tabela é iniciada por meio da tag <TR> (table Row) e finalizada por intermédio da tag de encerramento de linha </TR>. Cada uma dessas linhas contém colunas cujo conteúdo está entre as tags <TD> e cujo conteúdo está entre as tags <TD> e </TD> (table data).
TABELAS
<HTML><HEAD><TITLE>Aula HTML</TITLE></HEAD><BODY BGCOLOR="#EDEDED" >
<TABLE BORDER="1"><TR>
<TD> linha 1 coluna 1 </TD><TD> linha 1 coluna 2 </TD><TD> linha 1 coluna 2 </TD><TD> linha 1 coluna 3 </TD>
</TR><TR>
<TD> linha 2 coluna 1 </TD><TD> linha 2 coluna 2 </TD><TD> linha 2 coluna 3 </TD>
</TR></TABLE>
</BODY></HTML>
ESPAÇAMENTOS ENTRE CÉLULAS
Para controlarmos a distância entre duas célula, utilizamos o atributo cellspacing , cujo argumento é dado em pixels.
<TABLE cellspacing = “20” BORDER="1"><TR>
<TD> linha 1 coluna 1 </TD><TD> linha 1 coluna 1 </TD><TD> linha 1 coluna 2 </TD><TD> linha 1 coluna 3 </TD>
</TR><TR>
<TD> linha 2 coluna 1 </TD><TD> linha 2 coluna 2 </TD><TD> linha 2 coluna 3 </TD>
</TR></TABLE>
ESPAÇAMENTOS ENTRE CÉLULAS
20
20
20 20
cellspacing = “20”
ESPAÇAMENTOS ENTRE CÉLULAS
Para controlar o espaçamento vertical, utilizamos o cellpadding
cellpadding = “25”
2525
25 2525
ESPAÇAMENTOS ENTRE CÉLULAS
Atributo WIDTH = "n“
Este atributo tem como função definir qual será a largura mínima da tabela.
<TABLE WIDTH = “300” BORDER="1"><TR><TR>
<TD> linha 1 coluna 1 </TD><TD> linha 1 coluna 2 </TD><TD> linha 1 coluna 3 </TD>
</TR><TR>
<TD> linha 2 coluna 1 </TD><TD> linha 2 coluna 2 </TD><TD> linha 2 coluna 3 </TD>
</TR></TABLE>
ALINHAMENTO DE TABELAS
Atributo ALIGN
Ainhar a tabela em uma página, bem como alinhar o conteúdo das células
ALIGN=" left ": Alinha a tabela na margem esquerda. Por default, este será o valor esquerda. Por default, este será o valor assumido pela tag <TABLE> se esse atributo for suprimido.ALIGN =" center ": Centraliza a tabela na janela do navegador.ALIGN =" right ": Alinha a tabela na margem direita da tela.
ALINHAMENTO DE TABELAS
Atributo ALIGN
<TABLE ALIGN= “center” BORDER="1"><TR>
<TD> linha 1 coluna 1 </TD><TD> linha 1 coluna 2 </TD><TD> linha 1 coluna 3 </TD>
</TR></TR><TR>
<TD> linha 2 coluna 1 </TD><TD> linha 2 coluna 2 </TD><TD> linha 2 coluna 3 </TD>
</TR></TABLE>
ALINHANDO O CONTEÚDO
atributo VALIGNPermite alinhar verticalmente o conteúdo das células de uma tabela de três maneiras
VALIGN="top" : Alinha os dados contidos em uma célula do topo da célula para baixo.VALIGN ="bottom" : Alinha os dados contidos VALIGN ="bottom" : Alinha os dados contidos em uma célula da parte inferior da célula para cima.VALIGN ="middle" : Centraliza verticalmente os dados contidos em uma célula.
ALINHANDO O CONTEÚDO
atributo VALIGN
<TABLE WIDTH = "400" BORDER="1" ALIGN ="right":><TR>
<TD VALIGN="TOP">linha 1 coluna 1<P> </P></TD><TD VALIGN="MIDDLE"> linha 1 coluna 2 </TD><TD VALIGN="BOTTOM"> linha 1 coluna 3 </TD>
</TR></TR><TR>
<TD> linha 2 coluna 1 </TD><TD> linha 2 coluna 2 </TD><TD> linha 2 coluna 3 </TD>
</TR></TABLE>