HTML <tfoot> class Attribute

The class attribute on a <tfoot> tag assigns one or more classnames to the table footer. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <tfoot> element.

First Name Last Name
Denice Hobermann
Paulo Cornell
Jane Hollander
Number of finalists: 3
<style>
  table.tb { width: 300px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
  .tfoot { background-color:lightblue; }
</style>

<table class="tb">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Denice</td>
      <td>Hobermann</td>
    </tr>
    <tr>
      <td>Paulo</td>
      <td>Cornell</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Hollander</td>
    </tr>
  </tbody>
  <tfoot class="tfoot">
    <tr>
      <td colspan="2">Number of finalists: 3</td>
    </tr>
  </tfoot>
</table>

Using class

The class attribute assigns one or more classnames to the <tfoot> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the tfoot element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<tfoot class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling a <tfoot> element.
Clicking the button toggles a classname that changes the table footer to dark mode.

First Name Last Name
Denice Hobermann
Paulo Cornell
Jane Hollander
Number of finalists: 3

<style>
  table.tbl { width: 300px; border-collapse: collapse; }
  .tbl th, .tbl td { border: solid 1px #777; padding: 5px; }
  .tfoot-light { background-color:lightblue; }
  .tfoot-dark { background-color: #222; color: #fff; } 
</style>

<table class="tb">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Denice</td>
      <td>Hobermann</td>
    </tr>
    <tr>
      <td>Paulo</td>
      <td>Cornell</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Hollander</td>
    </tr>
  </tbody>
  <tfoot id="mytfoot" class="tfoot-light">
    <tr>
      <td colspan="2">Number of finalists: 3</td>
    </tr>
  </tfoot>
</table>

<br />
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
     let element = document.getElementById("mytfoot");
     element.classList.toggle("tfoot-dark");
  }
</script>

Code explanation

Two CSS classes are defined in the <style> element.

The class attribute in <tfoot> assigns one classname.

Repeatedly clicking the button toggles the second class, changing the background and text color of the element.


Browser support

Here is when class support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <tfoot>
Guides