A tag <table> é utilizada para a criação de tabelas, com ela definimos o inicio (<table ...>) e o fim de uma tabela (</table). Assim como as demais tags HTML devemos informar na tag de inicialização todos os atributos que nossa tabela terá. Tabelas são muito utilizadas para exibir conteúdos em forma de planilhas e para ajudar na estrutura do layout de uma página.
Exemplo de uso de tabelas em uma página:

Pergunta, quantas tabelas existem na figura acima?
USO:
<table border="1" width="100%" height="500" background="http://www.meusite.com/minhaimagem.jpg" bgcolor="yellow" bordercolor="#000000" cellpadding=”5” cellspacing=”0” align=”center”> …conteúdo…</table> |
Atributos:
border é a expessura da borda de sua tabela, se seu valor for 0 a tabela existirá, mas sem bordas
width é a largura em pixels (colocar apenas o número desejado) ou em porcentagem (colocar o numero da porcentagem seguido de %”) de sua tabela
height é a altura de sua tabela em pixels
background é a imagem de fundo da tabela, para definir o caminho da imagem de fundo deve se utilizar a mesma regra usada no atributo href da tag <a> e do atributo src da tag <img />, Consulte "Caminhos relativos e absolutos"
bgcolor é a cor de fundo de sua tabela, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
bordercolor é a cor da borda de sua tabela, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
cellpadding é o espaço entre a borda e o conteúdo da tabela
cellspacing é o espaço entre as bordas da tabela
align é o alinhamento da tabela, os valores aceitáveis são: left, right, center, justify
border é a expessura da borda de sua tabela, se seu valor for 0 a tabela existirá, mas sem bordas
width é a largura em pixels (colocar apenas o número desejado) ou em porcentagem (colocar o numero da porcentagem seguido de %”) de sua tabela
height é a altura de sua tabela em pixels
background é a imagem de fundo da tabela, para definir o caminho da imagem de fundo deve se utilizar a mesma regra usada no atributo href da tag <a> e do atributo src da tag <img />, Consulte "Caminhos relativos e absolutos"
bgcolor é a cor de fundo de sua tabela, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
bordercolor é a cor da borda de sua tabela, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
cellpadding é o espaço entre a borda e o conteúdo da tabela
cellspacing é o espaço entre as bordas da tabela
align é o alinhamento da tabela, os valores aceitáveis são: left, right, center, justify
Atenção: O único conteúdo aceito dentro das tags <table></table> são linhas (<tr></tr >)
<tr>...</tr> - A tag <tr></tr> é utilizada para definir o início e o fim de uma linha.
Atenção: O único conteúdo aceito dentro das tags <tr></tr > são colunas (<td></td >) , uma linha deve possuir de uma a “n” colunas.
<td></td> - A tag <td></td> é utilizada para definir o início e o fim de uma coluna. Em sua tag de inicialização podemos definir diversos atributos para a coluna conforme descrito exemplo abaixo:
<td colspan=”2” rowspan=”3” valign=”top” align=”right” nowrap="nowrap" bgcolor=”#000000” width=”50%” height="200"> … conteúdo … </td>
Atributos:
colspané a quantidade de colunas que esta coluna irá ocupar
rowspan é a quantidade de linhas que esta coluna irá ocupar
valign é o alinhamento vertical do conteúdo da tabela, os valores aceitáveis são: baseline, top, bottom, middle
align é o alinhamento horizontal do conteúdo da tabela, os valores aceitáveis são: left, right, center, justify
nowrap, sempre que uma coluna tiver o atributo nowrap=”nowrap” estaremos indicando que o conteúdo desta coluna não deverá sofrer quebra de linha para se adaptar ao espaço disponível para a tabela
bgcolor é a cor de fundo de sua coluna, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
width é a largura em pixels (colocar apenas o número desejado) ou em porcentagem (colocar o numero da porcentagem seguido de %”) de sua coluna, quando o width de uma coluna não é informado ela irá se ajustar tendo como referência os demais conteúdos da tabela.
height é a altura de sua coluna em pixels
colspané a quantidade de colunas que esta coluna irá ocupar
rowspan é a quantidade de linhas que esta coluna irá ocupar
valign é o alinhamento vertical do conteúdo da tabela, os valores aceitáveis são: baseline, top, bottom, middle
align é o alinhamento horizontal do conteúdo da tabela, os valores aceitáveis são: left, right, center, justify
nowrap, sempre que uma coluna tiver o atributo nowrap=”nowrap” estaremos indicando que o conteúdo desta coluna não deverá sofrer quebra de linha para se adaptar ao espaço disponível para a tabela
bgcolor é a cor de fundo de sua coluna, deve ser usado o valor da cor em hexadecimal precedido de “#” ou então para algumas cores utilizar-se de seu nome em inglês (“yellow”).
width é a largura em pixels (colocar apenas o número desejado) ou em porcentagem (colocar o numero da porcentagem seguido de %”) de sua coluna, quando o width de uma coluna não é informado ela irá se ajustar tendo como referência os demais conteúdos da tabela.
height é a altura de sua coluna em pixels
Atenção: Dentro de colunas podemos colocar qualquer tipo de conteúdo, inclusive outras tabelas.
Exercício: Desenvolva a página da figura abaixo.
Cores Utilizadas: #000066, #000000, #FFFFFF
Cores Utilizadas: #000066, #000000, #FFFFFF

Exercício: Desenvolva a página abaixo

0 comentários:
Postar um comentário