Aprenda a criar tabelas noHTML
A tabela é um dos elementos disponíveis no HTML para que os desenvolvedores possam dispor dados tabulares de um modo organizado, permitindo fácil compreensão e leitura dos dados. Nesse artigo iremos entender o que é uma tabela, para que serve esse elemento, quais as suas tags, como podemos desenvolver uma tabela dentro do HTML, entre outros aspectos.
Tabela
De uma maneira geral, o conceito de tabela é facilmente compreendido quando pensamos em um elemento para exibir e organizar um conjunto de dados semelhantes, pois percebe-se que a compreensão das informações pode ser visualmente simplificada quando a visualização é tabular.
No desenvolvimento de sites, esse conceito de tabelas não é diferente, elas são usadas para dispor a princípio dados textuais, mas nada impede de incluir conteúdo multimídia, como imagens e vídeo.
A tabela também é importante para conseguirmos dar uma aparência mais organizada e profissional ao site, além de proporcionar mais conteúdo informativo para os internautas.
Tags para construção de tabela
Assim como tudo que é construído dentro de um documento HTML, nas tabelas também precisaremos usar as tags. A tabela tem tags específicas que servem para demarcar o seu início e fim, delimitar e agrupar suas regiões, criar linhas e colunas, entre outras coisas. Então vamos conhecer quais são essas tags e suas funções dentro da elaboração de tabelas para o seu website.
<table>
Esta tag é de uso obrigatório e definirá o começo e o fim da sua tabela dentro do documento HTML. Dentro da tag <table> criaremos cabeçalho, corpo, rodapé, linhas e colunas de nossa tabela.
De forma geral, a tabela pode ser composta por um cabeçalho, um corpo e um rodapé. Essa três partes serão definidas e agrupadas pelas tags <thead>, <tbody> e <tfoot>.
<thead>
A tag <thead> apresenta a funcionalidade de agrupar elementos do conteúdo de um cabeçalho no HTML. Ela deve ser usada como filho de um elemento <table>, ou seja, estar após <table>, e antes de qualquer <tbody>, <tr> ou <tfoot>.
<tbody>
Esta tag é usada para aglutinar elementos presentes no conteúdo do corpo de uma tabela, ou seja, nas linhas da tabela. É utilizada como filho de um elemento <table> e após qualquer <subtítulo>, <coolgroup> ou <thead>.
<tfoot>
A tag <tfoot> é utilizada para definir conteúdos de rodapé dentro de uma tabela e juntá-lo ao corpo e ao cabeçalho. O elemento <tfoot> deve ser filho de <table>, estar após o <thead> e antes das tags <tbody>, <tr> e <td>.
<tr>
A tag <tr> tem como objetivo definir as linhas da tabela, que serão dispostas dentro do documento. Ela determina o fim e o começo de cada linha.
<th>
Em uma tabela, cada <tr> contém dois tipos de células. Um dos tipos de célula é a de cabeçalho.
A tag <th> serve exatamente para criar e delimitar células de cabeçalho dentro de uma tabela, separando essas informações dos dados.
<td>
O outro tipo de célula presente em uma tabela é a de dados. Essa célula é definida pela tag <td>, assim delimitando onde começa e termina cada célula de dado presente nas linhas da tabela.
<caption>
Serve para definir um título específico para uma tabela.
<colgroup> e <col>
Em tabelas mais robustas e bem trabalhadas, estas duas tags servem para atribuir elementos de estilo as colunas. A tag <colgroup> é útil para definir estilizações para todos os elementos da tabela. O <colgroup> deve ser filho da tag <table> e estar antes de qualquer outra tag da tabela. Já o <col> é mais específico e é usado para estilizar de forma diferente as colunas presentes dentro <colgroup>.
Colocando em prática os conceitos aprendidos
Após apresentado os conceitos essenciais de tabelas e as tags que podem compor este importante recurso dentro de um documento HTML, é hora de exemplificar e colocar em prática todos os conceitos vistos. Para isso, iremos desenvolver códigos com os mais diversos exemplos de tabelas e com diferentes estilizações.
No primeiro código teremos uma tabela que contêm dados populacionais respectivos as cidades de Recife e João Pessoa. Para isso, foi usada uma tabela apenas com <table>, <tr> e <td>, possuindo estilização usando o CSS no corpo do HTML definido pela tag <style>. Nesse CSS, definimos uma borda de 1 pixel, de cor cinza e sólida, com um espaçamento interno (padding) de 2 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid gray;
padding: 2px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Cidade</th>
<th>População</th>
</tr>
<tr>
<td>Recife</td>
<td>1.633.697</td>
</tr>
<tr>
<td>João Pessoa</td>
<td>811.598</td>
</tr>
</table>
</body>
</html>
No segundo exemplo temos a mesma tabela, com a mesma estilização em CSS, só que com a adição de alguns elementos. Estes elementos são as tags <thead>, <tbody> e <tfoot>. As duas primeiras tags delimitam o cabeçalho e o corpo do texto, já a <tfoot> adiciona elemento de rodapé e o agrupa ao corpo e cabeçalho da tabela. Veja abaixo o código e a tabela gerada.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid gray;
padding: 2px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Cidade</th>
<th>População</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>2.445.295</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Recife</td>
<td>1.633.697</td>
</tr>
<tr>
<td>João Pessoa</td>
<td>811.598</td>
</tr>
</tbody>
</table>
</body>
</html>
Por último, temos a adição dos elementos <colgroup>, <col> e <caption>. O <colgroup> definirá quais colunas da tabela receberão estilizações, já o <col> especificará estilizações diferentes a serem dadas para cada coluna. Na primeira tag <col> definimos uma cor de fundo azul para a primeira coluna, e na segunda atribuímos ao resto da tabela a cor vermelha. Por sua vez, o <caption> adiciona um título a tabela. Veja como ficou o código e o layout.
<!DOCTYPE html>
<head>
<style>
table, th, td {
border: 1px solid gray;
padding: 2px;
}
</style>
</head>
<body>
<table>
<caption>Quantidade populacional</caption>
<colgroup>
<col span="1" style="background-color:blue">
<col style="background-color:red">
</colgroup>
<thead>
<tr>
<th>Cidade</th>
<th>População</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>2.445.295</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Recife</td>
<td>1.633.697</td>
</tr>
<tr>
<td>João Pessoa</td>
<td>811.598</td>
</tr>
</tbody>
</table>
</body>
</html>
Considerações Finais
Como vimos, a construção de tabelas é simples e de fácil entendimento, o que é bastante importante para quem está começando agora no mundo da programação para web páginas. Além disso, as tabelas permitem uma variedade enorme de estilização própria de elementos presentes em um documento HTML, facilitam o posicionamento e formatação de informações para o internauta, e com elas o usuário pode se informar de forma ainda melhor.
Apesar das suas vantagens, é preciso ter bastante cuidado ao trabalhar com tabelas na elaboração de páginas pois o uso inadequado das tabelas podem trazer transtornos tanto para o programador quanto para o usuário. O uso excessivo de tabelas pode gerar um código gigante e que no futuro será de difícil manutenção para o programador. Já para o usuário, acarretará uma alta taxa de transferência de dados, ou seja, o site demorará mais a ser carregado. Além disso, a tabela pode criar dificuldades para tornar o site responsivo e a estilização da página também pode ficar comprometida.
Usada de maneira adequada, de forma inteligente e com equilíbrio, a tabela é um importante elemento para dispor informações em uma página Web. A junção de tabelas bem feitas contendo os dados certos e bem estilizadas, dará um melhor visual e navegabilidade eficaz ao seu projeto. Além disso, prestará ainda mais informações ao seu público-alvo.
