a Simple HTML table in WordPress?

I still haven't been able find a good wordpress plugin to create tables in a post.
There is of course the famous TablePress plugin. This is very useful for large sortable tables where you regularly can add, or modify, data. But the downside, I think, is that you can't edit the table from within the post editor. You must save your post and then go to the Table Press plugin and there you search in the list of tables for the one you need, and only then you can adjust what you need. For a small simple little table it's a bit over the top ...

tabel1Now I found a useful website: tablesgenerator.com
On Table Generator you can easily create an HTML table. It is very suitable for making static tables.

Adding rows and columns is straightforward. You can instantly put your data into the table. The alignment and the styling we do later in wordpress. You can make the first row of the table a header by selecting the entire row (click on the 1 at the beginning of the row) and then click on the B of bold.

tabel2When all the data is in the table, we tick the box of 'Do not generate CSS' and then click on the 'Generate' button.

The website now has the html code for us.
We click on "Copy to clipboard" to take it to wordpress.

The html code that we have to put in our post looks like as follows:

1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 
<table>   <tr>     <th>title 1</th>     <th>title 2</th>     <th>title 3</th>  </tr>   <tr>     <td>data 1-1</td>     <td>data 2-1</td>     <td>data 3-1</td>  </tr>   <tr>     <td>data 1-2</td>     <td>data 2-2</td>     <td>data 3-2</td>  </tr> </table>

tabel4We can't just put this in our post. For this we go to the Text Editor. Click on the Text tab, next to Visual (called Wysiwyg in my Dutch wordpress).

Scroll down to the place where you want to be the table to be and paste the code from TableGenerator.com there.

tabel3If you go to the Visual editor, you will see something like you see below.
It may look completely different on your wordpress, this depends on your wordpress theme. Now you can edit the text in the table, the aligning or style or whatever if you want.
When you publish your post it will look like the standard table by wordpress or your theme. In my case this looks like this:

title 1 title 2 title 3
data 1-1 data 2-1 data 3-1
data 1-2 data 2-2 data 3-2

Because I don't appreciate this look so much I have one small piece of html code to type myself. I must give the table a css class and then style it in the stylesheet.
The first line of the html code I change therefore in <table class="ARtable"> In the stylesheet of my theme I add these rules:

1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 18 19 
table.ARtable {     border-collapse: collapse;     border: 1px dashed #B20B0B;     background: white;     text-align: left;    padding: 10px;     padding: 0.625rem;     max-width: 760px;     max-width: 47.5rem;     font-size: 12px;    font-size: 0.75rem;     line-height: normal; }   table.ARtable th,table.ARtable td {     padding: 5px 6px 4px 10px !important;     padding: 0.3125rem 0.375rem 0.25rem 0.625rem !important; }

Adjusting the stylesheet is a one-time thing. Each following table that I give the same class will look the same as below. For more information on HTML tables and styling via CSS take a look at W3Schools.com.
If later I want to change anything in the table, I can do that just by the post editor (visual or text). If try it out you'll see that it is very simple and fast.
Below the final table:

title 1 title 2 title 3
data 1-1 data 2-1 data 3-1
data 1-2 data 2-2 data 3-2