HTML básico para Blogueiros – Tabelas

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:

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></tr></table>

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