It’s not so difficult to make a table in a WordPress page or post like shown below.
Down the table we explain it how you can do this.

Product 1 Product 2 Product 3
8.00€ 5.77$ 9.23£
The content of line one which passes through The content of line two
which is interrupted
The contents of line three that passes through and
is interrupted afterwards.
Buy Now Buy Now Buy Now

How to do …

Download the code here and paste it in a new post/page (in text mode)._tempo
Select all code from the provided text file included and between: <table style=”border-collapse: collapse; width:100%;”;> and </table>.

Sample changing existing code:
We are using in this sample 33% width for each column (is 100% width divided by 3 columns).
If you want to add a column then the column width will be 25% (is 100% width divided by 4 columns).
All text between style=” ” are CSS values and can be changed.
Edit this code in order to achieve the desired result .

The above frame is made with the following code:


Use only the provided code from here to copy (don’t copy the code below here).


<table style=”border-collapse: collapse; width:100%;”;>
<tbody>

<tr>
<td style=”width: 33%; background-color: green; color: white; font-weight: 900; padding: 14px; vertical-align: middle;text-align: center;”>Product 1</td>
<td style=”width: 33%; background-color: blue; color: white; font-weight: 900; padding: 14px;; vertical-align: middle;text-align: center;”>Product 2</td>
<td style=”width: 33%; background-color: red; color: white; font-weight: 900; padding: 14px; vertical-align: middle;text-align: center;”>Product 3</td>
</tr>

<tr>
<td style=”width: 33%; text-align: center; font-size: 1.4em;”>8.00€</td>
<td style=”width: 33%; text-align: center; font-size: 1.4em;”>5.77$</td>
<td style=”width: 33%; text-align: center; font-size: 1.4em;”>9.23£</td>
</tr>

<tr>
<td style=”width: 33%;”>The content of a line which passes through</td>
<td style=”width: 33%;”>The content of line two <br>which is interrupted.</td>
<td style=”width: 33%;”>The contents of line three that passes through and <br>is interrupted afterwards.</td>
</tr>

<tr>
<td style=”width: 33%; background-color: gray; color: white; text-align: center; font-size: 1.2em;”>Buy Now</td>
<td style=”width: 33%; background-color: gray; color: white; text-align: center; font-size: 1.2em;”>Buy Now</td>
<td style=”width: 33%; background-color: gray; color: white; text-align: center; font-size: 1.2em;”>Buy Now</td>
</tr>

</tbody>
</table>