Automatic-rock.nl

Ik heb nog altijd geen goede wordpress plugin kunnen vinden om tabellen te maken in een post.
Er is natuurlijk de bekende TablePress plugin. Deze is zeer handig voor grote sorteerbare tabellen waar je ook nog regelmatig data kan toevoegen of aanpassen. Maar het nadeel vind ik dat het niet zo handig is dat je in je post zelf de tabel niet kan aanpassen. Je moet eerst je bericht opslaan en dan naar de TablePress plugin gaan en daar je tabel opzoeken in de lijst en dan kan je pas wat aanpassen. Voor een klein simpel tabelletje is het wat teveel van het goede...

Maar ik heb een handige website gevonden: tablesgenerator.com
Op TablesGenerator kan je makkelijk een html tabel maken. Het is erg geschikt voor het maken van statische tabellen.

Het toevoegen van rijen en kolommen wijst zichzelf. Je kan meteen je data erin zetten. Het uitlijnen en dergelijke doen we later in wordpress. Je kan de eerste rij van de tabel wel een header maken door de hele rij te selecter (klik op de 1 aan het begin van de rij) en klik daarna op de B van bold.

Als alle tekst erin staat die we moeten hebben vinken we 'Do not generate CSS' aan en klikken daarna op de 'Generate' knop.

De website heeft nu de html code voor ons gemaakt.
We klikken nu op 'Copy to clipboard' om het mee te nemen naar wordpress.

De html code die we in onze post moeten plaatsen ziet er zo uit als hieronder:

Source code
   
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>

Dit kunnen we niet zomaar in onze post plaatsen. Hiervoor gaan we naar de Tekst editor. Klik op de tab naast Wysiwyg.

Scroll dan naar de plek waar je de tabel wil hebben staan, en plak daar de code van TableGenerator.com

Als je nu terug gaat naar de wysiwyg-editor zal je zoiets zien als hiernaast staat afgebeeld.
Het kan er bij jou totaal anders uitzien, dat is mede afhankelijk van je wordpress thema. Nu kan je de tekst in de tabel nog aanpassen, uitlijnen of stylen als je wil.

Als je vervolgens je post publiceert zal het eruit zien zoals het standaard door wordpress of je thema is ingesteld. In mijn geval is dat zo:

Omdat ik dit niet zo fraai vind moet ik 1 klein stukje html zelf typen, ik moet namelijk de tabel een css class geven en in de stylesheet kan ik dan bepalen hoe mijn tabel eruit moet zien.
De eerste regel van de html code verander ik daarom in <table class="ARtable">

In de stylesheet van mijn thema voeg er vervolgens deze regels toe:

Source code
   
1
2
3
4
56
7
8
9
1011
12
table.ARtable {
  border: 1px dashed #B20B0B;
  background: white;
  text-align: left;
  padding: 10px;  max-width: 760px;
}
 
table.ARtable th,
table.ARtable td {  padding: 0px 10px 14px 0px;
}

Het aanpassen van de stylesheet is eenmalig. Iedere volgende tabel die ik dezelfde class geef zal er dan hetzelfde uitzien zoals hieronder. Voor meer info over html tabellen en stylen via css kijk eens op W3Schools.com.
Mocht ik later nog iets willen aanpassen in de tabel dan kan ik dat gewoon via de post-editor doen. Als je hiermee aan de slag gaat zal je zien dat het heel simpel en snel gaat.
Hieronder nog de uiteindelijke tabel: