Style your table footer

By default, the table footer row will get a light grey background color, but no other style treatment.

If you'd like to globally style your table footer row differently--to change the background color or font color, for example--you can do so by adding some Custom CSS:

  1. In the lefthand navigation, go to Customize > Style (HTML & CSS).
  2. In the Customize HTML, CSS, and JS section, select Custom CSS.
  3. Copy the CSS below and paste it in to the Custom CSS pane. At the bottom works well if you're not sure where to put it:
    /* Adjust table footer */
    body table tfoot td {
      background: #ececec;
    }
  4. To update the background color from the default grey, adjust the hex code in row 3.
  5. You can also include styles here for font-style or color to change the font. For example, this code:
    /* Adjust table footer */
    body table tfoot td {
      background: #1d284f;
      font-style: italic;
      color: #ffffff;
    }
    Will produce a dark blue background with italicized white text, like this:
    Header 1
    Header 2
    row 1, cell 1
    row 1, cell 2
    row 2, cell 1
    row 2, cell 2
    Footer 1
    Footer 2
  6. Be sure to Save your changes.

We recommend viewing a table with a footer to verify that you got the look you were going for.