Tutorial - Como criar tabelas em HTML

<table> : Como criar uma tabela em HTML

A única tag de uso obrigatório em tabelas é: <table> </table>

Dentro das tags de abertura e fechamento table é que iremos definir nossas tabelas, sendo até possível aninhar tabelas, através do aninhamento de tags.

É dentro desta tag que iremos usar as tags tr e td para criar as linhas e colunas de nossas tabelas (assunto visto em breve, ainda neste tutorial de nosso curso).

Essa tag, junto seus mais diversos atributos, será responsável por diversas características de uma tabela em HTML para seu site, como:

• definir se a tabela vai ter borda ou não
• caso a tabela tenha borda, qual a espessura desta
• cor de fundo
• espaçamento entre células
• que partes da tabela serão visíveis
• etc

Espessura da borda de uma tabela - O atributo border

Inicialmente, para vermos bem claramente as linhas e colunas, vamos exibir as linhas de uma tabela.

Para isso, precisamos definir a espessura das bordas, o que é feito através do atributoborder, que recebe um valor.

Assim, para uma borda fina:

<table border="1">
   código da tabela
</table>

Teremos algo como:

borda de espessura 1

borda de espessura 2

borda de espessura 3

<tr> - Como criar linhas de uma tabela em HTML

Agora que já mostramos a tag table e explicamos sua importância, vamos começar a definir os elementos de uma tabela.

O primeiro elemento que criamos em uma tabela são suas linhas.

Por linha, entenda aquela parte horizontal (deitada).
Já as colunas, são os elementos verticais (em pé).

Se já tiver estudado matrizes ou usado o Microsoft Excel, certamente entenderá de cara essa classificação. E assim como no Excel, em tabelas de HTML chamamos cada elemento ou bloquinho desses, de célula.

A figura a seguir possui 4 linhas e 4 colunas, totalizando 16 células:

Na tag tr, o "t" é de table e o "r" de row, que também significa linha, ou fileira.
E cada vez que colocamos o par de tags <tr> </tr> estamos criando uma linha em nossa tabela.

Assim, o código de uma tabela com uma linha só é:

<table border="1">
      <tr><td>Linha 1</td></tr>
</table>

E seu efeito:

Linha 1

Já o código de uma tabela com duas linhas é:

<table border="1">
      <tr><td>Linha 1</td></tr>
      <tr><td>Linha 2</td></tr>
</table>

E caso rodemos o código, veremos nosso site assim:

Linha 1

Linha 2

Analogamente, para uma tabela de três linhas, usamos três vezes a tag tr:

<table border="1">
      <tr><td>Linha 1</td></tr>
      <tr><td>Linha 2</td></tr>
      <tr><td>Linha 3</td></tr>
</table>

E veremos::

Linha 1

Linha 2

Linha 3

Note que também usamos a tag td, que será explicada a seguir.
Ela é necessária, pois trabalha em conjunto com a tr.

Cada bloquinho desse, de uma tabela, é chamado de célula.
Essas são células do corpo de uma tabela, são células, digamos, normais.

Note também que decidimos colocar um par de tags tr em cada linha do código, assim fica mais organizado e fácil de associar: cada tag representa uma linha, e pelo código HTML podemos ver qual a linha 1, a 2, a 3 etc.

<td> - Como criar linhas de uma tabela em HTML

Como já devem suspeitar, a tag td será a responsável por criar colunas em nossas tabelas.
Colunas são os elementos verticais.
No exemplo passado de código, todas nossas tabelas possuíam apenas uma coluna.

No HTML, a linha tem uma certa hierarquia em relação as colunas, pois as linhas são compostas de colunas.
Ou seja, criarmos colunas dentro de cada linhas.

Assim como as linhas, cada coluna é definida pelo par: <td> </td>
Portanto, se quisermos criar 2 colunas, colocamos duas tags dentro de cada linha, e nosso código HTML com uma linha e duas colunas é:

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
</table>

E o resultado seria:

Linha 1, Coluna 1

Linha 1, Coluna 2

Veja agora como seria o código HTML para 3 colunas:

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td>  <td> Linha 1, Coluna 3 </td> </tr>

</table>

Nossa tabela ficaria assim:

Linha 1, Coluna 1

Linha 1, Coluna 2

Linha 1, Coluna 3

Agora vamos criar uma tabela 2x2, ou seja, duas linhas e duas colunas:

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> </tr>
</table>

O resultado é:

Linha 1, Coluna 1	Linha 1, Coluna 2
Linha 2, Coluna 1	Linha 2, Coluna 2

Agora uma 3x3:

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>

   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> <td> Linha 2, Coluna 3 </td> </tr>

   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>

</table>

E como é de se esperar, nossa tabela fica assim:

Linha 1, Coluna 1	Linha 1, Coluna 2	Linha 1, Coluna 3
Linha 2, Coluna 1	Linha 2, Coluna 2	Linha 2, Coluna 3
Linha 3, Coluna 1	Linha 3, Coluna 2	Linha 3, Coluna 3

Ou seja, bem simples e sem segredo.

Células em branco em uma tabela

Nem sempre queremos preencher todas as células de uma tabela.
As vezes não precisa de dados, a informação está faltando ou esperando o usuário completar.

Para criar uma célula em branco, basta não colocar nada de texto.
Mas mesmo deixando ela em branco, é importante deixar as tags tr e td para aquela célula, como se tivesse algo dentro.

Vejamos o último exemplo de uma tabela 3x3.
Vamos retirar o elemento da linha 2 coluna 2. Nosso código fica:

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>

   <tr><td>Linha 2, Coluna 1</td> <td></td> <td> Linha 2, Coluna 3 </td> </tr>

   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>

</table>

A parte em branco é: <td></td>
Veja como ficou nossa tabela:

Linha 1, Coluna 1	Linha 1, Coluna 2	Linha 1, Coluna 3
Linha 2, Coluna 1		Linha 2, Coluna 3
Linha 3, Coluna 1	Linha 3, Coluna 2	Linha 3, Coluna 3

Vamos tirar todos os elementos da célula da coluna central (coluna 2):

<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td></td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td></td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td></td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

Nossa tabela agora fica assim:

Linha 1, Coluna 1		Linha 1, Coluna 3
Linha 2, Coluna 1		Linha 2, Coluna 3
Linha 3, Coluna 1		Linha 3, Coluna 3

É como se a coluna do meio tivesse sumido.
Porém, dá para ver tem uma coluna ainda, mas bem fina, quase que não dá pra ver.
Em breve vamos aprender como exibir uma coluna ou linha, mesmo quando não há nada nas células.

Tabelas sem borda e alinhamento

Como vimos nos exemplos, as células ficam bem alinhadas e delimitadas pelas linhas e colunas.
É bem fácil também de se separar informações em uma tabela, por conta dos traços, da borda da tabela.

Porém, esse traço existe porque definimos uma borda com espessura 1, através do atributo border.
Mas esse atributo da tag table não é obrigatório, e se omitirmos ele, a tabela continuará existindo, com suas divisões e alinhamentos.

Vejamos como ficar o código de uma tabela sem borda (ou com borda de espessura nula):

<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>

   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> <td> Linha 2, Coluna 3 </td> </tr>

   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>

</table>

E o efeito disso é:

Linha 1, Coluna 1	Linha 1, Coluna 2	Linha 1, Coluna 3
Linha 2, Coluna 1	Linha 2, Coluna 2	Linha 2, Coluna 3
Linha 3, Coluna 1	Linha 3, Coluna 2	Linha 3, Coluna 3

Podemos, inclusive, deixar uma célula em branco.
A células da linha 2 e coluna 3:

<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>

   <tr><td>Linha 2, Coluna 1</td> <td>  </td> <td> Linha 2, Coluna 3 </td> </tr>

   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>

</table>

Veja como ficou nossa tabela:

Linha 1, Coluna 1	Linha 1, Coluna 2	Linha 1, Coluna 3
Linha 2, Coluna 1		Linha 2, Coluna 3
Linha 3, Coluna 1	Linha 3, Coluna 2	Linha 3, Coluna 3

A partir desses exemplos, começamos a notar o poder das tabelas na criação de sites em HTML, pois ela faz o alinhamento de maneira perfeita e totalmente automática.