Bird
Raised Fist0
HTMLmarkup~30 mins

Table structure in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Building a Simple HTML Table
📖 Scenario: You are creating a simple webpage to display a list of fruits and their colors in a table format. This will help visitors quickly see the fruit names and their colors.
🎯 Goal: Build a basic HTML table with a header row and two data rows showing fruit names and their colors.
📋 What You'll Learn
Use semantic HTML table elements: , , , ,
, and
Create a header row with column titles 'Fruit' and 'Color'
Add two rows of fruit data: 'Apple' with color 'Red' and 'Banana' with color 'Yellow'
Ensure the HTML is valid and renders correctly in a browser
💡 Why This Matters
🌍 Real World
Tables are used on websites to organize and display data like schedules, prices, or lists clearly.
💼 Career
Knowing how to build accessible and semantic tables is important for web developers to present data effectively and meet accessibility standards.
Progress0 / 4 steps
1
Create the basic HTML table structure
Write the opening and closing <table> tags to start and end your table.
HTML
Hint

Think of the table as a box that holds rows and columns. Start by creating the box with <table> tags.

2
Add the table header row
Inside the <table>, add a <thead> section containing one <tr> row with two header cells: <th>Fruit</th> and <th>Color</th>.
HTML
Hint

The header row uses <thead> and inside it a <tr> with <th> cells for column titles.

3
Add the table body with fruit data rows
Below the <thead>, add a <tbody> section containing two <tr> rows. The first row should have <td>Apple</td> and <td>Red</td>. The second row should have <td>Banana</td> and <td>Yellow</td>.
HTML
Hint

The body rows go inside <tbody>. Each row is a <tr> with data cells <td>.

4
Add a caption to describe the table
Add a <caption> element immediately inside the <table> tags with the text Fruit Colors to describe the table's content.
HTML
Hint

The <caption> tag gives a title or description for the table. It should be the first child inside <table>.

Practice

(1/5)
1. Which HTML tag is used to create a row inside a table?
easy
A. <tr>
B. <td>
C. <th>
D. <table>

Solution

  1. Step 1: Understand table row structure

    The <tr> tag defines a row in an HTML table.

  2. Step 2: Differentiate row from cells

    <td> and <th> define cells, not rows.

  3. Final Answer:

    <tr> -> Option A

  4. Quick Check:

    Row tag = <tr> [OK]
Hint: Rows use <tr>, cells use <td> or <th> [OK]
Common Mistakes:
  • Confusing <tr> with <td>
  • Using <th> for rows
  • Using <table> for rows
2. Which is the correct way to start a table header section in HTML?
easy
A. <thead>
B. <tbody>
C. <tfoot>
D. <th>

Solution

  1. Step 1: Identify header section tag

    The <thead> tag defines the header section of a table.

  2. Step 2: Differentiate from body and footer

    <tbody> is for body rows, <tfoot> for footer, and <th> is a cell tag.

  3. Final Answer:

    <thead> -> Option A

  4. Quick Check:

    Header section = <thead> [OK]
Hint: Table header section starts with <thead> [OK]
Common Mistakes:
  • Using <tbody> for header
  • Using <th> as section tag
  • Confusing <tfoot> with header
3. What will the following HTML code display? 
<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>
medium
A. A table with one column named NameAge and one row with Alice30
B. A table with two columns: Name and Age, and one row with Alice and 30
C. An error because <th> cannot be inside <tr>
D. A table with two rows but no columns

Solution

  1. Step 1: Analyze table header row

    The first <tr> has two <th> cells: 'Name' and 'Age', creating two columns.

  2. Step 2: Analyze data row

    The second <tr> has two <td> cells: 'Alice' and '30', filling the columns.

  3. Final Answer:

    A table with two columns: Name and Age, and one row with Alice and 30 -> Option B

  4. Quick Check:

    Headers + data cells = two columns, one data row [OK]
Hint: Headers create columns; data fills rows [OK]
Common Mistakes:
  • Thinking <th> can't be in <tr>
  • Merging headers into one column
  • Ignoring data cells
4. Find the error in this table code: 
<table>
  <tr><td>Item</td><td>Price</td></tr>
  <td>Book</td><td>$10</td>
</table>
medium
A. Table must have <thead> and <tbody> tags
B. Using <td> inside <table> is invalid
C. Missing <tr> tags around second row cells
D. Price cell should use <th> instead of <td>

Solution

  1. Step 1: Check row structure

    The second row cells <td>Book</td><td>$10</td> are not wrapped inside a <tr> tag, which is required.

  2. Step 2: Validate table syntax

    Each row must be inside <tr>. Missing it causes invalid structure.

  3. Final Answer:

    Missing <tr> tags around second row cells -> Option C

  4. Quick Check:

    Rows need <tr> tags [OK]
Hint: Every row's cells must be inside <tr> [OK]
Common Mistakes:
  • Omitting <tr> tags
  • Thinking <td> can be direct child of <table>
  • Confusing <th> and <td> usage
5. You want to create a table with a caption, a header row, a body with two rows, and a footer row. Which is the correct structure?
hard
A. <table><caption>Title</caption><thead><tr><td>H1</td></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>
B. <table><thead><caption>Title</caption><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>
C. <table><caption>Title</caption><tbody><tr><th>H1</th></tr><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>
D. <table><caption>Title</caption><thead><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

Solution

  1. Step 1: Confirm caption placement

    The <caption> tag must be directly inside <table>, before <thead>.

  2. Step 2: Check header, body, and footer tags

    <thead> contains header row with <th>, <tbody> has two data rows, and <tfoot> has footer row.

  3. Step 3: Validate cell tags in header

    Header cells use <th>, not <td>.

  4. Final Answer:

    Correct structure: caption first, thead with th, tbody with two rows, tfoot -> Option D

  5. Quick Check:

    Caption + thead + tbody + tfoot correct order [OK]
Hint: Caption first, then thead, tbody, tfoot with proper cells [OK]
Common Mistakes:
  • Placing caption inside thead
  • Using <td> in header
  • Omitting tbody
  • Wrong tag order
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard