Starten met een tabel -table, -tr-, -td-, -caption- en -th-

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.

In dit hoofdstuk maken we gebruik van de Local Root Folder htm--.

Ga naar Bestand > Open map en wijs de map htm-- toe.

Klik op Open en activeer dan de index.html.

Tabellen gebruik je in html om gegevens gestructureerd en overzichtelijk weer te geven.

Zoals in dit voorbeeld. Voor de prijslijst is een tabel gemaakt.

Elke tabel bestaat uit een aantal rijen en een aantal kolommen.

Afhankelijk van de hoeveelheid inhoud die wilt organiseren.

In dit voorbeeld zie je duidelijk de rijen en de kolommen.

Elke rij bestaat uit een aantal cellen.

En in een cel kun je inhoud plaatsen.

Deze inhoud kan tekst zijn maar ook plaatjes, zelfs weer een hele tabel.

Dat is weliswaar niet aan te raden.

Want hoe complexer je tabellen maakt, hoe sneller deze weer instabiel kunnen worden.

Voor een tabel gebruik je het html-element -table-.

Deze start je op en sluit je ook weer af.

Binnen het table-element bouw je de rijen van de tabel op met het tr-element.

Dat staat voor tabel-row.

In de rij bepaal je het aantal kolommen met het td-element, td staat voor table-data.

Ik selecteer deze code en plak hem nog een aantal keer onder elkaar.

Elke td staat voor een kolom.

Dan kopieer en plak ik de hele rij nogmaals onder elkaar.

Ik pas de inhoud van de cellen aan zodat we deze kunnen herkennen.

En ik heb nu een tabel gemaakt met twee rijen en in elke rij staan drie kolommen.

Normaliter geef je randen en vulkleuren van de tabel op in een css-stijl.

Maar om het een en ander duidelijker te maken plaats ik binnen de table-element...

het attribuut border=" " en daarvoor gebruik ik één.

Zo nu kun je heel duidelijk zien hoe een tabel georganiseerd is.

Het natuurlijke gedrag van een tabel is dat de inhoud van de cellen ook de lengte ervan bepaalt.

Het natuurlijke gedrag van een tabel is dat de inhoud de lengte van de tabelcellen bepaalt.

Stel dat ik van deze tweede cel een langere zin maak. Bijvoorbeeld 'inhoud van cel twee'.

Dan zie je dus dat de tweede kolom veelbreier is geworden.

Ook de onderliggende tweede kolom is nu net zo breed.

Dus de kolommen in rijen overerven elkaars breedtes.

De derde cel geef ik ook een veel langere zin mee.

De browser bepaalt de verdeling van de kolommen.

Maak het venster breder en/of smaller.

En zie hoe de teksten automatisch naar volgende regels worden verplaatst.

En de kolommen gaan variëren van breedte.

Om een titel voor een tabel op te geven daarvoor gebruik je het caption-element.

Zie je dat de titel gecentreerd buiten de tabel wordt geplaatst?

Dit is natuurlijk weer de standaard vormgeving van de browser.

Wat je later ook weer met een eigen css-stijl heel anders kunt vormgeven.

Een goede titel is belangrijk want spraakmachines spreken deze eerst uit.

Dan kan men daarna beslissen of de inhoud van de tabel wel of niet interessant is.

En een goede titel komt ook een betere indexering van zoekmachines ten goede.

Ook de kolommen kun je voorzien van een titel of uitleg.

Hiervoor plaats je bovenaan de tabel opnieuw een rij met het tr-element.

De titels van de kolommen plaats je dan in th-elementen.

Standaard maakt Chrome de kolomtitels vet en staan deze gecentreerd boven de kolommen.

Standaard maakt Chrome de kolomtitels vet en staan deze gecentreerd boven de kolommen.