Colorful Pricing Table w/ TablePress

I transformed an image mockup into a full TablePress template. Feel free to reuse this code in your own projects, just don’t repackage or sell it please.

You’ll also like: How to style TablePress with CSS (full tutorial)

Usage:

1. Add classname ‘pricing-table’ to your TablePress table
2. Make first row the header
3. Make last row the footer
4. Add the CSS code (below) to your theme or directly to TablePress custom CSS

Freebies

1. Table Demo
2. CSS Template
3. Icons (external link)

Demo Table

	Basic	Standard	Advanced
	$9.99/m	$29.99/m	$49.99/m
Feature 1
Feature 2
Feature 3
Feature 4
Refund Policy	100% guaranteed	100% guaranteed	100% guaranteed
	Buy Now	Buy Now	Buy Now

The CSS:

.tablepress.pricing-table thead th {
    font-size: 25px;
    text-transform: uppercase;
    color: white;
    border-radius: 10px 10px 0 0;
}

.tablepress.pricing-table th.column-2 {
    background-color: #F5B923;
}

.tablepress.pricing-table th.column-3 {
    background-color: #007C48;
}

.tablepress.pricing-table th.column-4 {
    background-color: #026F96;
}

.tablepress.pricing-table .row-2 {
    font-size: 22px;
    color: white;
    font-weight: 700;
}

.tablepress.pricing-table .row-2 .column-2 {
    background-color: #FFCA00;

}

.tablepress.pricing-table .row-2 .column-3 {
    background-color: #01B48D;

}

.tablepress.pricing-table .row-2 .column-4 {
    background-color: #00AAC4;

}

.tablepress.pricing-table .row-1 .column-1, .tablepress.pricing-table .row-2 .column-1, .tablepress.pricing-table tfoot .column-1 {
    visibility: hidden;
}

.tablepress.pricing-table td, .tablepress.pricing-table th {
    text-align: center;
}

.tablepress.pricing-table tfoot a {
    color: white;
    text-transform: uppercase;
    display: block;
    background-color: #FFCA00;
    max-width: 160px;
    padding: 3px 10px;
    border-radius: 100px;
    margin: 0 auto;
  
}

.tablepress.pricing-table tfoot th {
    background-color: white !important;
    border-radius: 0 0 20px 20px;
   
}

.tablepress.pricing-table tfoot .column-3 a {
    background-color:#01B48D;
}

.tablepress.pricing-table tfoot .column-4 a {
    background-color:#00AAC4;
}

.tablepress.pricing-table .column-1 {
    background-color: #eee;
}

.tablepress.pricing-table td, .tablepress.pricing-table tfoot th {
    border: 1px solid #ddd;
}

.tablepress.pricing-table td, .tablepress.pricing-table .pt-icon {
    vertical-align: middle;
}

Code language: CSS (css)

Icons

I get most of my icons from 3 places:

1. FontAwesome (free)
2. IconMonstr
3. Flaticon (free w/ attribution or paid)

In this video, I used free icons from Flaticon (I have a premium subscription)

• Checkmark
• X