Een tabel op mijn site. Hoe doe ik dat?

Mensen die met Gutenberg werken zullen dit artikel als overbodig beschouwen, maar aangezien het merendeel van alle gebruikers nog steeds vasthoudt aan hun vertrouwde WordPress omgeving, is dit artikel voor hen denk ik wel nuttig.

In deze Blog geef ik vier manieren om in WordPress een tabel te integreren. Deze functie zit namelijk niet standaard in het tekstgedeelte van het programma.

Achtereenvolgens behandel ik het zelf maken van een tabel met Word, vervolgens een eenvoudige tabel met een HTML-code, daarna het maken van een tabel met een HTML generator en tenslotte het gebruik van een plug-in voor de opmaak van een tabel.

1) De Microsoft Word-Methode

De Word-methode is verreweg de simpelste manier. U maakt een tabel in Word en plakt deze gewoon in de WordPress pagina of het bericht. Zo werkt het:

Maak een Word-document en ga naar de tag “Invoegen” > “Tabellen”.

Klik open en selecteer het aantal kolommen en regels; tevens kan ik hier aangeven of ik in de oneven regels en kolommen een kleurvlak wil plaatsen.
Dat doe ik door “stroken op oneven rijen” en/of stroken op oneven kolommen” aan te vinken. Het resultaat van het al dan niet aanvinken ziet u direct in het naastliggende vlak “Tabelstijlen”.

In dit gebied bestaat ook de mogelijkheid om de laatste kolom een andere opmaak mee te geven (handig voor bijvoorbeeld kolommen waarin een totaal wordt gegeven).
Voor de goede orde plaats ik tekst in de verschillende kolommen en kies een tabelstijl die me bevalt.

Selecteer de hele tabel en kopieer deze. Plak de tekst in de WordPress Pagina of in het bericht. In het tekstblok ziet het er dan als volgt uit:

Op de site ziet het er zo uit: Let wel: het beeld is afhankelijk van het gebruikte thema van de site. Hier is het thema: “TheGem”.

2) Een eenvoudige HTML-Tabel

Uiteraard kunnen er heel mooie en gecompliceerde tabellen met behulp van de programmeertaal HTML (HyperText Markup Language) worden samengesteld. Zo’n gecompliceerde tabel vergt nogal veel kennis van deze taal. Maar als we met een eenvoudige tabel tevreden zijn, dan volgt hieronder een code die u kunt kopiëren en in de tekstomgeving van een webpagina of bericht kunt plakken.

Maar voordat we de code plaatsen, geven we eerst even een paar tekstverklaringen voor een beter begrip van de code.

Een HTML-code werkt met tags. Dat zijn meestal begintags en eindtags en die zien er vaak zo uit: <begintag> en </eindtag>. Deze tags gebruiken we om een tabel te kunnen maken.

De tags zoals in een HTML-tabel worden gebruikt zien er zo uit:

  • Iedere tabel begint met de code <table> en wordt afgesloten met </table>
  • Iedere rij in een tabel begint met de code <tr> en wordt ook afgesloten met een </tr>
  • En iedere cel van de tabel begint met <td> en wordt ook afgesloten met </td>

Nu volgt de te kopiëren code van de eenvoudige tabel:

<table style=”width:100%”>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>

Wilt u een extra rij toevoegen aan de tabel, plak dan simpelweg de onderstaande code onder de laatste rij:
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>

En wanneer u een extra kolom aan uw tabel toe wilt voegen, zult u aan iedere rij een extra cel toe moeten voegen door de volgende code toe te voegen:
<td>Test</td>

Belangrijk: Wanneer u de HTML code in uw WordPress website gaat plakken, is het essentieel om te weten dat u dit in het ‘Tekst’ veld doet en niet in het ‘Visueel’ veld. Hieronder staat wat ik bedoel en waar u uw HTML code kunt plaatsen.

Omgezet van tekst naar visueel ziet de tabel er in het tekstvlak als onder weergegeven uit:

Op de website ziet het er dan zo uit:

Afhankelijk van het thema is deze tabel wel of niet responsive. Het is verstandig om eerst een kleine tabel te maken en die te testen, voordat u de tabel volledig gaat vullen met informatie.

3) Een HTML generator

Voor het geval de tabel uit mogelijkheid 2) niet aan de wensen beantwoordt, kunt u uitwijken naar een HTML-generator, die de code helemaal zelf schrijft. Daar zijn er een aantal van beschikbaar op het internet. Twee ervan zal ik hier bespreken.

Als eerste divtable.com.

Deze werkt eigenlijk net zo als de tabel zoals in Word wordt gemaakt. Heel eenvoudig dus.

In het zwarte hokjesveld geeft u aan hoe groot de tabel moet worden. Deze functie komt u ook tegen in Word en werkt eigenlijk precies hetzelfde.

Vervolgens kunt u bij settings het één en ander instellen:

  • Table / div: Niks aan doen
  • Border: Hier kunt u de dikte van de randen van de cellen en dus de tabel wijzigen.
    Zet deze op ‘0’ als u geen randen wilt en op ‘1’ voor dikkere randen. Voor ieder hoger getal worden deze randen dikker.
  • Width: Zet deze op 100%. Dan komt de tabel namelijk netjes over de gehele breedte van de tekst
  • Cell padding: Niks aan doen

En omdat ik weer kies voor een tabel met 3 kolommen en 4 rijen ziet mijn tabel er in de generator zo uit:

Aan de linkerkant is het mogelijk om direct tekst in de cellen te plaatsen. Ook wanneer u de tabel in WordPress geplakt hebt, is het nog mogelijk om deze tekst aan te passen. De ingevulde teksten in de verschillende velden kunnen met behulp van het tabel-icoontje worden bewerkt.

Nadat de tabel naar wens is, is het een kwestie van de code kopiëren (zichtbaar aan de rechterkant) en deze in uw WordPress bericht of pagina te plakken. Op de webpagina ziet het er dan zo uit:

Ook hier is het – net als bij de HTML versie – belangrijk dat u de code in het ‘Tekst’ veld plakt en niet in het ‘Visueel’ veld.

Een andere mogelijkheid is om een tabel te maken met HTML-generator (https://www.tablesgenerator.com/).

Daarbij klikt u op Table > Set size.
Selecteer het aantal kolommen en rijen. De tabel kan aangepast worden door op vlakjes van de tabel te klikken en daarin tekst toe te voegen. Tabel klaar?
Dan kunt u deze kopiëren door op de button “Copy to clipboard” te klikken. Deze gekopieerde code kunt u vervolgens op de gebruikelijke manier in uw website plaatsen.

Belangrijk: Wanneer u de HTML code in uw WordPress website gaat plakken, is het essentieel om te weten dat u dit in het ‘Tekst’ veld doet en niet in het ‘Visueel’ veld. Hieronder staat wat ik bedoel en waar u de HTML code kunt plaatsten.

4) De Plug-in optie

Misschien is de HTML-generator voor sommige gebruikers één stap te ver. Kies dan voor de optie “werken met een plug-in”.

Er zijn nogal wat plug-ins die het mogelijk maken om een tabel aan WordPress toe te voegen. Verreweg de populairste gratis plug-in om mooie tabellen mee te maken is TablePress.

Ga naar het dashboard van uw site en selecteer “nieuwe plug-in”. Zoek TablePress en installeer en activeer deze.

Na installatie verschijnt in de navigatiebalk van het dashboard het “TablePress” menu. Ziet u de plug-in niet direct? Refresh dan de pagina; in 9 van de 10 gevallen zal dan de functie in de balk verschijnen.

Klik in dashboard op de menuknop “TablePress – Nieuwe toevoegen”. Het onderstaande scherm verschijnt dan.

Geef de tabel een naam en een omschrijving. Vervolgens klikt u op “Tabel toevoegen”. De tabel kan nu worden gevuld met content.

Na invulling van de tabel kunt u op “Voorbeeld” klikken. Voldoet de tabel aan uw wensen? Klik dan op “Wijzigingen opslaan”.
Nu is het mogelijk om met behulp van een shortcode de tabel op elke willekeurige plaats op uw website te tonen.

De shortcode kunt u vinden door weer terug te gaan naar het TablePress menu, op ‘Alle tabellen’ te klikken en met de muis op de desbetreffende tabelnaam te gaan staan. U ziet nu ‘Toon shortcode’ staan.

Kopieer de shortcode van de tabel en plak die in de WordPress Pagina of in het bericht.

Elke tabel krijgt een unieke shortcode. Op die manier kunnen eenvoudig meerdere tabellen aan pagina’s en/of berichten worden toegevoegd

Tot besluit
Dat was het dan. Aan u de keuze met welke van de vier mogelijkheden u wilt werken voor het geval u een tabel op uw WordPress site wilt integreren.

Maar welke manier kunt u het beste gebruiken? Dat hangt helemaal ervan af of u veel gebruik gaat maken van tabellen op uw website.

Bij éénmalig of weinig gebruik van tabellen, dan zou de voorkeur uitgaan naar een tabel die gemaakt is met Word, HTML of een table generator. Dit zijn allemaal tabellen die als simpele HTML-code op uw website komen te staan.

Komen er veel tabellen voor en wilt u daarnaast ook nog extra opties hebben zoals filters en zoekfuncties in de tabel, dan is de plugin TablePress aan te bevelen.

 

Dit artikel werd mede mogelijk door de waardevolle informatie die ik uit artikelen van onlinemetwp en supersnelonline heb gehaald. Daarvoor mijn hartelijke dank.

Leave a comment

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.