Pricing Tables

Display a comparison of plans, subscriptions, or features

Note: Pricing Tables have been introduced starting with the Marquez Email Template.

Our templates come with two main Pricing Table layouts

  • 2 column
  • 3 column

Both come with titles, rows of options, call to action button, and are or can be customised to be full width (collapsed).


2 Columns Pricing Table

The two column Pricing Table is made up of two equal columns, and can be boxed or full width (no space on the left/right sides). You can add a background colour to one of the columns, for an added touch.
On mobile, the columns stack on top of each other.

Example

Pricing Table 2 Columns

3 Columns Pricing Table

Similar to the previous one, but with a three column layout that allows for comparing across a range of options. Just as with the two column one, the columns will stack on mobile.

Example

Pricing Table 3 Columns

Customisation

You can easily change the looks of a pricing table by changing its background, text, call to action button colours.

  • Background colour — change the HEX colour inside bgcolor="" attribute
  • Text — change the colour and font styles (size, weight) with inline CSS
  • Button — you can change the background colour with the bgcolor="" attribute, and text colour with inline CSS
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section
NOTE: the spacers in pricing table sections have a colspan="" attribute. This is the same as the number of columns in the pricing table, and is needed for consistent rendering.

Next Up: Stats →