HTML5 elementen voor tabel thead, tbody, tfoot

uit de cursus Basiskennis HTML (2014)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML (2014)

perm_identity Belinda | video_library 40 video's | query_builder 2:50:32

Leer webpagina’s te bouwen in html

In webdesign is de content gescheiden van de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd.

Doelgroep van deze cursus

Webdesigners, webbouwers, appbouwers en vormgevers voor webproducties. Iedereen die wil leren html-pagina’s te vervaardigen.

Wat ga je leren

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. En je leert hoe je de juiste mappenstructuur maakt voor webproducties. Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen voorkennis nodig. Algemene comptervaardigheden is wel aan te raden.

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

 

In deze video behandelen we de nieuwe html elementen voor tabellen.

HTML probeert browsers zoveel mogelijk inzage te geven in de inhoud van een pagina.

Tabellen worden gebruikt om gegevens geordend en gestructureerd te tonen.

Maar ook een tabel kun je nog weer onderverdelen in een 'header', een 'body' en een 'footer'.

En dat zijn dan ook de nieuwe html elementen in html.

Zo zie je in dit voorbeeld dat de eerste rij gereserveerd is om boven de kolommen titels te plaatsen.

Met de zogeheten table headers, th's.

En de rest van de tablel is gevuld met geordende gegevens.

En hiervoor gebruik je dan de table body.

En als laatste de nieuw toegevoegde html element 'table footer'.

Dat is als het ware een soortement van 'eind titeling' die altijd onderin de tabel geplaatst wordt..

We gaan even een voorbeeld bekijken van deze tabel in Firefox.

Hier bovenin staat de caption gecentreerd vormgegeven boven de tabel.

Dat is als het ware een algemene titel voor de gehele tabel.

Boven de kolommen bevinden zich een titel voor de kolommen.

Die uitlegt wat de onderliggende...

...kolomgegevens zijn.

En vervolgens rijen aan data, aan geordende informatie.

en in dit geval gaat het om bedrijven, sponsorbedragen en een kleine bedrijfsomschrijving.

En je zou bijvoorbeeld deze tabel ook willen afsluiten met een 'footer'.

Bijvoorbeeld het totaal van de sponsorbedragen zou je daar willen vermelden.

Nou we gaan de tabel nu semantisch opmaken met de table 'head', de table 'foot' en de table 'body'.

De table 'head', die gebruik je voor dat deel waarin je de kolomtitels hebt geplaatst.

En dat doe je met het html element thead.

En aan het einde sluit je deze af met einde thead.

Dat deel waarin alle gegevens germeld staan, dat noem je de table 'body'.

Dus dat begin hier en daar plaats ik nu tbody.

En aan het einde van deze gegevens plaats ik einde tbody.

Rest ons nog de table 'foot'. en dat is toch weer een beetje vreemd element.

Het wordt aangeraden om deze direct na de thead te plaatsen.

tfoot en je sluit hem af met einde tfoot.

Maar de browser zal hem sowieso altijd onderaan de tabel plaatsen.

Ook in de tfoot wil ik rij met kolommen. en dat doe ik door een table row te starten.

tr en uiteindelijk ook weer te eindigen met einde tr.

En binnen de table row maak ik een viertal kolommen op.

Ook al wil je niet in elke kolom inhoud plaatsen.

Om de tabelstructuur in stand te houden is het belangrijk dat je de kolommen wel aanmaakt.

In de eerste kolom wil ik de tekst 'totalen' plaatsen.

Ik kan deze table data kopiëren en vervolgens plakken.

De tweede kolom, daarin wil ik het aantal sponsors optellen. In dit geval zijn het er .

En ik plak nogmaals table data en ik vervang de tekst 'totalen' voor 'totaal sponsorbedrag'.

En dan wil ik nu een euro teken plaatsen en hiervoor gebruik ik de html entiteit €.

En in totaal is er voor euro gesponsord.

En in de laatste kolom, die ik plaats heb ik geen tekst, dus die laat ik leeg.

Dan bekijken we nu een voorbeeld van deze pagina in Firefox.

Dan zie je dus dat die footer inderdaad onderin de tabel geplaatst is.

Ook al heb ik hem in mijn broncode onder de table header geplaatst.

Hij wordt sowieso door de browser afsluitend van de tabel geplaatst.

En nu is het voor een browser duidelijk.

Het bovenste gedeelte is een table header en beschrijft de titels van een tabel.

Het inhoudelijke gedeelte staan in de table body.

En deze tabel wordt afgesloten met een footer, met daarin eindconclusies van de kolommen.

En met deze gegevens zijn de browsers nog beter in staat om de pagina goed te kunnen indexeren.