Pular para conteúdo

Aula 06 - Tabelas 📊

Organizando Dados de Forma Estruturada

👋 Olá!

Hoje vamos aprender a organizar informações complexas.

Pense em planilhas, notas, horários e preços. Tudo isso vive em Tabelas! 🏗️

Agenda de Hoje 📅

  1. Quando usar Tabelas?
  2. Estrutura Básica (table, tr, td)
  3. Cabeçalhos (th)
  4. Semântica (thead, tbody, tfoot)
  5. Legendas (caption)
  6. Boas Práticas

🚫 1. O que NÃO fazer

  • Regra de Ouro: Não use tabelas para criar o layout do site.
  • Para posicionar menus e colunas, usamos CSS.

✅ O que fazer

  • Use tabelas apenas para dados tabulares.
  • Ex: Uma tabela de preços de produtos.

🧱 2. Estrutura Básica

Como construir o esqueleto?

O Recipiente 📦

<table>
  <!-- Conteúdo vai aqui -->
</table>
- Define o início e o fim da tabela.

A Linha (TR) 📏

  • TR = Table Row. 

<tr>  </tr>
- Cada <tr> cria uma nova linha horizontal.

A Célula (TD) 🧊

  • TD = Table Data. 

<td> Dado </td>
- É onde o conteúdo realmente fica.

🔝 3. Cabeçalhos (TH)

  • TH = Table Header. 

<th> Nome da Coluna </th>
- Define o título da coluna. - Por padrão, fica em negrito e centralizado.

📊 Exemplo Visual

graph TD
    TABLE[table] --> R1[tr - Linha 1]
    R1 --> TH1[th - Título 1]
    R1 --> TH2[th - Título 2]
    TABLE --> R2[tr - Linha 2]
    R2 --> TD1[td - Dado 1]
    R2 --> TD2[td - Dado 2]

🧠 4. Semântica Avançada

Divisão profissional da tabela.

thead e tbody 📂

  • thead: Envolve o cabeçalho.
  • tbody: Envolve o conteúdo principal.
  • Ajuda o navegador a entender a divisão dos dados.

tfoot (Rodapé) 🦶

  • Usado para totais ou observações ao final da tabela. 
<tfoot>
  <tr><td>Total</td><td>100,00</td></tr>
</tfoot>

🏷️ 5. Caption (Legenda)

  • Dá um título à tabela.
  • Deve ser a primeira tag dentro do <table>. 
<caption>Minha Grade de Horários</caption>

🗺️ Hierarquia Completa

graph TD
    T[table] --> C[caption]
    T --> TH[thead]
    T --> TB[tbody]
    T --> TF[tfoot]

🕵️‍♂️ Resumo da Aula ✅

  • <table> é o container.
  • <tr> cria linhas.
  • <td> dados, <th> títulos.
  • thead, tbody e tfoot dão ordem semântica.

💻 6. Prática de Hoje

Criar uma tabela simples de 3 colunas e 3 linhas com seus tópicos favoritos de estudo.

Próxima Aula 📝

Formulários

Vamos aprender a receber dados do usuário de forma interativa!

Dúvidas? 🤔

"Dados sem estrutura são apenas ruído. Tabelas transformam ruído em informação."