1
Home » HTML Básico, Tabelas, Tabelas Básicas, Todas

HTML básico para Blogueiros – Tabelas

Loading
17 April 2008 828 views 3 Comments

Nesta edição do HTML básico, vamos ver como criar tabelas simples.

Exemplo:

Código

<table bgcolor=#ff0000 bordercolor=#0000ff style=”width: 300px; text-align: left;” border=1px>
<tr>
<td>
Celula 1
</td>
<td>
Célula 2
</td>
</tr>
<tr>
<td>
Celula 3
</td>
<td>
Celula 4
</td>
</tr>
</table>

Resultado

Celula 1 Célula 2
Celula 3 Celula 4
Agora vamos entender



Primeiro usamos a Tag <table>, Nela fica a formatação da tabela, como cor das bordas, cor do fundo, tamanho, etc…

Formatações

As formatações, com exceção da borda e cor de fundo, ficam dentro de uma sub-tag, que é a style=”formações”.

Veremos aqui algumas formatações usadas nessa tabela acima:

width:300px – Indica que a largura da tabela é de 300 pixels.
text-align: left – Indica que o texto está alinhado a esquerda (Podendo você trocar por: Center – Centro, Left – Esquerda e Right – Direita)

Formatações fora da Style=”"

Essas formatações ficam fora da tag style=”", exemplo:

&lt;table border=”1px” bgcolor=”#0000ff” bordercolor=”#ff0000″>


Formatações

border=1px – Indica que a espessura da borda é de 1 pixel.
bordercolor=#ff0000 - Indica que a cor da borda é vermelha – Veja lista de códigos de cores em HEX.
bgcolor=#0000ff – indica que a cor de fundo é azul.

Numero de Linhas e colunas na tabela

O número de linhas e colunas da tabela é definido pelas tags <td> e <tr>:

<td> - Abre uma nova coluna;
<tr> – Abre uma nova linha.

Aplicando:

<table border=1px> (Abriu a tabela)
<tr> (Abriu a 1ª linha)
<td> (Abriu a 1ª coluna)
coluna 1 – linha 1
</td> (fechou a 1ª coluna)
<td> (Abriu a 2ª coluna)
coluna 2 – linha 1
</td>(Fechou a 2ª coluna)
</tr> (Fechou a 1 linha)
</table> (Fechou a tabela)

Resultado:

coluna 1 – linha 1 coluna 2 – linha 1

Agora iremos inserir um Segunda linha a essa tabela:

Aplicando:

<table border=1px> (Abriu a tabela)
<tr> (Abriu a 1ª linha)
<td> (Abriu a 1ª coluna da 1ª linha)
coluna 1 – linha 1
</td> (Fechou a 1ª coluna da 1ª linha)
<td> (Abriu a 2ª coluna da 1ª linha)
coluna 2 – linha 1
</td> (Fechou a 2ª coluna da 1ª linha)
</tr> (Fechou a 1ª Linha)
<tr> (Abriu a 2ª linha)
<td> (Abriu a 1ª coluna da 2ª linha)
coluna 1 – linha 2
</td> (Fechou a 1ª coluna da 2ª linha)
<td> (Abriu a 2ª coluna da 2ª linha)
coluna 2 – linha 2
</td> (Fechou a 2ª coluna da 2ª linha)
&lt/tr> (Fechou a 2ª linha)
</table> (Fechou a Tabela)

Resultado:

coluna 1 – linha 1 coluna 2 – linha 1
coluna 1 – linha 2 coluna 2 – linha 2
Atenção:

Após escrever todo o código de sua tabela no editor do blogger, junte todas as linhas do código em uma só, se não fizer isso a tabela irá ficar desconfigurada, Siga o exemplo abaixo:

Código escrito antes:

<table border=1px>
<tr>
<td>
coluna 1 – linha 1
</td>
<td>
coluna 2 – linha 1
</td>
</tr>
<tr>
<td>
coluna 1 – linha 2
</td>
<td>
coluna 2 – linha 2
</td>
&lt/tr>
</table>

Código arrumado corretamente do editor:

<table border=1px><tr><td>coluna 1 – linha 1</td><td>coluna 2 – linha 1</td> </tr><tr><td>coluna 1 – linha 2</td><td>coluna 2 – linha 2</td>&lt;/tr></table>

Na próxima edição iremos ver tabelas mas complexas.


3 Comments »

  • Mainframe said:

    Era isto mesmo que eu procurava.
    Obrigado pela dica amigo.

    PTC Sites
    http://xdinheiro.blogspot.com

  • JV said:

    Excelente, ajudou muito, obrigado.

  • Ana said:

    Era mesmo isto que queria encontrar.
    Parabéns pelo artigo e muito obrigada pela ajuda!

Deixe sua Opinião!!!

Deixe seu comentário ou trackback para seu site. You can also subscribe to these comments via RSS.

Não faça Span

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.