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 | Working with Media and Tables
Ultimate HTML

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 4. Chapter 9

Ask AI

expand

Ask AI

ChatGPT

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

Section 4. Chapter 9
some-alt