Mondriaan in een tabel

HTML

Maak een tabel met 7 kolommen en 7 rijen en voeg de cellen samen die de kleurvlakken gaan vormen (colspan, rowspan).

CSS

Het is een goede gewoonte om de tabel een breedte te geven. Laat deze overeenkomen met de som van de breedtes die je gaat geven aan de kolommen. Vergeet niet om border-collapse: collapse aan de tabel te geven om de randen van de cellen te laten samenvallen. Geef voor de cellen een border in, deze gaat de kleurvlakken hun rand geven. Later geef je in welke randen je niet wilt zien.

Als het mogelijk is om class-attributen in de HTML-code te vermijden door in CSS te werken met een descendant selector (aflopende kiezer) dan heeft dat altijd de voorkeur. In dit voorbeeld is er een ID gegeven aan het tr-element van de bovenste rij, waardoor de ingesloten td-elementen een border-top:0 kunnen krijgen met de descendant selector #eersterij td.

In dit voorbeeld zijn aparte classes aangemaakt voor kleur, hoogte en voor de randen die verborgen moeten worden. Gevolg hiervan is dat er per cel soms wel 3 classes nodig zijn. De schrijfwijze in HTML wordt dan class="class1 class2 class3". Daarnaast zijn er ook cellen die helemaal geen class nodig hebben.

• Kleur: maak voor iedere kleur een class en voeg die toe aan de betreffende cellen.
• Hoogte: in dit voorbeeld zijn 4 verschillende hoogtes gebruikt, maak per hoogte een class aan. Geef een willekeurige cel in de eerste rij de class met de juiste hoogte. Deze werkt door voor de hele rij. Herhaal dit voor de volgende rij, enz. In de code kan je zien dat iedere row één cel heeft met class voor de hoogte.
• Breedte: maak voor iedere kolom een ID aan met de gewenste breedte. Maak col-tags aan (pag. 149-150) in de tabel en geef iedere col-tag één van de ID's
• Randen: maak 4 classes aan waarmee je de randen resp. boven, rechts, onder en links verbergt.