Bird
Raised Fist0
HTMLmarkup~15 mins

Table rows and columns in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Building a Simple HTML Table with Rows and Columns
📖 Scenario: You are creating a simple webpage to show a small table of fruits and their colors. This is like making a list on paper but using a table so it looks neat and organized.
🎯 Goal: Build a basic HTML table with a header row and two data rows. The table will have two columns: one for the fruit name and one for its color.
📋 What You'll Learn
Use semantic HTML table elements: , , , , needs a closing [OK]
Hint: Check every
has a matching [OK]
Common Mistakes:
  • Ignoring missing closing tags
  • Confusing <td> and <th> errors
  • Assuming table tag is unclosed
5. You want to create a table with 3 columns: 'Product', 'Price', and 'Stock'. The first row should be headers. Which code snippet correctly creates this table structure?
hard
A. 
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
</table>
B. 
<table>
  <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Stock</td>
  </tr>
</table>
C. 
<table>
  <th>Product</th>
  <th>Price</th>
  <th>Stock</th>
</table>
D. 
<table>
  <tr>
    <th>Product</th>
    <td>Price</td>
    <td>Stock</td>
  </tr>
</table>

Solution

  1. Step 1: Identify header row requirements

    The first row should use <th> tags for all three headers to label columns.

  2. Step 2: Check each option

    <table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
</table>
    correctly uses <th> inside a <tr> for all headers. 
    <table>
  <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Stock</td>
  </tr>
</table>
    uses <td> which is for data cells, not headers. 
    <table>
  <th>Product</th>
  <th>Price</th>
  <th>Stock</th>
</table>
    places <th> directly inside <table> without a row. 
    <table>
  <tr>
    <th>Product</th>
    <td>Price</td>
    <td>Stock</td>
  </tr>
</table>
    mixes <th> and <td> in the header row, which is incorrect.

  3. Final Answer:

    <pre><table> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> </table></pre> -> Option A

  4. Quick Check:

    Headers = all <th> in a <tr> [OK]
Hint: Headers row uses all <th> inside one <tr> [OK]
Common Mistakes:
  • Using <td> for headers
  • Placing <th> outside <tr>
  • Mixing <th> and <td> in header row
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
, and .
Create exactly two columns: 'Fruit' and 'Color'.
Add a header row with column titles.
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 everywhere on websites to show organized data like schedules, prices, or lists.
💼 Career
Knowing how to build and structure tables is a basic skill for web developers and content creators.
Progress0 / 4 steps
1
Create the basic table structure
Write the opening and closing <table> tags and inside them add a <thead> section with one row <tr>. Inside this row, add two header cells <th> with the exact text Fruit and Color.
HTML
Hint

Remember to use <th> tags inside the header row <tr> to create column titles.

2
Add the table body section
Below the <thead>, add a <tbody> section inside the <table> tags. Leave it empty for now.
HTML
Hint

The <tbody> tag groups the main rows of the table separate from the header.

3
Add the first data row for Apple
Inside the <tbody>, add a row <tr> with two cells <td>. The first cell should contain the exact text Apple and the second cell should contain Red.
HTML
Hint

Use <td> tags inside the row <tr> for each piece of data.

4
Add the second data row for Banana
Below the first data row inside <tbody>, add another row <tr> with two cells <td>. The first cell should contain Banana and the second cell should contain Yellow.
HTML
Hint

Remember to add the new row inside the <tbody> after the first row.

Practice

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

Solution

  1. Step 1: Understand table structure

    A table is made of rows and columns. Rows group cells horizontally.

  2. Step 2: Identify the row tag

    The <tr> tag defines a table row, while <td> and <th> define cells inside 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 <td> as row tag
  • Using <th> for rows instead of headers
  • Using <table> as row tag
2. Which of the following is the correct way to create a table header cell?
easy
A. <table>Header</table>
B. <td>Header</td>
C. <tr>Header</tr>
D. <th>Header</th>

Solution

  1. Step 1: Know header cell tags

    Table headers use <th> tags to label columns or rows.

  2. Step 2: Check the options

    Only <th>Header</th> uses <th> correctly for a header cell.

  3. Final Answer:

    <th>Header</th> -> Option D

  4. Quick Check:

    Headers use <th> tags [OK]
Hint: Headers always use <th>, not <td> [OK]
Common Mistakes:
  • Using <td> for headers
  • Using <tr> or <table> as cells
  • Missing closing tags
3. What will the following HTML code display in a browser?
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>
medium
A. An error because <th> cannot be used inside <tr>.
B. A list of names and ages without any table structure.
C. A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'.
D. A table with one column and two rows.

Solution

  1. Step 1: Analyze the table structure

    The first row uses <th> for headers 'Name' and 'Age'. The second row uses <td> for data 'Alice' and '30'.

  2. Step 2: Understand rendering

    This creates a table with two columns labeled 'Name' and 'Age', and one data row with 'Alice' and '30'.

  3. Final Answer:

    A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'. -> Option C

  4. Quick Check:

    Headers + data rows = labeled table [OK]
Hint: Headers in first row, data in next rows form columns [OK]
Common Mistakes:
  • Thinking <th> cannot be inside <tr>
  • Confusing table with list
  • Assuming one column only
4. Identify the error in this table code:
<table>
  <tr>
    <td>Item 1</td>
  <tr>
    <td>Item 2</td>
  </tr>
</table>
medium
A. Table tag is not closed.
B. Missing closing tag for the first <tr>.
C. Using <td> instead of <th> for headers.
D. Extra closing tag at the end.

Solution

  1. Step 1: Check row tags

    The first <tr> is opened but not closed before the second <tr> starts.

  2. Step 2: Confirm correct nesting

    Each <tr> must have a matching closing </tr>. Here, the first row is missing its closing tag.

  3. Final Answer:

    Missing closing tag for the first <tr>. -> Option B

  4. Quick Check:

    Every