Cellen samenvoegen met colspan

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

Volgende video: Cellen splitsen met rowspan

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 colspan.html uit de Local Root Folder.

Ik heb een heel eenvoudige tabel voorbereid.

Om een en ander duidelijk in beeld te brengen heb ik het table-element uitgebreid met het attribuut width=" " vierhonderd pixels.

Normaliter doe je dit niet zo, maar gebruik je daarvoor een css-stijl.

Je leert nu hoe je cellen kunt samenvoegen tot één.

Stel dat je in de bovenste rij de eerste en de laatste twee cellen zou willen gaan samenvoegen.

Dan kun je dat doen door hiervoor het attribuut colspan te gebruiken.

Zet de cursor achter de eerste openingstag -td- van de eerste rij.

Typ daarin het attribuut colspan=" ", twee.

Je ziet direct dat de tabel niet meer klopt.

Met colspan twee heb je opdracht gegeven dat deze eerste cel nu twee cellen in beslag moet nemen.

Daarom zie je dat nummertje vier een nieuwe kolom is gaan vormen.

Ik zal dus één kolom moeten gaan verwijderen in de eerste rij.

Om ervoor te zorgen dat de optelsom weer op vier uitkomt.

Kijk nu klopt het aantal kolommen weer.

Om ook de laatste twee cellen samen te voegen.

Kopieer ik deze colspan en plaats ik deze ook bij de tweede td.

En ook nu is er weer één cel teveel dus de laatste -td- zal ik ook weer meoten verwijderen.

Nu bestaat de eerste rij uit twee kolommen.

Waarvan elke cel een overspanning heeft van twee cellen.

Met deze kennis kun je nu dus eenvoudig een overspanning maken van drie kolommen.

Dat doe ik hiervoor. colspan=" " drie.

En als idd at doe, dan zal ik in ieder geval twee td's weer moeten weghalen.

En als je een colspan=" " vier plaatst.

Dan zorg je ervoor dat één cel de volledige breedte van de tabel inneemt.