Tabela HTML: como criar e utilizar tabelas em sua página

Neste tutorial, vamos explicar o que é uma tabela e de que forma podemos incluir uma tabela HTML em nossa página. Caso queira aprender mais sobre o que é HTML, veja esse post sobre o assunto. Os tópicos desse artigo são:

O que são tabelas?

As tabelas são listas de dados em duas dimensões e são compostas por linhas e colunas. Portanto, são muito utilizadas para apresentar dados de uma forma organizada. Um grande exemplo de como as tabelas são importantes é o crescente uso do programa Excel, requisito obrigatório de seleção para muitas empresas. Mas e para apresentar uma tabela no seu site, como funciona? Para isso, existe a possibilidade de criar tabelas através do próprio HTML, de forma rápida e simples, por meio de uma tabela HTML.

Como é formada uma tabela

Conforme a imagem acima, podemos ver a estrutura básica de uma tabela. Assim, é importante saber que cada elemento de uma tabela é denominada “célula”.

Por exemplo, vejamos abaixo um exemplo de tabela com nove células organizadas em três colunas e três linhas, sendo a primeira linha o título das colunas:

Nome Idade Profissão
Albert 27 Escritor
Jim 57 Ator

Tabela HTML

Uma vez que já sabemos o que é uma tabela, podemos então entender como criar uma tabela em HTML.

A tag utilizada para criar uma tabela HTML é a tag <table>, posteriormente fechada com </table>. Dentro dela, incluímos todos os elementos que compõem nossa tabela, ou seja, as células da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que poderão ser utilizadas. Nos próximos tópicos, veremos como utilizar cada uma delas.

Antigamente, as tabelas em HTML eram muito utilizadas acompanhadas de atributos. Com a adoção do CSS e do HTML5, esses atributos passaram a ser depreciados e, hoje em dia, são estilizados através da folha de estilos. Caso você tenha interesse em saber mais sobre os atributos, podem acessar a documentação oficial da W3C sobre tabelas. Contudo, nos exemplos desse tutorial, utilizaremos apenas o atributo border, para melhor exemplificar os códigos.

A estrutura básica de uma tabela HTML

As tags que vão formar a estrutura básica de uma tabela em HTML são as tags <tr> e <td>. A tag <tr> representa uma linha e a tag <td> representa uma célula. Desta forma, a criação de colunas em uma tabela HTML é feita automaticamente através da quantidade de células incluídas dentro de uma linha. Por exemplo, vejamos na imagem abaixo como essa estrutura é formada:

Estrutura básica da tabela HTML

Assim sendo, vamos criar nossa primeira tabela HTML com o exemplo a seguir:

<table border="1">
    <tr>
        <td>Nome</td>
        <td>Idade</td>
        <td>Profissão</td>
    </tr>
    <tr>
        <td>Ted</td>
        <td>22</td>
        <td>Estudante</td>
    </tr>
    <tr>
        <td>Ralf</td>
        <td>26</td>
        <td>Designer</td>
    </tr>
</table>

Dessa forma, o resultado do código acima será a seguinte tabela:

Nome Idade Profissão
Ted 22 Estudante
Ralf 26 Designer

Célula de título da tabela HTML

Caso queira incluir uma ou mais células que representem títulos, ganhando um destaque em relação às demais células, pode utilizar a tag <th>.

Incluindo título a tabela HTML

Então, a partir do exemplo anteriormente apresentado, vamos modificar a primeira linha para que todas as células dessa linha sejam do tipo título:

<table border="1">
    <tr>
        <th>Nome</th>
        <th>Idade</th>
        <th>Profissão</th>
    </tr>
    <tr>
        <td>Ted</td>
        <td>22</td>
        <td>Estudante</td>
    </tr>
    <tr>
        <td>Ralf</td>
        <td>26</td>
        <td>Designer</td>
    </tr>
</table>

Portanto, o resultado da tabela agora será:

Nome Idade Profissão
Ted 22 Estudante
Ralf 26 Designer

Podemos ainda aplicar o <th> para títulos verticais, ou seja, na primeira coluna. Dessa forma, vamos para o seguinte exemplo de tabela HTML:

<table border="1">
   <tr>
       <th>Nome:</th>
       <td>Ted</td>
   </tr>
   <tr>
       <th>Idade:</th>
       <td>22</td>
   </tr>
</table>

O resultado deste exemplo será:

Nome: Ted
Idade: 22

Tags estruturais da tabela

Anteriormente, vimos que a estrutura básica de uma tabela consiste nas tags <tr><td> e as células de título <th>. Porém, além dessas, também há tags que servem para estruturar melhor a tabela. São elas:

  • <thead></thead> – Esta tag representa o cabeçalho da tabela, geralmente composta por células título;
  • <tbody></tbody> – Essa tag representa o corpo da tabela;
  • <tfoot></tfoot> – Essa tag representa o rodapé da tabela.

Portanto, essas tags tem como principal efeito manter uma semântica adequada para suas tabelas.

Sendo assim, vejamos então a seguinte imagem para exemplificar a estrutura de uma tabela:

Tabela HTML com estrutura Semântica

Em seguida, vamos agora criar o seguinte código, utilizando como base a estrutura anterior:

<table border="1">
   <thead>
   <tr>
       <th>titulo 1</th>
       <th>titulo 2</th>
       <th>titulo 3</th>
   </tr>
   </thead>
   <tbody>
   <tr>
       <td>Body1 linha1</td>
       <td>Body2 linha1</td>
       <td>Body3 linha1</td>
   </tr>
   <tr>
       <td>Body1 linha2</td>
       <td>Body2 linha2</td>
       <td>Body3 linha2</td>
   </tr>
   </tbody>
   <tfoot>
       <td>Foot 1</td>
       <td>Foot 2</td>
       <td>Foot 3</td>
   </tfoot>
</table>

Com isso, chegamos ao seguinte resultado:

titulo 1 titulo 2 titulo 3
Body1 linha1 Body2 linha1 Body3 linha1
Body1 linha2 Body2 linha2 Body3 linha2
Foot 1 Foot 2 Foot 3

Porém, vale ressaltar que nem todos os navegadores compreendem direito essas tags, em especial a tag <tfoot>. Portanto, vale manter as tags <thead> e <tbody>, porém evite utilizar o <tfoot> a menos que tenha um objetivo específico. O próprio editor do CMS WordPress tem dificuldades em lidar com a tag <tfoot>, utilizando portanto apenas as duas primeiras.

Criando células vazias

Caso seja necessário incluir uma célula vazia (ou seja: sem nenhum valor dentro) na sua tabela, uma saída seria apenas incluir a <td> ou <th> sem nenhum conteúdo. No entanto, isso não é recomendado, porque alguns navegadores não conseguem ler adequadamente uma célula vazia. Portanto, a solução mais adequada para isso é utilizar a técnica de espaço, incluindo a entidade &nbsp; conforme o exemplo abaixo:

<table>
    <tr>
        <th>&nbsp;</th>
        <th>Valor</th>
    </tr>
    <tr>
        <td>Item 1</td>
        <td>R$10,00</td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td>R$20,00</td>
    </tr>
</table>

Por consequência, o resultado será a tabela a seguir:

Valor
Item 1 R$10,00
Item 2 R$20,00

Células que abrangem mais que uma linha/coluna

Em algumas situações, temos a necessidade de utilizar uma mesclagem de célula, ou seja, criar uma célula que abrange mais do que uma linha ou coluna. Dessa forma, podemos utilizar os atributos colspan e rowspan. O colspan=”x” vai fazer uma mesclagem de colunas, e o rowspan=”x” vai mesclar linhas, bastando substituir o x pelo número de colunas ou linhas que deseja ocupar. Além disso, podemos também mesclar os dois em uma mesma célula. Com isso, vamos ver os exemplos a seguir:

Primeiro, utilizando o colspan:

<table border="1">
    <tr>
        <th>Nome</th>
        <th colspan="2">Telefones</th>
    </tr>
    <tr>
        <td>Ted</td>
        <td>8888-8888</td>
        <td>9999-9999</td>
    </tr>
    <tr>
        <td>Junior</td>
        <td>1111-1111</td>
        <td>2222-2222</td>
    </tr>
</table>

Sendo assim, com o exemplo acima, obtemos a seguinte tabela HTML:

Nome Telefones
Ted 8888-8888 9999-9999
Junior 1111-1111 2222-2222

 

Depois, utilizando o rowspan:

<table border="1">
<tr>
  <th>Primeiro Nome:</th>
  <td>Ted</td>
</tr>
<tr>
  <th rowspan="2">Telefone:</th>
  <td>8888-8888</td>
</tr>
<tr>
  <td>9999-9999</td>
</tr>
</table>

Com o exemplo acima, obtemos a seguinte tabela HTML:

Primeiro Nome: Ted
Telefone: 8888-8888
9999-9999

Título da tabela

A tabela HTML tem uma tag particular para definir um título. Essa tag é a <caption></caption>. Em contraste com os demais elementos da tabela, a tag <caption> não será composta por células, portanto ficará acima da tabela, como um título.

Desta forma, veja então o exemplo a seguir:

<table border="1">
    <caption>Exemplo de Título</caption>
    <tr>
        <th>Nome</th>
        <th>Sobrenome</th>
    </tr>
    <tr>
        <td>Ted</td>
        <td>Junior</td>
    </tr>
    <tr>
        <td>Ted</td>
        <td>Neto</td>
    </tr>
</table>

Com isso, o resultado será a seguinte tabela com título:

Exemplo de Título
Nome Sobrenome
Ted Junior
Ted Neto

Utilizando o colgroup e col

Anteriormente, explicamos que hoje em dia, boa parte dos atributos de uma tabela se encontra depreciado. Portanto, a estilização deve ser feita através do CSS. Dessa forma, existe um elemento muito importante que nos permite criar um grupo de colunas, podendo assim estilizar diversas colunas de uma só vez. Esse elemento é a tag <colgroup></colgroup>. Posteriormente, dentro do grupo de colunas, incluímos então as tags <col/> para poder definir cada coluna.

Vejamos então o seguinte exemplo, aplicando o CSS às classes que utilizaremos nas <col>:

<style>
    .vermelho{
        background-color: red;
    }
    .amarelo{
        background-color: yellow;
    }
    .azul{
        background-color: blue;
    }
</style>

<table border="1">
  <colgroup>
    <col class="vermelho">
    <col class="amarelo">
    <col class="azul">
  </colgroup>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Profissao</th>
  </tr>
  <tr>
    <td>Ted</td>
    <td>22</td>
    <td>Estudante</td>
  </tr>
  <tr>
    <td>Junior</td>
    <td>26</td>
    <td>Escritor</td>
  </tr>
</table>

Com isso, o resultado deste código será:

Nome Idade Profissao
Ted 22 Estudante
Junior 26 Escritor

Além dessa forma de trabalhar, podemos ainda aplicar um grupo que abranja mais que uma coluna, utilizando o atributo span=”x”. Assim, basta substituir o x pelo número de colunas que desejamos atribuir esse grupo.

Em seguida, vejamos então o exemplo:

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Profissao</th>
  </tr>
  <tr>
    <td>Ted</td>
    <td>22</td>
    <td>Estudante</td>
  </tr>
  <tr>
    <td>Junior</td>
    <td>26</td>
    <td>Escritor</td>
  </tr>
</table>

Com isso, o resultado deste código será a seguinte tabela:

Nome Idade Profissao
Ted 22 Estudante
Junior 26 Escritor

Para finalizar esse tópico, recomendamos que você treine com diversas cores. Você pode utilizar a tabela de cores HTML, disponível no nosso blog, para experimentar estilizar com diversas cores.

A importância da tabela para o HTML

Finalmente concluímos nosso tutorial e já sabemos exatamente como incluir uma tabela completa no código HTML. Porém, além da utilização desses elementos como tabela, vale a pena pesquisar a respeito de códigos mais antigos e ver o quanto a tag <table> era utilizada para a estrutura da própria página em si.

Anteriormente ao HTML5 e à adoção das folhas de estilos, os layouts das páginas eram formadas através de tabelas. Com o tempo, esse layout deixou de ser adotado, hoje já utilizamos recursos mais avançados como o layout flexbox e grid. Como resultado, surgiu um novo padrão de layout, conhecido por tableless, o qual não baseia-se por tabelas. Desta forma, a tag <table> é utilizada apenas para a criação de tabelas HTML, e não mais para estruturação de uma página. Contudo, ainda é possível encontrar diversas páginas que utilizam layout em tabela, portanto ter conhecimento e domínio de como manipular uma tabela HTML é importantíssimo, mesmo que não pretenda utilizar tabelas em sua página.

Com isso, você tem em mãos um tutorial completo para dominar as técnicas envolvendo tabelas HTML. Recomendamos então que pratique os códigos ensinados anteriormente e busquem modificá-los à sua preferência. Seguindo o passo a passo desse tutorial, você estará pronto para desenvolver suas próprias tabelas e até mesmo inserí-las em suas páginas.

Este artigo foi útil?

Obrigado pela resposta!
Rafael Marques

Rafael Marques

Especialista em Desenvolvimento Web e Marketing. É apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, além de atuar como Desenvolvedor Fullstack e redator técnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estimação.

Contato: rafael.blog@homehost.com.br

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!