Tabeller – WP TablePress

Av / 9. mars 2020 / Tabeller

WordPress har en egen, innebygd funksjon for å opprette tabeller. I dette eksempelet ønsker jeg imidlertid å vise hvor enkelt det er å opprette og vedlikeholde tabeller (prislister) ved å benytte en egen utvidelse (plugin) som heter WP TablePress,

Installere WP Table Press – utvidelse (plugin)

  • I kontrollpanelet velger du Utvidelser (Plugin) > Legg til Ny (Add New)
  • Som Nøkkelord skriver du WP Tablepress. Se bildet til høyre. Du kan evt. klikke på bildet for større versjon
  • Du får opp en rekke alternativer. Velg TablePress (pkt. 1)som vist på bildet under
  • Klikk på Installer nå, deretter på Aktiver (pkt 2)
  • I menyen til venstre, vil du nå få frem et nytt valg (se pkt 3)

Opprette en ny tabell i TablePress

  • Velge TablePress >  Legg til ny tabell (Add New Table)
  • Dialogboksen under kommer frem, der du kan angi antall rader og kolonner, samt gi tabellen et navn.
  • Når du har satt inn ønsket informasjon, velger du Legg til tabell.
  • Under Tabellinformasjon vises Tabell ID, tabellens kortkode, tabellnavnet, samt antall rader og kolonner du anga.
  • Du kan fylle radene med ønsket informasjon. Bru tabulator-tasten til å gå fra celle til celle.
  • Fyll ut feltene og trykk Lagre endringer når du er ferdig.
  • Kopier også kortkoden dersom du skal sette tabellen inn i et wordpress-dokument.
    Hvordan du går frem, forklares lenger nede i dokumentet.

Table Press – Oversikt over alle tabeller

I eksempelet under har jeg tatt printscreen av tabeller jeg har laget for en kunde, Tønsberg Medlab AS.

  • Ved å velge TablePress > Alle tabeller (pkt 1), får du oversikt over tabeller du har laget, de står listet numerisk med eget navn (pkt 2)

Ved å føre musepekeren over tabellnavnene, får man frem de vanlige WordPress-valgene. Man kan kopiere / eksportere / slette etc. – Velg Rediger (pkt 1).


Sette inn tekst og tall i cellene

Som vist i eksempelet under, er alle cellene like brede, men dette vil endre seg på selve nettsiden, avhengig av hvor mye tekst som er i hver enkelt celle

  • Punkt 1 viser tabellens kortkode som automatisk genereres av WordPress. Denne koden skal du benytte senere for å sette tabellen inn på WordPress-siden, eller på et blogginnlegg
  • Punkt 2 viser tabellens navn, som du selv angir slik at den skal bli enkel å finne. Om ønskelig kan du også angi en beskrivelse, men det er ikke nødvendig
  • Tabellens øverste rad (pkt 3) er overskriftsraden
  • Ved å klikke på pilene kan du endre rekkefølgen – stigende/synkende (pkt 4)
  • Under Punkt 5 er det satt inn en html-kode for å angi at celleinnholdet skal være høyrestilt. Cellene inneholder priser, og tall bør stå til høyre i cellen. Koden som er satt inn, kan sees i bildet til høyre. Som eksempelet viser, er det KUN tallene som må markeres ved redigering av prisen.

Legge til / Slette rader og/eller kolonner

TablePress er intuitivt. Under Tabellmodifisering kan du legge til / slette / duplisere rader og kolonner

  • Om du ønsker å slette en rad, klikker du i ruten til venstre for raden (pkt1)
  • Under Valgte rader velger du Slett (pkt 2)
  • Om du ønsker å legge til en eller flere rader, angir du ønsket antall og velger Legg til (pkt3)
  • Om du ønsker å legge til en eller flere kolonner, angir du ønsket antall og velger Legg til (pkt4)


Angi hvor mange rader som skal vises

  • Under Funksjoner fra DataTables Javascript-biblioteket (pkt 1), angir du hvor mange rader per side som skal vises når tabellen settes inn på en wordpress-side.
  • Husk å Lagre endringene når tabellen er ferdig (pkt 2)
  • Under hver hovedgruppe finnes en ekspand/collapse-knapp (pkt 3). Personlig liker jeg å skjule valgene under hvert felt når jeg har satt inn ønsket informasjon.


Sette tabellen inn i et WordPress-dokument eller blogginnlegg

  • Husk å kopiere Tabellens kortkode (pkt 1)
  • Før du forlater Table Press, må du alltid Lagre endringene (pkt 2).
  • Tabellen kan enten settes inn på en Side eller et Innlegg (i eksempelet under er den satt inn på en side
  • Velg Tekst-fanen der du kan se html-kodene av det du skriver inn (pkt 1)
  • Lim inn tabellens kortkode (ID) (pkt 2)
  • Klikk på Oppdater (pkt 3)
  • Deretter velger du Vis side (pkt 4)
  • Tabellen vises på kundens webside (pkt 1)
  • Som angitt i TablePress vises 11 linjer (pkt 2)
  • Det er mulig å søke etter bestemte produkter (pkt 3)
  • Alle priser er høyrestilte – jfr. html-koden som ble satt inn i cellene (pkt 4)

Hvordan redigere en tabell fra websiden

  • Når man er logget inn som admin på WordPress-siden, kan man gjøre endringer på tabellen (prislisten) ved å klikke Rediger nederst på tabellen (pkt 1)
  • Man kommer direkte til TablePress-tabellen der alle endringer gjøres.
  • Husk å Lagre endringene slik at tabellen på websiden blir oppdatert.