WordPress tabel maken en invoegen

Bij het schrijven van artikelen of creeeren van sales pagina’s kan het makkelijk en overzichtelijk zijn om een tabel te gebruiken in WordPress. Als je bijvoorbeeld gebruik maakt van verschillende pakketten dan kan je de gebruiker snel een overzicht tonen en informatie met elkaar laten vergelijken.

Jammer genoeg zit er in WordPress niet standaard een functie waarmee je een tabel mee kunt invoegen. Naar mijn idee is dit een functionaliteit die toch door veel mensen zal worden gebruikt. In dit artikel wil ik even ingaan op de simpele tabellen om tekst mooi uit te lijnen naast een foto en uitgebreide tabel om informatie met elkaar te vergelijken.

Ik ben een tijdje op zoek geweest naar een goede plugin om eenvoudige tabellen mee te maken in WordPress maar ik ben deze nog niet tegengekomen. Elke keer miste ik iets of moest je toch weer betalen om van alle functionaliteiten gebruik te mogen maken. Ik ga je laten zien hoe je tabellen zelf eenvoudig kunt maken en integreren zonder van een WordPress plugin gebruik te hoeven maken.

Eenvoudige tabel maken en gebruiken in WordPress

Een eenvoudige tabel kan je gebruiken in WordPress om bijvoorbeeld een tekst met daarnaast een plaatje mooi uit te lijnen. Zo kan je ervoor zorgen dat bij een stuk tekst het plaatje er precies in het midden naast staat. Dat lukt je niet met de standaard functionaliteiten in WordPress. Je kunt daar wel een plaatje rechts van de tekst zetten maar dan zal na het plaatje de tekst gewoon daaronder weer doorlopen. Het beste voorbeeld van een eenvoudige tabel is eigenlijk als je een soort van samenvatting/checklist wilt tonen. Zie het voorbeeld hieronder:

	Voorbeeld zin 1
	Voorbeeld zin 2

In het voorbeeld hierboven hebben we gebruikt gemaakt van een stukje HTML code. Het is helemaal niet moeilijk als je weet hoe je dit moet gebruiken. Laten we even kijken naar het stukje code:

<table style="background-color: #ffffff;" width="100%" border="0" cellspacing="3" cellpadding="3"><colgroup> <col width="25%" /> <col width="75%" /></colgroup>
<tbody>
<tr>
<td><img class="size-full wp-image-1090 aligncenter" title="check" src="https://www.internetondernemerspakket.nl/wp-content/uploads/2013/01/check.png" alt="" width="50" height="50" /></td>
<td>Voorbeeld zin 1</td>
</tr>
<tr>
<td><img class="size-full wp-image-1090 aligncenter" title="check" src="https://www.internetondernemerspakket.nl/wp-content/uploads/2013/01/check.png" alt="" width="50" height="50" /></td>
<td>Voorbeeld zin 2</td>
</tr>
</tbody>
</table>

Al zou je bovenstaande code plakken onder het tabje HTML als je een artikel of pagina aan het maken bent dan zal je hetzelfde zien als mijn voorbeeld. Laten we even naar de belangrijke stukken code kijken:

– table style=”background-color: #ffffff; betekent dat de achtergrond van je tabel wit is
– width=”100%” betekent dat de tabel 100% breed moet zijn
– border=”0″ betekent dat je de tabel randen niet wilt laten zien, mocht je dat wel willen moet je dit wijzigen naar 1
– <colgroup> <col width=”25%” /> <col width=”75%” /></colgroup> betekent dat je de linker kolom maar 25% breed wilt en de rechter 75% breed
–  <td><img title=”check” src=”http://www.internetondernemerspakket.nl/wp-content/uploads/2013/01/check.png” alt=”” width=”50″ height=”50″ /></td> is het plaatje in de linkerkolom
–  <td>Voorbeeld zin 1</td> is de tekst in de rechterkolom

Mocht je een extra rij willen maken, kopieer dan alles van <tr> tot en met </tr> en plak deze onder een </tr>.

Uitgebreide tabel maken en gebruiken in WordPress

Een uitgebreide tabel kan je gebruiken in WordPress als je echt dingen wilt vergelijken en met kleurtjes en een mouse over wilt werken. Het is zeker mogelijk om dan dit toe te voegen aan de HTML code die we voor een eenvoudige tabel gebruiken maar het kan ook veel makkelijker. Hiervoor kunnen we een externe website gebruiken waarop je eenvoudig een geavanceerde tabel kunt maken.

1) Ga naar http://www.textfixer.com/html/html-table-generator.php

2) Pas de instellingen naar wens aan. Zo kan je zelf instellen hoeveel kolommen en rijen je wilt, de kleuren en of een rij moet oplichten als je erover heen gaat met je muis.

3) Kopieer de HTML code en plak deze onder de HTML tabblad bij het aanmaken van een artikel of pagina.

4) De tekst bijvoorbeeld “Row 1 Cell 1” in de HTML code kan je zelf naar wens aanpassen.

5) Een nadeel van deze code is dat je de view “HTML” bij het schrijven van een artikel en/of pagina wel moet behouden. Anders zal de tabel helaas niet meer goed getoond worden. Ik adviseer je dan ook om deze tabel er pas op het laatst in te voegen zodat je de tekst niet meer hoeft aan te passen.

Een voorbeeld van de uitgebreide tabel:

Mocht jij wel echt een goede WordPress tabel plugin weten of heb jij nog een andere manier; deel dan je bevindingen met ons hieronder.

Succes!