Tables and Pricing Tables

Here’s the code we used on our pricing page. You can copy the code and adjust according.

Pricing Table Demo

[soc_one_third][soc_panel color="white"]
<div class="pricing-title">Single License</div>
<div class="pricing-desc">For Single Site Owners - $37</div>
<p style="padding-left: 30px;">[icon type='fa fa-check'][/icon] <strong>Great Support</strong>
[icon type='fa fa-check'][/icon] Socrates Toolkit Plugin
[icon type='fa fa-check'][/icon] <strong>Tutorials and Training</strong>
[icon type='fa fa-check'][/icon] <strong>60 Day Guarantee</strong></p>
[soc_button color='ghost' size='large' href='http://socratestheme.com/#' target='new' align='center']Add To Cart[/soc_button][/soc_panel][/soc_one_third][soc_one_third ][soc_panel color="white popular"]
<div class="pricing-title">Unlimited</div>
<div class="pricing-desc">Most Popular - <span style="color: #339966;">$47**</span></div>
<p style="padding-left: 30px;">[icon type='fa fa-check'][/icon]  <strong>Same as Single +</strong>
[icon type='fa fa-check'][/icon]  Unlimited Personal Use
[icon type='fa fa-check'][/icon]  Bonus Themes/Plugins
[icon type='fa fa-check'][/icon] <strong>60 Day Guarantee</strong></p>
[soc_button color='green' size='large' href='http://socratestheme.com/#' target='new' align='center']Add To Cart[/soc_button][/soc_panel][/soc_one_third][soc_one_third class='last'][soc_panel color="white"]
<div class="pricing-title">Developers</div>
<div class="pricing-desc">For Client Sites - $147</div>
<p style="padding-left: 30px;">[icon type='fa fa-check'][/icon] <strong>Same As Unlim +</strong>
[icon type='fa fa-check'][/icon] Unlimited Client Use
[icon type='fa fa-check'][/icon] 10 Site Sales
[icon type='fa fa-check'][/icon] <strong>60 Day Guarantee</strong></p>
[soc_button color='ghost' size='large' href='http://socratestheme.com/#' target='new' align='center']Add To Cart[/soc_button][/soc_panel][/soc_one_third]

Extra CSS Needed for Title/Desc
Add to Customizer > Additional CSS

.pricing-title {font-size:28px;text-align:center;font-weight:700;margin-top:-30px;font-family:montserrat;}
.pricing-desc  {font-size:20px;text-align:center;font-weight:500;margin-bottom:15px;}
.popular {border: 5px #449d44  solid;margin: 10px 0 10px 0px;}

TABLE GENERATOR

Here’s a really cool resource to make HTML tables you can insert into WordPress using either divs or tables.

Just edit your code using their generator, then paste the html code into the “text” window of a page or post, and then add the CSS to Customizer CSS (if needed)

http://divtable.com/generator/

Code

<table style="width: 60%;" border="1" cellpadding="2">
<tbody>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
<!-- DivTable.com -->