Cellen splitsen met rowspan

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: Semantische html-elementen

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

Ditmaal leer je hoe je een cel kunt opsplitsen .

Het splitsen van cellen vereist net even iets meer handelingen dan het samenvoegen van cellen.

Ik zal het je laten zien in dit voorbeeld.

Zoals je nu ziet is cel nummer vijf gesplitst in twee rijen, vijf en vijf-a

Hierdoor bestaat de tabel niet meer uit drie rijen maar uit vier.

De vierde rij zie je alleen terug in de gesplitste cel vijf als vijf-a.

Deze nieuwe rij zie je ook terug in de broncode.

Er staat enkel één -td- en dat is de cel vijf-a.

De cellen zes, zeven en acht zijn samengevoegd met hun cel eronder door het attribuut rowspan=" " twee.

Voor het splitsen van cellen moet je dus goed bijhouden hoeveel nieuwe rijen je moet aanmaken.

En welke cellen je eventueel wilt samenvoegen met een rowspan.

Stel dat ik ditmaal alleen cel zes en acht wil gaan splitsen.

Dan moeten cellen vijf en zeven samengevoegd worden met hun onderliggende cellen.

Hiervoor plaats je binnen de td het attribuut rowspan=" " twee.

En deze kopieer ik dan ook naar de td zeven.

Nu zie je dat deze cellen worden samengevoegd met de huidige onderliggende cellen en dat was de derde rij.

Dat is niet de bedoeling. Ik moet een nieuwe rij aanmaken.

En dat doe ik met het tr-element.

En ik heb twee cellen die gesplitst moeten worden.

Dus ik moet hier dan ook twee nieuwe cellen aanmaken met -td-.

De eerste noem ik zes-a. En de tweede acht-a.

Zo splits je een cel in meerdere rijen.

Maar je kunt een cel ook splitsen in meerdere kolommen. Dat gaan we nu doen.

Daarvoor keer ik eerst weer even terug naar een overzichtelijkere situatie met Commando Z.

Ik open het bestand splits-kolom om eerst een voorbeeld te laten zien van een tabel met een gesplitste kolom.

Als je de broncode goed bestudeert, dan kun je zien wat er is gebeurd.

In de tweede rij heb ik cel vijf gesplitst in twee kolommen.

Daarmee is mijn hele tabel gegroeid met één extra kolom.

De tabel is niet meer een vierkoloms maar nu een vijfkoloms geworden.

In de tweede rij wordt deze extra kolom benut als cel vijf-a.

Om ook de eerste en de laatste rij kloppend te krijgen heb ik daar de eerste cel een overspanning gegeven van twee cellen.

Daarvoor dienen de attributen colspan=" " twee.

Dan doe ik het nu weer voor in mijn document rowspan.html.

Maar dan in een nieuwe situatie.

Ditmaal wil ik cel twee en vier opsplitsen in twee kolommen.

Hiervoor plaats ik twee nieuwe cellen met -td-, twee-a..

En ditzelfde doe ik ook nog een keer maar dan voor vier-a.

De hele tabel is nu gegroeid met twee extra rijen.

En dat moet ik ook weer bijwerken in de rijen twee en drie.

Daarvoor gebruik je het attribuut colspan=" " twee.

In principe maakt het niet uit welke cellen je hiervoor gebruikt.

Maar voor de stabiliteit van de tabel en de duidelijkheid zou ik deze toepassen voor elke tweede en vierde cel in de rij.