HTML básico para Blogueiros – Tabelas

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

Exemplo:

<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>

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

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)

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.

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: