Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Design a Functional HTML Table | Section
HTML for Frontend Development

Challenge: Design a Functional HTML Table

Swipe to show menu

Goal

Present employee information in a structured table format by using appropriate HTML tags to create rows and columns.

Task

Create a table with three columns: Name, Position, and Wage. Focus on using the appropriate HTML tags to populate the table with the correct rows and columns. Here is the data to include:

  1. Name: Emma Johnson | Position: Sales Associate | Wage: $15.50 per hour.
  2. Name: Liam Thompson | Position: Customer Service Representative | Wage: $14.75 per hour.
  3. Name: Olivia Rodriguez | Position: Marketing Coordinator | Wage: $18.25 per hour.
  4. Name: Noah Smith | Position: IT Support Specialist | Wage: $20.00 per hour.
  5. Name: Ava Davis | Position: Administrative Assistant | Wage: $16.80 per hour.
index.html

index.html

index.css

index.css

Hint
expand arrow
  1. Use the <table> tag to define the main container for the table;
  2. Use the <thead> tag to group the header content of the table, such as column headings;
  3. Use the <tr> tag to define a new row within the table;
  4. Use the <th> tag to define the header text for each column;
  5. Use the <tbody> tag to group the main content of the table, including rows and data cells;
  6. Use the <td> tag to define the actual data or content within each table cell.
Solution
expand arrow
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <table>
      <!-- Table header: Defines the column headings -->
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Wage</th>
        </tr>
      </thead>

      <!-- Table body: Contains data for each employee -->
      <tbody>
        <!-- Row 1 -->
        <tr>
          <td>Emma Johnson</td>
          <td>Sales Associate</td>
          <td>$15.50 per hour</td>
        </tr>
        <!-- Row 2 -->
        <tr>
          <td>Liam Thompson</td>
          <td>Customer Service Representative</td>
          <td>$14.75 per hour</td>
        </tr>
        <!-- Row 3 -->
        <tr>
          <td>Olivia Rodriguez</td>
          <td>Marketing Coordinator</td>
          <td>$18.25 per hour</td>
        </tr>
        <!-- Row 4 -->
        <tr>
          <td>Noah Smith</td>
          <td>IT Support Specialist</td>
          <td>$20.00 per hour</td>
        </tr>
        <!-- Row 5 -->
        <tr>
          <td>Ava Davis</td>
          <td>Administrative Assistant</td>
          <td>$16.80 per hour</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 21

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 1. Chapter 21
some-alt