[TUTORIAL] Tabelas HTML

[Juliana~* 26]

Bom galera, vi que naum tinha um tutorial de tabelas aqui na area , entaum resolvi faser um, entaum vamos lá!

 

Podemos através da tabela organizar textos e imagens de maneira harmoniosa.As tabelas implementam um conceito importante de layout. Podem conter qualquer tipo de formatação como: textos, imagens, listas e etc...

A tabela é representada pelas TAGs <table> e </table> e possui os seguintes atributos:

 

border="valor" : Define a largura da borda (contorno).

cellspacing=”valor” : Define o espaço horizontal entre as células.

cellpadding=”valor” : Define o espaço vertical entre as células.

width="valor" : Define a largura da tabela em pixels ou em porcentagem.

height="valor" : Define a altura da tabela em pixels ou em porcentagem.

bgcolor="#cor" : Define a cor de fundo da tabela.

bordercolor=”#cor” : Define a cor da borda.

background=”nomedaimagem.jpg” : Define uma imagem de fundo.

 

A tabela possui alguns comandos que são:

 

<caption> e </caption> : Define o título da tabela.
<tr> e </tr> : Define uma linha da tabela.
<th> e </th> : Define um cabeçalho da tabela.
<td> e </td> : Define a coluna de dados.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Exemplo 2:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Exemplo 3:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Veja como ficaram estas tabelas:

 

 

Seguindo estes mesmos exemplos, vamos eliminar as bordas colocando o valor “0” em cada um desses mesmos exemplos.

 

Veja como estas mesmas tabelas ficaram:

 

 

Podemos alinhar o texto dentro das células utilizando os seguintes atributos.

 

Align=”left” : Alinha o texto à esquerda.

Align=”right” : Alinha o texto à direita.

Align=”center” : Alinha o texto ao centro.

Valign=”top” : Alinha o texto no topo da célula.

Valign=”middle” : Alinha o texto no meio da célula.

Valign=”bottom” : Alinha o texto na parte inferior da célula.

 

 

OBS: Se for definido o alinhamento na TAG <tr> não haverá necessidade de alinha-lo nas TAGs <th> e <td>.

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Para englobarmos colunas e linhas (mesclar) utilizamos os seguintes atributos:

 

Colspan: Mesclam as colunas.

Rowspan: Mesclam as linhas.

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Como foi dito anteriormente podemos utilizar qualquer formatação dentro da célula, utilizando as TAGs e os atributos correspondentes. Vamos adicionar uma imagem na tabela.

 

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vamos agora adicionar uma lista dentro da célula

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Veja como ficaram estes exemplos acima:

 

 

 

Creditos: Juliana~*

Apostila HTML Avançada!

 

 

 

[MRs.Romanha 9]

a tabela é fundamental na construção do layout da pagina e este tutorial ficou muito bom juliana. Parabens!

um concelho aos iniciantes.. a tabela fica meio complicada ao escrever ela em HTML então o concelho é que usem um editor html tipo Dreamweaver pois vc pode por a tabela na pagina e o codigo é posto automaticamente..

trabalhar com tabelas apenas usando bloco de notas torna o trabalho mais demorado e dificil

[Juliana~* 26]

@MRs.Romanha são muitos mais facils com editores siiin, mais muitas pessoas (como eu) naum criamos site com editores, pois naum gosta, eu naum gosto de editores,

eu so cria em bloco de notas =], mais vlw aos elogios, muitos membros gostaram do tutorial acho, obrigada!

[Celso Portiolli 0]

Seu nome é Juliana ou Marcia?

Enfim, tudo isso é inútil graças ao CSS.

[MRs.Romanha 9]

Seu nome é Juliana ou Marcia?

Enfim, tudo isso é inútil graças ao CSS.

 

discordo totalmente

 

o CSS é responsável pelo estilo da pagina.. cor, tamanho, tipo de letra, etc..

eu nunca vi o CSS organizando o Layout da pagina, depois o CSS só trabalha se fizer referencia a um objeto.. ele nao trabalha sosinho.. se quizer editar um texto por CSS tem que por o texto ou em uma DIV ou em uma tabela, ou pode editar o patrão da tag <p> ..

resumindo..

CSS nao substitui a tabela NUNCA

[Celso Portiolli 0]

Romanha, primeiro pense: para que serve uma table?

Depois pense se há a possibilidade de fazer o que fez com uma table, sem essa table, usando divs por exemplo, e óbvio, CSS.

 

E ai? CSS mata table e ponto.Se você discordar, por favor, me ilumine.

[Juliana~* 26]

@Celso Portiolli eu tive a maior vontade de posta, se você naum gosto posso fase nada, apenas agradeça, se vc se acha melhor, so postar, ai teremos prova, so porque CSS e um otimo conteudo naum quer dizer que HTML é inultiu.

[Celso Portiolli 0]

Aiaiai to falando com as paredes aqui!

Ok, quer saber? Continue postando! Tá ÓTIMO!

Não vou mais fazer críticas.