The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Table Headers and Footers

Next ►
►

In this lesson, we will explore how to create and use table headers and footers in HTML. Table headers and footers help organize and present tabular data more effectively, making it easier for users to understand the information.

Key Concepts

  1. Table Headers (<thead>): Used to group header content in a table.
  2. Table Footers (<tfoot>): Used to group footer content in a table.
  3. Table Body (<tbody>): Used to group the main content of a table.

Basic Structure

A table with headers and footers typically follows this structure:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

Explanation

  • <thead>: Contains the table headers. Each header cell is defined with a <th> element.
  • <tbody>: Contains the main content of the table. Each data cell is defined with a <td> element.
  • <tfoot>: Contains the table footers. Each footer cell is defined with a <td> element.

Practical Example

Let's create a table that displays a list of products, their prices, and quantities. We'll include headers for the column titles and a footer for the total price.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Table</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
    tfoot {
      background-color: #f9f9f9;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1.00</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$0.50</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Cherry</td>
        <td>$2.00</td>
        <td>15</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total</td>
        <td>$45.00</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Explanation

  • Styling: Basic CSS is used to style the table, making it more readable.
  • <thead>: Contains the headers "Product", "Price", and "Quantity".
  • <tbody>: Contains the product data.
  • <tfoot>: Contains the footer with the total price. The colspan="2" attribute is used to merge the first two cells into one.

Exercise

Create a table that lists the names, ages, and cities of a group of people. Include headers for each column and a footer that displays the average age.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>People Table</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
    tfoot {
      background-color: #f9f9f9;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>Emily Johnson</td>
        <td>22</td>
        <td>Chicago</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Average Age</td>
        <td>25.67</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Explanation

  • <thead>: Contains the headers "Name", "Age", and "City".
  • <tbody>: Contains the data for each person.
  • <tfoot>: Contains the footer with the average age. The colspan="2" attribute is used to merge the first two cells into one.

Summary

In this lesson, we learned how to use table headers (<thead>), footers (<tfoot>), and body (<tbody>) to organize tabular data in HTML. We also created practical examples to reinforce the concepts. Understanding how to structure tables properly is essential for creating accessible and well-organized web content.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved