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  |
10GB | 10GB | 16GB | 20GB |
| Domains |
1 | 1 | 1 | 1 |
| Subdomains |
1 | 1 | 1 | 1 |
| WordPress Setup |
 |
 |
|
|
| WordPress Theme |
|
|
|
|
| Email List |
|
|
|
|
| Email Accounts |
10 | 10 | 20 | 25 |
| Custom Logo |
|
|
|
|
| Setup Fee |
$15 | $35 | $45 | Free |
| WordPress Support |
|
|
|
|
| 30-Days Money Back |
|
|
|
|
| Backup/Restore |
$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&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&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&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&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&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&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&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&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&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&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&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&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.
