Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

Table with footer – HTML

Demo

Summary

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

Details

Table with footer

<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