Call: (209) 560-6611

Responsive Price Table

Date: October 19, 2012 Author: ang Category: Tutorials Tags: , Comments: 0

I decided to put together a responsive price table to go along with my responsive WordPress theme.The term 'responsive' refers to the element's ability to respond and adapt to whatever display device it's visible on. For example, a responsive WordPress theme is one that adapts to be legible on standard monitors and mobile devices. Most pricing tables have fancy java script or CSS that makes them ‘unresponsive’ or they include CSS that conflicts with WordPress theme CSS.
Below is a simple aesthetic responsive price table made from just HTML and local CSS that shouldn’t break.

Responsive Price Table Demo

Starter Starter Starter Starter
Plan $7 /m $7 /m $14 /m $16 /m paid annually
Disk Space 5GB 5GB 8GB 10GB
Bandwidth/m info icon, small info icon 10GB 10GB 16GB 20GB
Domains info icon, small info icon 1 1 1 1
Subdomains info icon, small info icon 1 1 1 1
WordPress Setup info icon, small info icon red x icon, small red circle x icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon
WordPress Theme info icon, small info icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon
Email List info icon, small info icon red x icon, small red circle x icon red x icon, small red circle x icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon
Email Accounts info icon, small info icon 10 10 20 25
Custom Logo info icon, small info icon red x icon, small red circle x icon red x icon, small red circle x icon red x icon, small red circle x icon green checkmark icon, small green checkmark icon
Setup Fee info icon, small info icon $15 $35 $45 Free
WordPress Support info icon, small info icon red x icon, small red circle x icon red x icon, small red circle x icon red x icon, small red circle x icon green checkmark icon, small green checkmark icon
30-Days Money Back info icon, small info icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon green checkmark icon, small green checkmark icon
Backup/Restore info icon, small info icon $30 $30 $30 Free
read more... read more... read more... read more...

Responsive Price Table markup snippet

 Javascript |  copy code |? 
001
002
<table width="100%" cellpadding="5">
003
<tbody>
004
<tr>
005
<td></td>
006
<td style="background-color: #3e78af; color: white;" align="center"><strong>Starter</strong></td>
007
<td style="background-color: #527e23; color: white;" align="center"><strong>Starter</strong></td>
008
<td style="background-color: #c59600; color: white;" align="center"><strong>Starter</strong></td>
009
<td style="background-color: #b65c12; color: white;" align="center"><strong>Starter</strong></td>
010
</tr>
011
<tr>
012
<td><strong>Plan</strong></td>
013
<td align="center"><span style="font-size: 200%;"><strong>$7</strong></span><span style="font-size: 80%;"> /m</span></td>
014
<td align="center"><span style="font-size: 200%;"><strong>$7 </strong></span><span style="font-size: 80%;">/m</span></td>
015
<td align="center"><span style="font-size: 200%;"><strong>$14 </strong></span><span style="font-size: 80%;">/m</span></td>
016
<td align="center"><span style="font-size: 200%;"><strong>$16 </strong></span><span style="font-size: 80%;">/m paid annually</span></td>
017
</tr>
018
<tr>
019
<td>Disk Space</td>
020
<td align="center">5GB</td>
021
<td align="center">5GB</td>
022
<td align="center">8GB</td>
023
<td align="center">10GB</td>
024
</tr>
025
<tr>
026
<td>Bandwidth/m <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
027
<td align="center">10GB</td>
028
<td align="center">10GB</td>
029
<td align="center">16GB</td>
030
<td align="center">20GB</td>
031
</tr>
032
<tr>
033
<td>Domains <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
034
<td align="center">1</td>
035
<td align="center">1</td>
036
<td align="center">1</td>
037
<td align="center">1</td>
038
</tr>
039
<tr>
040
<td>Subdomains <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
041
<td align="center">1</td>
042
<td align="center">1</td>
043
<td align="center">1</td>
044
<td align="center">1</td>
045
</tr>
046
<tr>
047
<td>WordPress Setup <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
048
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
049
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
050
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
051
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
052
</tr>
053
<tr>
054
<td>WordPress Theme <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
055
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
056
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
057
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
058
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
059
</tr>
060
<tr>
061
<td>Email List <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
062
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
063
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
064
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
065
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
066
</tr>
067
<tr>
068
<td>Email Accounts <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
069
<td align="center">10</td>
070
<td align="center">10</td>
071
<td align="center">20</td>
072
<td align="center">25</td>
073
</tr>
074
<tr>
075
<td>Custom Logo <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
076
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
077
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
078
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
079
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
080
</tr>
081
<tr>
082
<td>Setup Fee <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
083
<td align="center">$15</td>
084
<td align="center">$35</td>
085
<td align="center">$45</td>
086
<td align="center"><span style="color: #527e23;"><strong>Free</strong></span></td>
087
</tr>
088
<tr>
089
<td>WordPress Support <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
090
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
091
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
092
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/no.png" alt="red x icon, small red circle x icon" border="0" /></td>
093
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
094
</tr>
095
<tr>
096
<td>30-Days Money Back <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
097
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
098
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
099
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
100
<td align="center"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/yes.png" alt="green checkmark icon, small green checkmark icon" border="0" /></td>
101
</tr>
102
<tr>
103
<td>Backup/Restore <a href="http://s69.photobucket.com/albums/i66/tempjuliet/?action=view&amp;current=help.png" target="_blank"><img src="http://i69.photobucket.com/albums/i66/tempjuliet/help.png" alt="info icon, small info icon" border="0" /></a></td>
104
<td align="center">$30</td>
105
<td align="center">$30</td>
106
<td align="center">$30</td>
107
<td align="center"><span style="color: #527e23;"><strong>Free</strong></span></td>
108
</tr>
109
<tr>
110
<td></td>
111
<td align="center"><a title="starter website package" href="#" target="_blank">read more...</a></td>
112
<td align="center"><a title="starter website package" href="#" target="_blank">read more...</a></td>
113
<td align="center"><a title="starter website package" href="#" target="_blank">read more...</a></td>
114
<td align="center"><a title="starter website package" href="#" target="_blank">read more...</a></td>
115
</tr>
116
</tbody>
117
</table>
118

Simply copy the markup snippet above, and paste it into your WordPress page or post. Make sure the 'HMTL' tab is selected when you paste the markup into your WordPress page or post. The variables will need to be modified to suit your business of course.

Note: The images used in the price chart are referenced from Photobucket.com, so you don't have to worry about downloading them. Your custom WordPress theme CSS will automatically alter this pricing table to match it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Before you post, please prove you are sentient.

What color is fresh snow?

Before you post, please prove you are sentient.

what is 2 + 7?