HomeWordPressWordPress tabel maken en invoegen

WordPress tabel maken en invoegen

WordPress tabel

WordPress kan ontzettend veel, maar iets wat ontbreekt, is een eenvoudige optie om een WordPress tabel te maken en in te voegen.

Tabellen kunnen erg belangrijk zijn wanneer je data wilt weergeven op je website.

Het is nu alleen mogelijk om in WordPress een tabel te maken door zelf te spelen met HTML en CSS. Wanneer je hier echter geen verstand van hebt is het een onmogelijke opgave.

In dit artikel laat ik je een manier zien om tabellen te maken in WordPress berichten en pagina’s, zonder dat je je hoeft te verdiepen in HTML en CSS.

Video uitleg: Tabel maken in WordPress

In onderstaande video kun je zien hoe je in WordPress eenvoudig een tabel kunt maken.

Wil je graag de uitleg in tekst lezen, dan kun je hieronder verder lezen.

WordPress tabel maken met TablePress

Het eerste wat je moet doen is de plugin TablePress installeren en activeren. Wanneer je de plugin geactiveerd hebt, kun je deze in het menu terugvinden zoals je hieronder ziet.

Tablepress menu

Om een WordPress tabel aan te maken moet je klikken op “Add New Table”. Je krijgt dan het volgende te zien.

WordPress tabel maken

Bij Table Name moet je de titel van je tabel toevoegen en de Description hoef je niet verplicht in te vullen. Verder kun je ook nog instellen hoeveel rijen en kolommen de tabel moet hebben, maar dit kun je achteraf altijd nog aanpassen.

Klik tot slot op “Add Table” wanneer je alles hebt ingevuld.

WordPress tabel invullen

Je komt nu bij het gedeelte waar je de gegevens in de tabel kunt invullen en rijen en kolommen kunt toevoegen en verwijderen. Tevens kun je ook nog de rijen en kolommen met elkaar omdraaien indien dit nodig is.

WordPress tabel invullen

Onder de tabellen en kolommen zijn ook nog enkele andere opties die je kunt instellen. Zo kun je bijvoorbeeld instellen of een bezoeker de tabel kan sorteren of niet. Bekijk de opties rustig en bedenk voor jezelf welke het handigste zijn voor de WordPress tabel die jij maakt.

Wanneer je alle opties hebt ingesteld kun je onderaan op “Save Changes” klikken.

WordPress Tabel invoegen in je blogbericht of pagina

Nu je een tabel hebt aangemaakt moet je de tabel alleen nog in een blogbericht of pagina zien te krijgen. Open de pagina of blogbericht waarin je de tabel wilt hebben en zoek en klik op het volgende icoontje in de visuele editor: tablepress-icon

Het enige wat je nu nog hoeft te doen is op “Insert Shortcode” te klikken om de tabel aan je blogbericht of pagina toe te voegen.

Je hebt nu een tabel gemaakt in WordPress

Tabelpress tabel

Je hebt nu een tabel in WordPress aangemaakt en ingevoegd die er ongeveer uitziet zoals het tabel hierboven. Je hebt hier zoals je ziet geen enkele regel HTML of CSS voor hoeven te gebruiken.

Wil je meer bezoekers op je blog?
Meld je aan en ontvang 15 verschillende manieren om vandaag nog meer bezoekers te krijgen op je blog + gratis e-mail updates.
Ik vind spam net als jij vervelend

52 reacties

  1. Beste Maikel,

    Mag ik jou iets vragen over Tablepress, want ik loop helaas vast.
    Ik heb nu een mooie tabel maar ik wil van colom C, de cellen 2 t/m 6 in een andere tekstkleur.
    Tot nu toe is alles me gelukt, alleen een of meerdere cellen aanpassen lukt me niet..
    Ik hoop dat jij het antwoord weet, want ik vind weinig NL uitleg helaas.
    Alvast vriendelijk bedankt.
    Mvg, Chantal.

    • Ik weet niet hoeveel kennis je hebt van CSS, want dit zul je nodig hebben om dit te bereiken met deze plugin.

      Iedere rij van links naar rechts en van boven naar beneden heeft een aparte class. Bij plugin options kun je ervoor kiezen om gebruik te maken van een custom css, je kunt dus voor iedere class een andere kleur instellen met de juiste CSS code.

  2. Beste Maikel,
    Bij de laatste handeling, de tabel plaatsen op een pagina met behulp van de editor verschijnt niet de tabel maar de volgende code:
    [table id=1/]. Hoe krijg ik wel een tabel? Groet, Derk

    • Hallo Derk,

      Het klopt dat je alleen de shortcode in de editor ziet verschijnen en niet de tabel zelf. Op de pagina zelf zal de tabel wel verschijnen, je kunt dit controleren door bijvoorbeeld je concept te bekijken of de pagina al te publiceren.

  3. Hallo,
    Als ik de pagina wil inladen, dan komt de 1e foto er eerst klein op. Hoe kan dit?
    Alvast hartelijk dank voor uw reactie.

    vr.gr. Nancy

  4. Hallo Maikel, Fijn om eindelijk eens een tabel maker tegen te komen op wordpress. Heb er al lang naar gezocht. Ik vraag me alleen nog af als je bijv 3 kolommen hebt en diverse rijen of er dan een flexibel blok kan ontstaan. Als ik kijk naar de lisjten en ik heb in kolom 1 1 regel tekst staan en in de 2e. 3regels tekst staan worden die met 1 regel tekst ineens ook hoger. Kan je me misschien een hint geven of daar mogelijk nog een andere optie is bij Worpdress. Ik zoek eigenlijk iets wat lijkt op de diverse gratis zoekpagina’s maar dan binnen mijn eigen domein. Elke tip =welkom. Vrg pensioniste Mieke

    • Zoiets als startpagina bedoel je? (laat het maar weten als je iets anders bedoelt) Ik denk niet dat je dit zonder html/css kennis precies zo kunt bereiken.

      Stel je wilt 3 aparte kolommen naast elkaar hebben met verschillende groottes, dan moet je wanneer je met tabellen werkt in principe 1 grote tabel plaatsen met daarin weer 3 verschillende tabellen. De kolommen staan dan zeg maar “los van elkaar” omdat het 3 verschillende tabellen zijn.

      Tegenwoordig is dit ook te bereiken zonder tabellen, maar met div en de juiste CSS codes.

      Succes

  5. Giovanni Lugas

    Beste Maikel,

    Ik heb nu Tablepress uitgepakt. In mijn wordpress dashboard, onder weergave, is er geen plugins menu maar alleen de widgets. Hoe kan dat?
    Alvast bedankt.

  6. Kun je ook de celhoogte (rijhoogte) en de kolombreedte aanpassen

  7. Maikel,

    Is het mogelijk om waarden van de tabel ook als link aan te duiden. Ik gebruik de tabel voor het aangeven van beschikbare uren, het zou makelijk zijn wanneer clienten direct op he uur kunnen klikken om bij het contactformulier te komen.
    Alvast bedankt

  8. Maikel,

    Het is inmiddels gelukt….Thanks voor de tip over tablepress, werkt prima.

  9. Hai Maikel,

    Perfecte uitleg, maar ik zit nog met een probleem ik heb tabel’s gebruikt om video’s te plaatsen zie http://www.polennieuws.nl/videos-polennieuws-nl-2/ de kleuren komen met de layout niet overeen en die wil ik dus aanpassen. Heb is Stylesheet. css zitten kijken maar kan niets vinden, jij spreekt over custom.css maar waar staat dat in WP?
    Iets met bomen en bos :-)

  10. Hallo,

    Ik wil op mijn site meerdere tabellen plaatsen. Kan bij maar 1 tabel de css wijzigen hoe kan dat??

    • Het is wel degelijk mogelijk de stijling in CSS te wijzigen van meerdere tabellen. Alle tabellen hebben een uniek id die je kunt gebruiken in de custom css. Voor tabel 1 is het “tablepress-1″, voor tabel 2 is het “tablepress-2″, etc.

      In custom css kun je een tabel aanhalen door #tablepress-1 (of een andere tabelnummer) te gebruiken.

  11. Hier heb ik naar gezocht! Veel dank hiervoor Maikel. Ik heb het uitgetest
    en ga hier zeker mee aan de slag.

  12. Ik heb de plugin TablePress gebruikt om een tabel te maken, maar bij het publiceren komt er Edit te staan onder de tabel en het lijkt alsof iedereen nu in het dashboard van WordPress kan komen om mijn site te veranderen!
    Hoe kan ik dat Edit wegkrijgen?

    • Je hoeft je hier niet ongerust over te maken, Edit staat er alleen wanneer je bent ingelogd op de website.

      Bezoekers van je website krijgen dit dus niet te zien en kunnen niets bewerken. Log maar eens uit op je website en controleer het.

  13. Bedankt, je hebt gelijk! Ik dacht dat ik al uitgelogd was…

  14. Fijn deze vraagbaak ! Ik ben een beginnend wordpresser . . . . kan ik in jouw voorbeeld van de tabellen ook de regelafstand aanpassen en zo ja . . . hoe ?

  15. Hallo,
    Ik gebruik tableexpress o.a. om een paar foto’s te schikken (bestuur)
    . Nou wil ik in de tekst daaronder ook een email adres als link opnemen. Kan dat? Staat nu als tekst maar geen link daaronder. Heb al geprobeerd met mailto maar dat doe ik verkeerd of dat werkt niet.
    Wie heeft de tip om dit op te lossen?

    Al vast bedankt
    Henk

  16. Ik importeer de gegevens voor de tabellen die ik gebruik vanuit Excel. Echter, wat ik ook probeer, datums zet TablePress om naar de tekstnotatie (een getal van vijf cijfers). Is er een truc om dit goed om te laten zetten, want gezien de hoeveelheid data is het een monnikenwerk om dit allemaal handmatig aan te passen.

  17. Dag Maikel,
    we maken zeer dankbaar gebruik gemaakt van TablePress m.b.t. ons evenement. We kunnen perfect laten zien wie er allemaal heeft ingeschreven e.d.

    Toen we Tp pas in gebruik hadden genomen konden de gebruikers sorteren, zoeken en het aantal regels weergeven want dat heb ik ook in de tabel zo aangegeven met de opties hiervoor. Echter, nu werkt het niet meer en ik heb écht niets veranderd en de opties staan nog gewoon aan!!

    Toch jammer want dat was een mooie optie voor de gebruikers. Hoe kan dat nou??

    Alvast bedankt,
    Corné Koolen
    Stichting Rijzendeweg Challenge 4 KWF Kankerbestrijding

    • Wanneer alles nog goed ingesteld staat zal er waarschijnlijk een javascript probleem zijn. Dit kan door het thema komen dat je gebruikt of een andere plugin. Aangezien eerst alles het wel deed zal het waarschijnlijk door een andere plugin komen.

      Heb je toevallig een plugin geïnstalleerd en ben je daarna erachter gekomen dat dit niet meer werkt? Zet dan eens deze plugin uit en kijk of het dan wel weer werkt.

      Wanneer je het niet weet kun je het beste alle plugins (op tablepress na) deactiveren om te bekijken of dan alles wel weer werkt. Wanneer dit het geval is kun je daarna 1 voor 1 alle plugins weer inschakelen om te achterhalen welke plugin het probleem veroorzaakt. Vervolgens kun je het beste een alternatief zoeken voor deze plugin.

  18. Beste Maikel,

    Op mijn website plaats ik foto’s van de tassen die ik maak, met daarbij een omschrijving. Het lukt niet om de foto’s netjes uit te lijnen. Er staat of teveel witruimte tussen, of het staat door elkaar. Nu kreeg ik via de Live chat van WordPress de tip om de foto’s in een tabel te plaatsen. Dus de plugin geinstalleerd. Maar begrijp ik nu goed dat ik deze tabel vooraf moet vullen en daarna op de pagina plaatsen? Ik hoopte op een fysieke tabel die ik per pagina kan vullen.
    Dus wat ik nodig heb is: tekst, daaronder: foto’s (max 3 naast elkaar), daaronder 2 witregels, en dan weer tekst, foto’s, witregels, etc. Per tas heb ik dan een tabel nodig.
    Hoe kan ik dit het beste aanpakken?
    Alvast vriendelijk dank voor je reactie,
    groeten,

    Eri

    • Met TablePress kun je zoveel tabellen maken als je wilt en vervolgens met een shortcode toevoegen aan de pagina. Wanneer je gebruik wilt maken van deze plugin is het dus een kwestie van de tabellen maken en deze dan met een shortcode toevoegen. Op de pagina kun je dan een stukje tekst plaatsen, shortcode van tabel toevoegen, witregels maken en dit blijven herhalen.

      Wil je in de editor al direct de tabel zien, dan kun je zelf een tabel maken met HTML of dit doen met behulp van de plugin MCE Table Buttons.

      Wanneer je deze plugin installeert krijg je een extra icoontje in de editor te zien waarmee je een tabel kunt toevoegen. Je kunt bij tabelcel eigenschappen de breedte en hoogte van de cellen bepalen.

      Het is wellicht ook een optie om met kolommen te werken. Zie Column Shortcodes om te bekijken wat hier allemaal mogelijk mee is.

      De beste aanpak zal dus zijn met de plugin die jou handig/prettig lijkt om mee te werken.

  19. Hoi Maikel,

    Ik heb een vraagje m.b.t. de CSS van tabelpress.
    Ik wil in het overzicht van onze leden de namen per cel centreren. Ik weet dat dit in de CSS kan, maar ik kan de CSS van tabelpress nergens vinden. Kun jij mij uitleggen waar ik deze vindt?

    Groet,
    Michael

    • Bij Plugin options kun je CSS toevoegen. Om het huidige CSS van een tabel te bekijken kun je bijvoorbeeld in Firefox gebruik maken van de add-on Firebug, in Chrome de hulpprogramma’s voor ontwikkelaars. Zo is er in alle browsers wel iets te vinden waarmee je het kunt zien.

      Een andere optie is om direct in het CSS bestand te bekijken, je kunt dit doen door de plugin naar je computer te downloaden.

  20. Hoi Maikel,

    ik ben afgelopen weekend overgestapt van WP table naar Tablepress en kan nu eindelijk mooiere tabellen maken. Nu heb ik geen ervaring met CSS en ben begonnen kleuren toe te voegen. Een rij lukt me wel, 2 verschillende rijen ook. Maar een kolom of een aparte cel lukt me niet.

    Uit de FAQ heb ik dit voorbeeld gehaald om de achtergrond van 1 cel te wijzigen:

    .tablepress-id-32 .row-3 .column-A {background-color: #99cd32;}

    Wat doe ik fout?
    He jij enig idee?

    Bedankt

    Rene

    • Ik zal al eerste naar “tablepress-id-32″ kijken, tenzij je al 32 tabellen hebt gemaakt met TablePress. Meestal begint het altijd met tablepress-id-1. Tevens werkt tablepress met column-1, column-2, etc. en niet column-A (wellicht in het verleden wel).

  21. Hallo Maikel, bedankt voor je snelle reactie.

    Ik heb op mijn site inmiddels meer dan 40 tabellen staan, dus de verwijzing naar tabel 32 klopt wel, en het werkt ook, omdat ik al een CSS verwijzing heb om een bepaalde regel in kleur te veranderen.

    Nu wil ik van1 cel de kleur wijzigen:
    de FAQ zegt het volgende:
    .tablepress-id-N .row-X .column-Y {background-color : # ff0000 ; }

    Ik wil bijvoorbeeld de cel C5 wijzigen. (Tablepress werkt met regel nummers en de kolommen zijn voorzien van hoofdletters A, B, C enz.)
    ik heb de verwijzing gewijzigd naar:

    .tablepress-id-32 .row-5 .column-C { background-color : # ff0000 ;}

    Dit werkt niet, ook heb ik de regelnummers in de CSS code een letter gegeven en/of de kolommen een cijfer, maar ook dat helpt niet. Ook heb nu eerst maar ik de andere regel in het aangepaste CSS verwijderd, zodat de aanpassing uitsluitend op de cel van tabel 32 slaat.

    Heeft een nog een tip, of kunt u het testen in een eigen tabel?

    Bedankt,

    met vr. groet,

    Rene

    • Het werkt bij mij lokaal goed als ik het volgende gebruik:
      .tablepress-id-1 .row-5 .column-3 { background-color: #99cd32;}

      Bij mij is het kolom een cijfer in plaats van een letter, vandaar dat ik dit ook in mijn eerste bericht zei. Ik zie bij mij gewoon simpelweg nergens een letter bij een kolom staan die ik zou kunnen gebruiken.

      Op welke pagina van je website staat je tabel? Dan kan ik even kijken en dan hebben we ook sneller de oplossing.

  22. Maikel,

    ontzettend bedankt, het werkt. (de tabellen zitten allemaal achter een inlog code voor betalende leden op de site, als je me mailt kan ik je wel een test account geven).

    Ik heb letterlijk jouw code geknipt en geplakt, en alleen id-1 verandert naar id-32
    Toch vreemd, ik zie echt boven alle tabellen een letter boven iedere kolom, (net als in excel).

    Nogmaals bedankt, voor je snelle reactie en je hulp.

    Rene

    • Fijn om te horen dat het gelukt is.

      Je ziet inderdaad een letter in het WordPress dashboard als je een tabel maakt en aanpast, dit staat echter los van de code. Zelf bekijk ik het altijd via de code in Firefox met de add-on Firebug. In chrome heb je tegenwoordig ook ongeveer hetzelfde ingebouwd zitten (hulpprogramma’s voor ontwikkelaars).

  23. Dag Maikel,

    na jouw fantastische hulp de vorige keer heb ik nog een aanvullende vraag:
    ik heb op mijn site op diverse pagina`s verschillende Tablepress tabellen , waarin in iedere tabel verschillende berekeningen en met jouw hulp nu ook kleuren voorkomen.

    Is het ook mogelijk, om (net als de tabbladen in excel) uit 1 of meerdere tabellen een getal in een cel of een uitkomst te halen en deze te gebruiken in een tabel met een totaal overzicht? (ter verduidelijking: nu moet ik iedere dag van alle pagina`s de uitkomst van een berekening halen, deze opschrijven op papier, dan naar de home page gaan, en daar alle genoteerde getallen in een tabel over te typen. Die hoofdtabel maakt er vervolgens wel weer een totaal overzicht van)

    met vr. groet,

    Rene

    • Er zijn natuurlijk altijd mogelijkheden om bepaalde dingen voor elkaar te krijgen. Wanneer je niet bekend bent met programmeren zal dit echter een lastig klusje worden.

      Voor zover ik weet zijn er verder geen plugins die dit zomaar kunnen.

  24. Hallo Maikel,

    Met behulp van deze blog is het gelukt om de datum in excel ook goed te tonen in wordpress tabel door het excelbestand als .csv bestand op te slaan. Wat nu nog niet goed wordt weergegeven zijn tekens. Weet jij hoe (of):
    1) Een euro teken kan laten weergeven, want nu wordt dit als vraagteken weergegeven
    2) Eeen symbool (pijltje) kan worden weergeven?

    Alvast bedankt voor jouw reactie.

Plaats een reactie

Je e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn gemarkeerd *

*

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>