DS & II

capitulo_07_tabelas

Leitura de 2 min

Capítulo 07: Tabelas de Atributos (Tabelas) 📊🛡️

Neste capítulo, vamos aprender a criar tabelas para organizar dados complexos, usando o tema Atributos de Personagens!

📖 Tabelas no HTML

Tabelas são ótimas para comparar dados. No HTML, usamos um conjunto de tags para criá-las:

  • <table>: Envolve toda a tabela.
  • <tr> (Table Row): Cria uma linha.
  • <th> (Table Header): Cria uma célula de cabeçalho (negrito e centralizado).
  • <td> (Table Data): Cria uma célula de dado comum.

📖 Exemplo Guiado: Status da Equipe

Vamos criar uma tabela com os guerreiros.

  1. Crie o arquivo tabela.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Status do Grupo</title>
</head>
<body>
    <h1>Atributos dos Heróis</h1>
    
    <table border="1"> <!-- O atributo border serve para ver as linhas -->
        <tr>
            <th>Nome</th>
            <th>Classe</th>
            <th>Nível</th>
        </tr>
        <tr>
            <td>Aragorn</td>
            <td>Guardião</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Legolas</td>
            <td>Arqueiro</td>
            <td>48</td>
        </tr>
    </table>
</body>
</html>

📊 Ilustração Visual: Estrutura da Tabela

graph TD
    A["table"] --> B["tr (Linha 1)"]
    A --> C["tr (Linha 2)"]
    B --> D["th (Título)"]
    C --> E["td (Dado)"]

🛠️ Prática Obrigatória 1: Tabela de Itens

Crie um arquivo chamado meus_itens.html. Crie uma tabela com 3 colunas: “Item”, “Quantidade” e “Poder”. Preencha com pelo menos 2 linhas de dados de itens de jogo!

🔑 Gabarito de Código

Prática 1: meus_itens.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meus Itens</title>
</head>
<body>
    <h1>Inventário Detalhado</h1>
    <table border="1">
        <tr>
            <th>Item</th>
            <th>Quantidade</th>
            <th>Poder</th>
        </tr>
        <tr>
            <td>Poção de Vida</td>
            <td>5</td>
            <td>+50 HP</td>
        </tr>
        <tr>
            <td>Espada Laser</td>
            <td>1</td>
            <td>100 ATK</td>
        </tr>
    </table>
</body>
</html>

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks