Zelf tabel maken wordpress html css table th td

Logo cursus traing wordpress

Zelf tabel maken wordpress html css table th td

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 met het 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 -tags. 

tabel maken wordpress html css table th td
Tabel maken in wordpress html code table th td

Table head, table body table foot in html

Heeft je tabel geen , 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:

tabel maken wordpress html css table th td footer header
Tabel maken html table th td footer header

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 . Daar kun je bijvoorbeeld je tabel een rand (border) geven of de titel of de kolomkoppen vet maken of het 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.


Meer informatie over Zelf tabel maken wordpress html css table th tdof info?

Wil je meer informatie? Veel lezers met interesse in Zelf tabel maken wordpress html css table th td bekeken ook de onderstaande artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website of webshop sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Zelf tabel maken wordpress html css table th td?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Zelf tabel maken wordpress html css table th td en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven