Tabellen maken in wordpress met html

Tabellen zijn natuurlijk nog steeds heel bruikbaar om bepaalde onderdelen van een webpagina netjes weer te geven, zoals een productoverzicht of prijslijst.

• Je kan tabellen maken met het Gutenberg tabellen blok.
• Een WordPress plugin gebruiken
• Je kan het ook in html zelf maken

Handleidingen voor opties tabel maken

Zelf tabel in html maken

Een tabel als geheel wordt aangegeven met een set table tag. Daarbinnen kan eerst een tabeltitel staat, tussen caption-tags. 

Table head, table body table foot in html

Heeft je tabel geen titel, dan volgen direct na de openings-tag van de tabel de table-head (haakje)thead(haakje)en de table body en eventueel de table foot:

Zowel de table head, de table body en de table foot bestaan uit hun beurt uit een of meer table rows (haakje)tr(haakje),
met binnen elke rij een of meer tabelcellen (haakje)th(haakje) in de table head 
of (haakje)td(haakje) in de andere rijen).
De afkorting (haakje)td(haakje) staat voor table data, ofwel: tabelgegevens.

De tabelcel in de table foot beslaat in dit voorbeeld twee kolommen, dus daarom is er aan de openings-tag van de cel binnen de laatste rij nog toegevoegd: colspan=”twee”

Vormgeving van een html-tabel en CSS

Om een html-tabel vorm te geven moet je een CSS stylesheet maken. Dit staat meestal in je CSS van je WordPress thema. Daar kun je bijvoorbeeld je tabel een rand (border) geven of de titel of de kolomkoppen vet maken of het lettertype van de regel onderaan verkleinen. Bijvoorbeeld:

.tabel { border: 2px solid darkgrey; border-collapse: collapse; }
.tabel caption { font-variant: small-caps; font-size: 1.3em; }
.tabel thead { background-color: darkgray; }
.tabel th { text-align: left; font-weight: bold; padding: .75em; }
.tabel td { border-bottom: 1px solid lightgrey; padding: .75em; }
.tabel tfoot { font-size: .8rem; text-align: center; border-top: 2px solid darkgrey; }

Voorbeeld van een tabel in HTML maken

See the Pen Tabela responsiva com HTML e SCSS by minutofrontend (@minutofrontend) on CodePen.