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?
- Tabela HTML
- A estrutura básica de uma tabela HTML
- Célula de título da tabela HTML
- Tags estruturais da tabela
- Criando células vazias
- Células que abrangem mais que uma linha/coluna
- Título da tabela
- Utilizando o colgroup e col
- A importância da tabela para o HTML
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.
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:
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>.
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:
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 conforme o exemplo abaixo:
<table>
<tr>
<th> </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:
| 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.
