After recently getting a lot of requests through a Facebook group on how to achieve an alternative pricing table within Divi i felt it would be easier to create a post for it to make the info more accessible. So here goes….. A working version of this table can been found here at Hire Me Campervans
On the left here we can see a simple table that has been been created with HTML that holds pricing information. if you look at the live example you will see there is also a hover effect with mouse over which highlights the rows of the table as you move the mouse over them. The HTML that created this table is available to down load in a json file Here so you can easily import it into your divi Page. I used a Text module to do this but you could just as easily used a code module.
after clicking on the button right click and select save as to get the json file.
If you want to do this manually simply add a text module to your Divi Builder row and paste in the following into the ‘TEXT’ Tab
<h1 style=”text-align: center;”>California Hire Tariff 2016 Season</h1>
<table>
<thead>
<tr>
<td style=”text-align: center;”></td>
<td><strong>Weekend Hire</strong></td>
<td><strong>Midweek Hire</strong></td>
<td><strong>Weekly Hire</strong></td>
<td><strong>Extra Days</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>£325.00</td>
<td>£385.00</td>
<td>£565.00</td>
<td>£75.00</td>
</tr>
<tr>
<td>February</td>
<td>£325.00</td>
<td>£385.00</td>
<td>£565.00</td>
<td>£75.00</td>
</tr>
<tr>
<td>March</td>
<td>£325.00</td>
<td>£385.00</td>
<td>£565.00</td>
<td>£75.00</td>
</tr>
<tr>
<td>April</td>
<td>£375.00</td>
<td>£425.00</td>
<td>£625.00</td>
<td>£85.00</td>
</tr>
<tr>
<td>May</td>
<td>£395.00</td>
<td>£450.00</td>
<td>£625.00</td>
<td>£85.00</td>
</tr>
<tr>
<td>June</td>
<td>£425.00</td>
<td>£475.00</td>
<td>£725.00</td>
<td>£95.00</td>
</tr>
<tr>
<td>July</td>
<td>£495.00</td>
<td>£525.00</td>
<td>£795.00</td>
<td>£100.00</td>
</tr>
<tr>
<td>August</td>
<td>£495.00</td>
<td>£525.00</td>
<td>£795.00</td>
<td>£100.00</td>
</tr>
<tr>
<td>September</td>
<td>£395.00</td>
<td>£475.00</td>
<td>£725.00</td>
<td>£95.00</td>
</tr>
<tr>
<td>October</td>
<td>£375.00</td>
<td>£425.00</td>
<td>£625.00</td>
<td>£85.00</td>
</tr>
<tr>
<td>November</td>
<td>£325.00</td>
<td>£385.00</td>
<td>£565.00</td>
<td>£75.00</td>
</tr>
<tr>
<td>December</td>
<td>£325.00</td>
<td>£385.00</td>
<td>£565.00</td>
<td>£75.00</td>
</tr>
</tbody>
</table>
<strong>Weekend</strong> Fri – Mon (3 nights): 3pm Collection on Friday – Return 10.30am on Monday
<strong>Midweek</strong> Mon – Fri (4 nights): 3pm Collection on Monday – Return 10.30am Friday
<strong>Full Week</strong> (flexible 7 nights): 3pm Collection – Return 10.30am
<h4 style=”text-align: center;”>Book Now!</h4>
You will see you can easily make out the structure of the table, with Row’s set between <tr> ….. </tr> Tags and the details within the rows set between the <td> … </td> Tags….
You can also easily change the border of the table if required by adding style elements to the Opening Table Tag
To achieve the roll over effect you need to add to bits of further script. Firstly in the CSS tab of your text box to the main element – tr:hover{background-color:#f5f5f5} you can change the colour to match your colour scheme.
The final bit of script needs to be added to the integration tab of the divi options under the <head> section
The code you need is here –
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
</style>
