Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Table with footer – HTML

Demo

Summary

Tables are used to show tabular data on a web page.

Details

<table>
  <!-- Caption -->
  <caption>Caption for table</caption>

  <!-- Head -->
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>

  <!-- Body -->
  <tbody>
    <tr>
      <th>Row Header</th>
      <td>Cell</td>
    </tr>

    <tr>
      <th>Row Header</th>
      <td>Cell</td>
    </tr>
  </tbody>

  <!-- Footer -->
  <tfoot>
    <tr>
      <th>Footer Header</th>
      <td>Cell</td>
    </tr>
  </tfoot>
</table>

This table is similar to the table with a caption, head, and body, except that it wraps the last row element in a tfoot element. According to MDN, this extra element doesn’t have any accessibility benefits, but can be useful for styling the section of the table with CSS.

Exercises

Recreate the embedded CodePen demo by typing out the HTML code in your index.html file.

References

The Table Foot element – MDN

Lesson tags: Open Lesson
Back to: HTML Course > HTML Tables