Table headers in HTML - Mini Project: Build & Apply

Creating a Table with Headers in HTML

📖 Scenario: You are building a simple webpage to show a list of fruits and their colors in a table. To make the table clear, you want to add headers that describe each column.

🎯 Goal: Create an HTML table with two columns: one for the fruit name and one for its color. Add proper table headers to label these columns.

📋 What You'll Learn

Use semantic HTML table elements

Add a header row with two headers: 'Fruit' and 'Color'

Include at least three rows of fruit data

Ensure the table is accessible and structured correctly

💡 Why This Matters

🌍 Real World

Tables are used everywhere on websites to show data clearly, like product lists, schedules, or contact info. Using headers and semantic tags helps everyone understand the data.

💼 Career

Knowing how to build accessible and well-structured tables is important for web developers, especially when working on dashboards, reports, or any data-heavy websites.

1

Create the basic HTML table structure

Write the HTML code to create a <table> element with three rows of fruit data. Each row should have two cells: the first cell with the fruit name and the second cell with its color. Use <tr> for rows and <td> for cells. Include these exact fruits and colors: Apple with Red, Banana with Yellow, and Grape with Purple.

HTML

Hint

Remember to use <tr> for each row and <td> for each cell inside the row.

2

Add a header row with column titles

Add a header row at the top of the table using <tr> and <th> elements. The first header cell should have the text Fruit and the second header cell should have the text Color.

HTML

  
  
  
    Apple
    Red
  
  
    Banana
    Yellow
  
  
    Grape
    Purple
  

Hint

Use <th> tags inside a <tr> at the top of the table for headers.

3

Wrap the header row in a <thead> element

Wrap the header row (the <tr> with <th> cells) inside a <thead> element to clearly separate the table header from the body.

HTML

   here -->
  
  
    Fruit
    Color
  
  
    Apple
    Red
  
  
    Banana
    Yellow
  
  
    Grape
    Purple
  

Hint

Put the header row inside <thead> tags to separate it from the rest of the table.

4

Wrap the data rows in a <tbody> element

Wrap all the fruit data rows (the <tr> elements with <td> cells) inside a <tbody> element to clearly separate the table body from the header.

HTML

  
    
      Fruit
      Color
    
  
   here -->
  
  
    Apple
    Red
  
  
    Banana
    Yellow
  
  
    Grape
    Purple
  

Hint

Put all the data rows inside <tbody> tags to separate them from the header.

Practice

1. What is the main purpose of the <th> tag in an HTML table?

easy

A. To define a header cell that labels a column or row

B. To create a normal data cell in a table

C. To add a caption above the table

D. To merge multiple cells into one

Solution

1. Step 1: Understand the role of <th>

   The <th> tag is used to create header cells in a table, which label columns or rows.

2. Step 2: Differentiate from other tags

   The <td> tag creates normal data cells, not headers. Captions use <caption>, and merging cells uses colspan or rowspan.

3. Final Answer:

   To define a header cell that labels a column or row -> Option A

4. Quick Check:

   Table headers = <th> tag [OK]

Hint: Headers label columns or rows using <th> tags [OK]

Common Mistakes:

• Confusing <th> with <td>
• Thinking <th> merges cells
• Using <caption> as header cells

2. Which of the following is the correct syntax to create a table header cell for a column named "Name"?

easy

A. Name

B. Name

C. Name

D. Name

Solution

1. Step 1: Identify the tag for header cells

   The correct tag for a table header cell is <th>.

2. Step 2: Check the options

   <td> is for data cells, <header> is a page section tag, and <thead> groups header rows but does not create individual cells.

3. Final Answer:

   <th>Name</th> -> Option D

4. Quick Check:

   Header cell = <th> [OK]

Hint: Use <th> for header cells, not <td> or <header> [OK]

Common Mistakes:

• Using <td> instead of <th>
• Confusing <thead> with <th>
• Using non-table tags like <header>

3. Given the following HTML snippet, what will be the visual effect of the <th> elements in most browsers?

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

medium

A. The header cells will look the same as data cells

B. The header cells will be italic and left-aligned

C. The header cells will be bold and centered by default

D. The header cells will be hidden from view

Solution

1. Step 1: Understand default browser styles for <th>

   Browsers typically render <th> cells with bold text and center alignment to distinguish headers.

2. Step 2: Compare with data cells

   Data cells (<td>) are usually normal weight and left-aligned by default.

3. Final Answer:

   The header cells will be bold and centered by default -> Option C

4. Quick Check:

   <th> = bold + center [OK]

Hint: Headers appear bold and centered by default [OK]

Common Mistakes:

• Thinking headers are italic
• Assuming headers look like data cells
• Believing headers are hidden

4. Identify the error in this table header code:

<table>
  <thead>
    <tr>
      <th>Product</td>
      <th>Price</th>
    </tr>
  </thead>
</table>

medium

A. The second header cell uses <th> instead of <td>

B. The first header cell closes with </td> instead of </th>

C. The <tr> tag is not closed

D. The <thead> tag is missing

Solution

1. Step 1: Check tag consistency in header cells

   The first header cell starts with <th> but incorrectly closes with </td>, which is invalid.

2. Step 2: Verify other tags

   The <thead> and <tr> tags are correctly used and closed. The second header cell uses <th> correctly.

3. Final Answer:

   The first header cell closes with </td> instead of </th> -> Option B

4. Quick Check:

   Matching tags for <th> = </th> [OK]

Hint: Match opening and closing tags exactly for <th> [OK]

Common Mistakes:

• Mixing <th> and <td> tags
• Forgetting to close <tr> or <thead>
• Using <td> inside <thead>

5. You want to create a table where the first column uses header cells to label each row, and the top row uses header cells to label each column. Which is the correct way to do this?

hard

A. Col1Col2Row1Data1Data2

B. Col1Col2Row1Data1Data2

C. Col1Col2Row1Data1Data2

D. Col1Col2Row1Data1Data2

Solution

1. Step 1: Use <th> for both column and row headers

   The top row headers and the first column headers should use <th> tags to indicate headers.

2. Step 2: Check the provided options

   Col1Col2Row1Data1Data2 correctly uses <th> in the top row and first column. The empty <th> in the top-left corner aligns headers properly.

3. Final Answer:

   Option A uses <th> for both row and column headers correctly -> Option A

4. Quick Check:

   Row and column headers = <th> tags [OK]

Hint: Use <th> for headers in both top row and first column [OK]

Common Mistakes:

• Using <td> for headers in the first column
• Leaving top-left cell empty without <th>
• Mixing <td> and <th> incorrectly