Olá! Sábado, 19 de Abril de 2014.



Dicas CódigoFonte.net
Sexta Feira, 25 de Fevereiro de 2005

Criando tabelas em HTML

Olá pessoal, tudo bem?

Hoje vou falar um pouco sobre TABELAS.

No desenvolvimento de websites, por mais simples que seja, é necessário uma maneira de organizar seus conteúdos e ajustar seu website. Para isto, usamos as famosas TABELAS. Vou explicar passo a passo como criar a sua sem a necessidade de qualquer programa que desenvolva páginas.

Para isto, vamos precisar do Bloco de notas, isto mesmo! O bloco de notas do Windows. Ou qualquer programa editor de textos simples que você tenha instalado em seu computador.

Primeiramente, vamos para o código principal da tabela, que é o
  1. <table> </table>
. Este é importante para determinar ao navegador que o código entre eles é uma tabela.

Em tabelas, existem linhas e colunas, como no Excel. O código para linhas é o
  1. <tr> </tr>
e o para colunas é o
  1. <td> </td>
.

Ainda existem outros códigos que auxiliam na personalização da tabela. Um exemplo é a cor de fundo, onde usamos a tag
  1. bgcolor='COR'
tanto para a TAG
  1. <table></table
como para as tags de linha e coluna.

Parece complicado não acha? Mas não é! Vamos ao exemplo prático.

<table border=1 bgcolor='yellow'><tr><td>1ª coluna - 1ª linha</td><td bgcolor='#aaddbb'>2ª coluna - 1ª linha</td></tr><tr><td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td></tr></table>

o Código para esta tabela:

  1. <table border=1 bgcolor='yellow'>
  2. <td>1ª coluna - 1ª linha</td> <td bgcolor='#aaddbb'>2ª coluna - 1ª linha</td>
  3. </tr>
  4. <td>1ª coluna - 2ª linha</td> <td>2ª coluna - 2ª linha</td>
  5. </tr>
  6. </table>


Note que estamos utilizando o atributo
  1. bgcolor='yellhow'
tanto na TAG
  1. <table> </table>
como na TAG
  1. <td> </td>
. Neste atributo, tanto podemos usar o NOME da cor em INGLÊS como o código dela em HEXADECIMAL. (<a href='http://www.codigofonte.net/?secao=geradores&acc=cores' target=_blank> Clique aqui para um assistente de hexadecimal</a>).

Ainda existem outros atributos para as tabelas, alguns dos mais usados são:

cellspacing - especifica o tamanho dos espaços entre as células na tabela.
cellpadding - especifica o tamanho dos espaços entre a borda da célula e seu conteúdo.
border - especifica o tamanho da borda da tabela. (apenas para a TAG
  1. <table></table>
)
width - largura da tabela ou coluna
height - algura da tabela ou coluna
rowspan - especifica quantas linhas a célula será mesclada
colspan - especifica quantas colunas a célula será mesclada


Um exemplo de Rowspan e Colspan

Rowspan

<table border=1 bgcolor='yellow'><tr><td rowspan=2>1ª coluna - 1ª linha + 2ª linha</td><td> 2ª coluna - 1ª linha</td></tr><tr><td>2ª coluna - 2ª linha</td></tr></table>

Código:

  1. <table border=1 bgcolor='yellow'>
  2. <td rowspan=2>1ª coluna  - 1ª linha + 2ª linha</td>
  3. </tr>
  4. <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td>
  5. </tr>
  6. </table>


Colspan

<table border=1 bgcolor='yellow'><tr><td colspan=2>1ª + 2ª coluna - 1ª linha</td></tr><tr><td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td></tr></table>

Código:

  1. <table border=1 bgcolor='yellow'>
  2. <td colspan=2>1ª + 2ª coluna  - 1ª linha</td>
  3. </tr>
  4. <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td>
  5. </tr>
  6. </table>


Bom. É isto ae pessoal. Dúvidas, postem abaixo.

Até a próxima.

[]s
Emmanuel

Comentários do artigo [Novo comentário]

Alessandra - 21 de Junho de 2008 - 17:28
Gostei...
Aprovado!!! =)
Juliana Sampaiao - 21 de Março de 2009 - 09:15
Muito bom :)
reinaldo silva farias - 10 de Maio de 2009 - 08:10
eh
alessandro leiva - 17 de Setembro de 2009 - 21:12
gostei
sandra saltarelli - 05 de Janeiro de 2010 - 15:33
QUERO DIMINUIR A LARGURA DO MEU MURAL DE RECADOS ...COMO FAÇO?
Thierry r oliveira - 16 de Julho de 2010 - 10:45
nuss n manjo anda e n consigui fazer pr mais q esteja super bem explicado para alguns...sera q tem alguma pre definida? preciso de uma tabela tpw oitavas de finais....vlw
rosana zanp - 09 de Março de 2011 - 15:05
vc esta de parabens tudo muito explicado obrigado bjs
Celeste Silva - 09 de Março de 2011 - 22:14
Olá.
Ainda sou novata nestas andanças.
Mas como estou para acabar a licenciatura de Matemática , tive linguagem Pascal e linguage C. Nada tem a haver com HTML , dá-nos uma certa predisposição para tentarmos pelo menos alterar certas coisas que não gostamos num código já escrito. Juntando isto ao bichinho que tenho dos blogs e o gosto pelo diferente, leva-me a ser autodidacta em HTML e assim encontrei-vos nas minhas pesquisas.
Parabéns e obrigado pela partilha de conhecimentos.
Celeste Silva
Luiz Rodrigo - 26 de Janeiro de 2014 - 02:50
como eu faço pra que a div post role por debaixo da div top????
victoria avancini cundari - 22 de Março de 2014 - 21:31
muito bom, me ajudou!!!!1!!
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » CodigoFonte.eti.br » Compre De Tudo » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010