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

Need a 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
  

Need a 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
  

Need a 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
  

Need a hint?

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