Pular para conteúdo

Aula 06 - Tabelas 📊

Objetivo

Objetivo: Aprender a organizar dados tabulares de forma estruturada e semântica utilizando as tags de tabela do HTML5.

1. Quando usar Tabelas? 🤔

Tabelas devem ser usadas exclusivamente para dados tabulares (planilhas, horários, listas de preços, classificações).

  • Antigamente: Usava-se tabelas para criar o layout do site. Isso é proibido hoje!
  • Hoje: O layout é feito com CSS (Flexbox/Grid), e tabelas são apenas para dados.

2. Estrutura Básica 🧱

Uma tabela é composta por linhas e células:

  • <table>: O recipiente principal.
  • <tr> (Table Row): Define uma linha.
  • <td> (Table Data): Define uma célula de dados comum.
  • <th> (Table Header): Define uma célula de cabeçalho (geralmente em negrito e centralizada).

Exemplo simples:

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Ricardo</td>
    <td>30</td>
  </tr>
</table>

3. Semântica de Tabelas 🧠

Para tabelas mais complexas e acessíveis, dividimos em seções:

  1. <thead>: Cabeçalho da tabela (títulos das colunas).
  2. <tbody>: O corpo com os dados principais.
  3. <tfoot>: O rodapé da tabela (totalizadores, observações).

📊 Fluxo Estrutural

graph TD
    T[table] --> TH[thead]
    T --> TB[tbody]
    T --> TF[tfoot]
    TH --> TR1[tr]
    TB --> TR2[tr]
    TF --> TR3[tr]
    TR1 --> TH_CELL[th]
    TR2 --> TD_CELL[td]

4. Bordas e Estilo 🎨

Por padrão, as tabelas HTML não têm bordas visíveis. Embora o estilo deva ser feito no CSS, podemos usar o atributo border="1" para visualizar a estrutura durante o aprendizado:

<table border="1">
    <caption>Lista de Preços</caption>
    <!-- conteúdo -->
</table>

[!NOTE] A tag <caption> serve para dar um título ou legenda à tabela e deve ser a primeira tag dentro de <table>.

5. Prática: Tabela de Notas 🚀

Vamos criar uma planilha de notas no terminal:

$ mkdir aula-06
$ cd aula-06
$ touch index.html
$ # No seu HTML, crie uma tabela com:
$ # thead: Matéria e Nota
$ # tbody: HTML (10), CSS (9)

6. Mini-Projeto: Tabela de Campeonato 🏆

  1. Crie uma página de Classificação de Futebol (ou outro esporte).
  2. Use a estrutura semântica (<thead>, <tbody>).
  3. As colunas devem ser: Posição, Time, Pontos e Vitórias.
  4. Adicione pelo menos 4 times.
  5. Destaque o cabeçalho usando a tag <th>.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a tag usada para definir uma linha na tabela?
  2. Qual a diferença entre as tags <td> and <th>?

Intermediários

  1. Por que não devemos usar tabelas para criar o layout (posicionamento) do site?
  2. Para que servem as tags <thead> e <tbody>?

Desafio 🧠

  1. Pesquise sobre os atributos colspan e rowspan. Para que eles servem e como fariam para "unir" duas células em uma tabela?

Próxima Aula: Vamos interagir com o usuário através de Formulários! 📝