Módulo 5: Tabelas e Dados

2. Resumo da Aula Anterior

No último módulo, aprendeste a dar vida visual ao teu site com Imagens e Multimédia. Agora que o teu site já é bonito, ele precisa de ser capaz de mostrar dados complexos de forma organizada. Vamos dominar o poder das tabelas!

3. O Que Vais Aprender Hoje

Esquece o uso de tabelas para "fazer o desenho" do site (isso era no século passado!). Hoje vais aprender a usá-las para o que elas realmente servem:

✅ A anatomia completa de uma tabela (thead, tbody, tfoot).
✅ Cabeçalhos semânticos (th) e o atributo scope.
✅ Como dominar células complexas com colspan e rowspan.
✅ Legendas de tabela com caption.

4. Teoria: A Arquitetura dos Dados

Porquê Tabelas?

Uma tabela HTML serve apenas para **Dados Tabulares**. Se tens um preço unitário, uma quantidade e um total, isso é uma tabela. Se queres colocar um menu ao lado de um texto, isso NÃO é uma tabela (faremos isso com CSS mais tarde!).

A Estrutura "Correta" (Não fiques pelo básico!)

Para o Google e para leitores de ecrã entenderem a tua tabela, deves dividi-la em 3 secções principais:

<thead>: O topo da tabela, ode moram os títulos das colunas.
<tbody>: O "recheio" da tabela, com os dados reais.
<tfoot>: O rodapé, onde podes colocar totais ou notas finais.

🍱 Analogia: A Caixa de Bento

Imagina uma caixa de almoço organizada:

<table>: A caixa em si.
<tr>: As divisórias horizontais.
<th>: A etiqueta que diz "Salada" ou "Arroz".
<td>: A comida propriamente dita.
Colspan: Quando tiras uma divisória para a salada ocupar metade da caixa (horizontal).
Rowspan: Quando fazes um compartimento fundo para uma garrafa (vertical).

Dica Elite: th scope

Usa <th scope="col"> para títulos de colunas e <th scope="row"> para títulos de linhas. Isto ajuda imenso um utilizador invisual a não se perder na tabela!

5. Exemplos de Código

Exemplo 1: A Tabela Profissional
                    <table>
  <caption>Horário das Aulas de Surf</caption>
  <thead>
    <tr>
      <th scope="col">Dia</th>
      <th scope="col">Hora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Segunda</td>
      <td>09:00</td>
    </tr>
  </tbody>
</table>
                

Exemplo 2: O Poder do Colspan
                    <tr>
  <td>Total da Fatura</td>
  <td colspan="2">500.00€</td>
  <!-- Ocupa o lugar de 2 colunas -->
</tr>
                

6. Agora é a Tua Vez! (Ficha de Personagem)

Vamos criar uma tabela de "Atributos de Herói" de um jogo. Segue estes passos:

Início: Cria a tag <table> e adiciona uma <caption> com: "Estatísticas do Guerreiro".
Cabeçalho: Dentro de <thead>, cria uma linha com "Atributo", "Nível" e "Bónus".
Dados: No <tbody>, adiciona 3 linhas. Ex: Força | 15 | +2.
Mesclagem (Rowspan): Imagina que a Força e a Agilidade têm o mesmo bónus. Tenta usar rowspan="2" na célula do bónus para ela ocupar duas linhas de altura.
Rodapé: No <tfoot>, cria uma linha que diz "Status Total: Lendário" usando colspan="3".

7. Verificação de Conhecimento

Será que consegues organizar os dados sem te perderes nas tags? Testa-te agora!

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Tabelas são construídas POR LINHAS (tr).
📌 thead, tbody e tfoot dão hierarquia aos dados.
📌 th deve ser usado para qualquer cabeçalho, mesmo no meio da tabela.
📌 colspan (horizontal) e rowspan (vertical) criam layout complexos.
📌 caption é o título acessível da tabela.

9. Desafios Práticos

Desafio 1: Tabela de Preços

Cria uma tabela simples com "Produto" e "Preço". No rodapé, coloca o "Total".

<table>
  <tbody>
    <tr><td>Maçã</td><td>1€</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>1€</td></tr>
  </tfoot>
</table>

Desafio 2: O Calendário

Como farias uma tabela que mostra os dias da semana e 3 horários? Quais tags usarias para os dias?

Solução: Usaria <thead> para os dias da semana e cada dia seria um <th scope="col">. As horas seriam no <tbody>.

Desafio 3: Tabelas Responsivas

Tabelas grandes costumam "partir" no telemóvel. Conheces algum truque rápido para as tornar roláveis?

Solução: O truque mais comum é envolver a <table> numa <div style="overflow-x: auto;">. Isto cria uma barra de rolagem horizontal só para a tabela!

Aprende Web: HTML5

Módulo 5: Tabelas e Organização de Dados