Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Tabela | Tabelas e Formulários
Essenciais de HTML

book
Desafio: Tabela

Tarefa

Crie uma tabela HTML para exibir itens do menu do restaurante, incluindo seus nomes, descrições e preços. Preencha a tabela com os seguintes dados usando a estrutura correta da tabela.

  1. Savory Bliss Bowl

    • Descrição: Quinoa, roasted veggies, grilled chicken, tahini dressing;

    • Preço: $12.99.

  2. Mediterranean Delight Wrap

    • Descrição: Halloumi cheese, spinach, tomatoes, tzatziki in a wrap;

    • Preço: $10.49.

  3. Sizzling BBQ Burger

    • Descrição: Beef patty, bacon, cheddar, caramelized onions, fries;

    • Preço: $13.99.

  4. Veggie Harvest Salad

    • Descrição: Greens, sweet potatoes, chickpeas, avocado, feta, vinaigrette;

    • Preço: $9.99.

  5. Seafood Pasta Extravaganza

    • Descrição: Shrimp, scallops, mussels, linguine, garlic wine sauce;

    • Preço: $16.99.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Restaurant Menu</h2>
<!-- Step 1: Create the table structure -->
<_____>

<!-- Table head -->
<_____>
<tr>
<th>Dish</th>
<_____>Description</_____>
<th>Price</th>
</tr>
</_____>

<!-- Table body -->
<_____>
<!-- Step 2: Populate the table with menu items -->
<tr>
<td><strong>Savory Bliss Bowl</strong></td>
<td>Quinoa, roasted veggies, grilled chicken, tahini dressing.</td>
<td><em>$12.99</em></td>
</tr>
<_____>
<td><strong>Mediterranean Delight Wrap</strong></td>
<td>_____</td>
<_____><em>$10.49</em></_____>
</_____>
<tr>
<_____><strong>Sizzling BBQ Burger</strong></_____>
<td>Beef patty, bacon, cheddar, caramelized onions, fries.</td>

Dica

  • Passo 1: Crie a estrutura da tabela usando a tag <table>. Dentro da tabela, use a tag <thead> para o cabeçalho da tabela e a tag <tbody> para o corpo da tabela. Dentro da seção <thead>, adicione uma linha (<tr>) com células de cabeçalho da tabela (<th>) para cada coluna: Item, Descrição e Preço.

  • Passo 2: Preencha a tabela com itens do menu adicionando linhas (<tr>) dentro da seção <tbody>. Use células de dados da tabela (<td>) dentro de cada linha (<tr>) para especificar os detalhes correspondentes para cada item do menu.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Restaurant Menu</h2>
<!-- Step 1: Create the table structure -->
<table>
<!-- Table head -->
<thead>
<tr>
<th>Dish</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>

<!-- Table body -->
<tbody>
<!-- Step 2: Populate the table with menu items -->
<tr>
<td><strong>Savory Bliss Bowl</strong></td>
<td>Quinoa, roasted veggies, grilled chicken, tahini dressing.</td>
<td><em>$12.99</em></td>
</tr>
<tr>
<td><strong>Mediterranean Delight Wrap</strong></td>
<td>Halloumi cheese, spinach, tomatoes, tzatziki in a wrap.</td>
<td><em>$10.49</em></td>
</tr>
<tr>
<td><strong>Sizzling BBQ Burger</strong></td>
<td>Beef patty, bacon, cheddar, caramelized onions, fries.</td>
<td><em>$13.99</em></td>
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

some-alt