Semantische elementen voor tabel -theader-, -tbody-, -tfooter-

uit de cursus Basiskennis HTML5 (2019)

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 HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met 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

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

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.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Open het bestand semantisch.html uit de Local Root Folder.

Neem eerst even de tijd om de tabel te analyseren voordat je verder gaat.

Voor een tabel zijn er een aantal specifieke semantische html-elementen.

Dat zijn de tablehead, de tablebody en de tablefoot.

Als je er één wilt gebruiken moet je ze allemaal toepassen. Want ze horen bij elkaar.

Ook de volgorde is van belang. Eerst de tablehead, dan de tablebody en als laatste de tablefoot.

De thead beschrijft de koppen van de kolommen die je met de html-elementen th's opmaakt.

De tbody omsluit de inhoud van de tabel.

En de tfoot beschrijft de uitkomst van de kolommen in de tabel.

Deze zal altijd onderaan de kolommen van de tabel geplaatst worden.

Ik ga de thead, tbody en tfoot toepassen in deze tabel.

De thead plaats je na het tabele-element en de caption.

Ik knip de eerste rij met de verklarende titels van de kolommen weg met Commando X .

En plaats het thead-element.

Dan kan ik daar tussen de inhoud weer terug plaatsen met Commando V.

Dan selecteer ik de volledige inhoud van de tabel.

Ook deze knip ik deze weg met Commando X. En ik plaats hier het html-element -tbody-.

En plak de inhoud weer terug met Commando V.

Dan eindig ik met de tfoot.

Deze plaats je na de tbody.

Hierin plaats ik de eindconclusies van de kolommen.

Ik start eerst een rij op met -tr-.

En plaats daar binnen het aantal table-data (td).

Dan kan ik deze table-data kopiëren en hier tussen plakken.

Ik bewaar even mijn document want dan ziet alles er weer netjes uit.

Maak even wat meer ruimte aan de onderkant. Dan zien we het beter in beeld.

En dan plaats ik nog de juiste inhoud.

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 plaats ik het woord 'Totalen'.

En in de tweede kolom wil ik het aantal sponsors optellen.

Totaal sponsors is dan drie.

In de derde kolom tel ik de bedragen bij elkaar op.

Voor het euro-teken gebruik ik de html entiteit euro tussen het &-teken en de puntkomma.

En bij elkaar opgeteld is dit vijfenzeventig euro.

De laatste kolom behoeft geen uitleg.

Dus daar haal ik de inhoud van weg, deze blijft leeg.

Het gebruik maken van deze semantische tabel-elementen wordt zeer gewaardeerd door zoekmachines.

Ze kunnen dan beter inzicht krijgen in de inhoud van de tabel.

Dat is positief voor de indexering. Maar ook browsers hebben hier baat bij.

Door gebruik te maken van de thead, tbody en tfoot kan de browser bijvoorbeeld scrollbalken in beeld gaan brengen.

Als de inhoud van de tbody meer rijen bevat dan op de pagina kan worden weergegeven.

De thead en de tfoot blijven dan in beeld terwijl je wel door de inhoud van de tbody kunt scrollen.

Ook kun je voor hele lange tabellen ervoor zorgen...

dat bij het printen over meerdere pagina's op elke pagina...

Zowel de thead aan de bovenkant van de tabel wordt geprint als de tfoot op elke pagina aan de onderkant van de tabel wordt geprint.

Het is dus aan te raden om bij elke tabel gebruik te maken van deze semantische tabel-elementen.