Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Challenge: Working with Tables | Tables and Forms
HTML Essentials

book
Challenge: Working with Tables

Task

Create an HTML table to display restaurant menu items, including their names, descriptions, and prices. Fill in the table with the following data using the correct table structure.

  1. Savory Bliss Bowl
    • Description: Quinoa, roasted veggies, grilled chicken, tahini dressing;
    • Price: $12.99.
  2. Mediterranean Delight Wrap
    • Description: Halloumi cheese, spinach, tomatoes, tzatziki in a wrap;
    • Price: $10.49.
  3. Sizzling BBQ Burger
    • Description: Beef patty, bacon, cheddar, caramelized onions, fries;
    • Price: $13.99.
  4. Veggie Harvest Salad
    • Description: Greens, sweet potatoes, chickpeas, avocado, feta, vinaigrette;
    • Price: $9.99.
  5. Seafood Pasta Extravaganza
    • Description: Shrimp, scallops, mussels, linguine, garlic wine sauce;
    • Price: $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>

Hint

  • Step 1: Create the table structure using the <table> tag. Inside the table, use the <thead> tag for the table head and the <tbody> tag for the table body. Within the <thead> section, add a row (<tr>) with table header cells (<th>) for each column: Item, Description, and Price.
  • Step 2: Populate the table with menu items by adding rows (<tr>) inside the <tbody> section. Use table data cells (<td>) within each row (<tr>) to specify the corresponding details for each menu item.
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>

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 2
some-alt