Instructie voor het maken van tabellen

 

Woord vooraf

  • Het nadeel van een tabel op je website is dat deze niet 100% responsive is op mobiel en afhankelijk van de breedte maar deels getoond wordt.
  • Het is goed om te realiseren dat het maken van tabellen op een pagina enig geduld en puzzelwerk vergt.
  • Er zijn plugins op de markt waarmee je tabellen kunt maken indien je geen of weinig kennis hebt van HTML.
  • Het nadeel van de meeste plugins is dat je de opmaak van een tabel niet kunt aanpassen.
  • Wanneer je in WordPress de Tekst-instellingen bekijkt (via het tandwiel in het grijze kader) dan zie je een tab Visueel en een tab Tekst. In de Tekst tab kun je eventuele HTML code plakken die automatisch omgezet wordt in het geval van een tabel. Zie de 2 afbeeldingen hieronder.

1. Een eenvoudige tabel

Fruit Aantal Prijs
Appels 1 kg €2,95
Peren 1 kg €2,50

2. Opmaak kolomkoppen en gecentreerde teksten

Fruit Aantal Prijs
Appels 1 kg €2,95
Peren 1 kg €2,50

Om kolomkoppen te maken zoals in de tabel hierboven ga je als volgt te werk:

  • Ga naar Tekstinstellen (via tandwieltje in grijze kader)
  • Selecteer met de muis de 1e rij waar de titels in staan
  • Klik nu op het tabelicoontje in de menubalk (2e van rechts)
  • Klik op Row / Row properties
  • Klik op Advanced en vul bij Background color de gewenste kleur (#407fae) in
  • Selecteer wederom de 1e rij en verander de kleur van de tekst met het 2e icoontje op de 2e regel in de menubalk (A met streep eronder)
  • Selecteer met de muis alle rijen in de tabel en klik op het tabelicoontje in de menubalk
  • Klik vervolgens op Row / Row properties en selecteer bij Alignment “center”

3. Tabel (kolommen) kleiner maken en achtergrondkleur aan rij toevoegen

Fruit Aantal Prijs
Elstar Appels 1 kg €2,95
Conference Peren 1 kg €2,50
Chiquita Bananen 1 kg €1,75

Om de tabel kleiner te maken inclusief achtergrondkleur in rij zoals in het voorbeeld hierboven ga je als volgt te werk:

  • Ga naar Tekstinstellen (via tandwieltje in grijze kader)
  • Selecteer met de muis de volledige tabel (alle rijen / cellen)
  • Klik nu op het tabelicoontje in de menubalk (2e van rechts)
  • Klik op Table / Table properties
  • In tab General vul je bij Table width 500px in
  • Selecteer vervolgens met de muis een volledige rij
  • Klik nogmaals op het tabelicoontje in de menubalk (2e van rechts)
  • Klik op Row / Row properties
  • In tab Advanced kies je bij Background color #f4fafc

    4. Zelf een tabel toevoegen in een nieuw bericht op basis van het ontwerp bij punt 3

    Op basis van bovenstaande voorbeelden en uitleg kun je als het goed is nu je eigen tabel gaan maken in een nieuw bericht. De voorbeeldtabel van punt 3 staat in de Divi bibliotheek zodat je deze eenvoudig kunt invoegen op elke plek en naar wens kunt aanpassen.

    Stappenplan

    • Ga naar de locatie in het bericht waar je een tabel wilt invoegen
    • Voeg eerst een nieuwe rij of module toe door op het groene resp. zwarte plusteken (+) te klikken
    • Kies vervolgens voor de tab Toevoegen vanuit bibliotheek en selecteer “Tabel”
    • Klik op “use this module” waarna de tabel verschijnt op de gewenste positie
      Fruit Aantal Prijs
      Elstar Appels 1 kg €2,95
      Conference Peren 1 kg €2,50
      Chiquita Bananen 1 kg €1,75