Create Effective Table Footers in HTML

Introduction

In HTML, you can group the footer content of a table using the <tfoot> tag. The table footer can include summary information, explanatory notes or commentary. The <tfoot> tag is one of the children of the <table> tag and is used in conjunction with <thead> and <tbody> tag. In this lab, you will learn how to create table footers in HTML using the <tfoot> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70862{{"`HTML Table Footer`"}} html/head_elems -.-> lab-70862{{"`HTML Table Footer`"}} html/tables -.-> lab-70862{{"`HTML Table Footer`"}} html/tbl_access -.-> lab-70862{{"`HTML Table Footer`"}} end

Create a Basic Table Structure

Begin by creating a basic table structure that contains a table header, table body and table footer sections.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

In the code above, we have created a basic table structure with three columns: Name, Age and Gender. We have also added three rows of data to the table. The <tfoot> tag contains only one row with one cell (<td>) that spans over three columns (colspan="3").

Add Content to the Table Footer

Once you have created the basic table structure, you can add content to the <tfoot> tag.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

In this example, we have added a row to the <tfoot> tag that contains the average age of the people in the table. The first cell in the row spans over two columns (colspan="2") and displays the text "Average Age:". The second cell displays the actual average age value.

You can apply CSS styles to the <tfoot> tag and its child elements to adjust the appearance of the table footer.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

In this example, we have applied background color, font weight and text alignment styles to the <tfoot> tag using the CSS tfoot selector. We have also applied padding to the cells within the table footer section using the tfoot td selector.

Summary

The <tfoot> tag is used to group the footer content of a table. It works in conjunction with <thead> and <tbody> tag to create a complete table structure. You can add content and styles to the <tfoot> tag and its child elements using HTML and CSS.

HTML Table Footer

Introduction

Skills Graph

Create a Basic Table Structure

Add Content to the Table Footer

Apply CSS to the Table Footer

Summary

Other HTML Tutorials you may like