HTML5 Para Crianças - Tabelas
Introdução às Tabelas
As tabelas permitem-nos disponibilizar dados ao utilizador de uma forma tabelar, ou seja, em linhas por colunas. É uma forma tão prática de guardar e disponibilizar informação, que tanto o Excel como a maior parte das bases de dados usam tabelas para armazenar dados.
As tags mais populares que podemos usar na construcção de uma tabela estão na tabela abaixo.
| Tag | Descrição |
|---|---|
<table> |
Define uma tabela |
<tr> |
Define uma linha numa tabela (table row) |
<td> |
Define uma célula numa tabela (table data) |
<th> |
Define uma célula do cabeçalho da tabela (table header) |
<tbody> |
É usada para agrupar o conteúdo do corpo da tabela |
<thead> |
É usada para agrupar o conteúdo do cabeçalho da tabela |
<tfoot> |
É usada para agrupar o conteúdo do rodapé da tabela |
Tabelas Simples
Numa tabela simples, usamos a tag <table> para criar a tabela e, dentro dela, usamos a tag <tr> para criar as linhas e a tag <td> para criar as células dentro dessas linhas. Caso a tabela necessite de um cabeçalho, podemos também usar a tag <th> para criar as células do cabeçalho.
Se não alterarmos as propriedades da tabela, ela é mostrada pelo navegador sem bordas a separar as colunas e as linhas. Nas versões anteriores ao HTML5, era possível adicionar o atributo border="1" para as células ficarem com bordas de 1 píxel de espessura. Mas com o aparecimento desta versão, como referi no início deste tutorial, o HTML trata da estrutura e o CSS da apresentação. Por esse motivo, já não se usam atributos no HTML para mudar os estilos das tabelas. Eu vou usar um bocadinho de CSS para incluir as bordas, mas não o vou incluir no código para não confundir. Mais à frente neste tutorial vais aprender isso tudo.
<h4>Variação da população no concelho de Coimbra</h4>
<table>
<tr>
<th>Ano</th>
<th>População</th>
<th>Variação</th>
</tr>
<tr>
<td>1991</td>
<td>139052</td>
<td>+0.1%</td>
</tr>
<tr>
<td>2001</td>
<td>148443</td>
<td>+6.8%</td>
</tr>
<tr>
<td>2008</td>
<td>135314</td>
<td>-8.8%</td>
</tr>
<tr>
<td>2011</td>
<td>143052</td>
<td>+5.7%</td>
</tr>
</table>
Já reparaste como a primeira linha da tabela ficou com letras diferentes (mais gordas) do que resto dos conteúdos da tabela? Isso é porque nós definimos a primeira linha como sendo o cabeçalho da tabela porque fizémos as células com o <th> em vez do <td>.
Tabelas Avançadas
Também é possível criar tabelas agrupando diferentes conteúdos. Isto dá jeito não só por uma questão de semântica, mas para mais tarde podermos dar estilos diferentes com CSS. Aqui fica um exemplo com 3 agrupamentos: um cabeçalho, o corpo e um rodapé.
<table> <thead> <tr> <th>Cidade</th> <th>População</th> <th>Área</th> </tr> </thead> <tbody> <tr> <td>Coimbra</td> <td>143396</td> <td>319,40 km<sup>2</sup></td> </tr> <tr> <td>Figueira da Foz</td> <td>62125</td> <td>379,05 km<sup>2</sup></td> </tr> <tr> <td>Cantanhede</td> <td>36595</td> <td>390,88 km<sup>2</sup></td> </tr> </tbody> <tfoot> <tr> <td>TOTAL</td> <td>242116</td> <td>1089.33 km<sup>2</sup></td> </tr> </tfoot> </table>
União de Linhas
Agora que já sabes fazer tabelas, parece que está tudo dito relativamente a elas. Mas não. Há situações em que é necessário unir (merge) duas ou mais células numa só. Para o fazeres vais precisar de colocar um atributo novo rowspan se fores unir células numa linha ou colspan se as unires numa coluna. Depois, precisas de contar bem os <td> de cada linha para bater tudo certo.
Na tabela abaixo, vamos unir 3 células porque têm todas o mesmo conteúdo e não faz sentido repeti-lo 3 vezes. Para isso, vamos usar o atributo rowspan, com o valor "3".
<h4>Modalidades preferidas</h4>
<table>
<tr>
<td>Joana</td>
<td>Ginástica</td>
</tr>
<tr>
<td>Guilherme</td>
<td rowspan="3">Crossfit</td>
</tr>
<tr>
<td>Rosa</td>
</tr>
<tr>
<td>Alexandre</td>
</tr>
</table>
Olha bem para o código para veres o que fizémos. Como é complicado explicar isto, vamos ver por partes.
- A tabela tem 2 colunas
- A primeira coluna tem 4 linhas.
Cada linha desta coluna corresponde ao primeiro<td>de cada<tr>(as linhas assinaladas a castanho).<h4>Modalidades preferidas</h4> <table> <tr> <td>Joana</td> <td>Ginástica</td> </tr> <tr> <td>Guilherme</td> <td rowspan="3">Crossfit</td> </tr> <tr> <td>Rosa</td> </tr> <tr> <td>Alexandre</td> </tr> </table> - A segunda coluna tem 2 linhas, o que significa que só pode ter 2
<td>.
Como colocámos o atributorowspan="3"na segunda linha, as duas linhas seguintes não podem ter o respectivo<td>porque esses já foram unidos ao<td>da segunda linha.<h4>Modalidades preferidas</h4> <table> <tr> <td>Joana</td> <td>Ginástica</td> </tr> <tr> <td>Guilherme</td> <td rowspan="3">Crossfit</td> </tr> <tr> <td>Rosa</td> </tr> <tr> <td>Alexandre</td> </tr> </table>
União de Colunas
Para unir células em colunas o processo é exactamente o mesmo, mas vamos usar o atributo colspan.
Vou deixar aqui um exemplo com várias uniões de colunas, para olhares bem para o código e veres como fiz. Olha com bastante atenção para o número de <td> que tem cada um dos 3 <tr>.
<h4>Feriados Nacionais em 2020</h4>
<table>
<tr>
<th>Ano</th>
<td colspan="17">2020</td>
</tr>
<tr>
<th>Mês</th>
<td>Jan</td>
<td colspan="3">Abr</td>
<td>Mai</td>
<td colspan="2">Jun</td>
<td>Ago</td>
<td>Out</td>
<td>Nov</td>
<td colspan="3">Dez</td>
</tr>
<tr>
<th>Dia</th>
<td>1</td>
<td>10</td>
<td>12</td>
<td>25</td>
<td>1</td>
<td>10</td>
<td>11</td>
<td>15</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>8</td>
<td>25</td>
</tr>
</table>
Analisaste bem o último exemplo? Conseguiste percebê-lo? Espectáculo! Então estás pronto para criar qualquer tabela em HTML, por mais difícil que ela seja.
E só porque és assim tão esperto, no próximo capítulo vamos descansar um bocado de tanto HTML e vamos entrar um bocadinho no CSS. Vamos literalmente começar a dar cor ao nosso HTML.
Encontramo-nos no Capítulo 6 - Introdução ao CSS. Até já!