Tabellen stijlen

Zoals je weet kun je je tabel en je cellen goed met CSS stylen. Wat je je echter goed moet realiseren is dat je vormgeving voor je tabel en vormgeving voor je tabelcellen moet aanleveren.

Opdracht

1. Breinbreker

Als ik mijn tabel een border-radius geef maar mijn tabelcellen niet dan krijg ik op alle hoeken dit effect (rode rand loopt achter het groene vlak):

Breinbreker

Dit ziet er niet mooi uit! Hoe kun je dit oplossen?

Hoe kan ik dit oplossen? Meerdere antwoorden zijn mogelijk maar slechts 1 is wenselijk:
A: Al mijn tabelcellen ook een border-radius geven.
B: Achtergrondafbeeldingen maken voor de tabelcellen op de hoeken en in deze afbeeldingen de desbetreffende ronde hoek opnemen.
C: De border-radius op negatief zetten, dan vermijd je dit probleem.
D: Alleen de tabelcellen op de hoek een border-radius geven voor de desbetreffende hoek.

 

2. Maak een tabel met zebra stripes

De tabel moet in ieder geval 20 rows hebben. De kleuren van de tabel en de content wat je er in zet mag je zelf bepalen. Extra uitdaging: gebruik zo min mogelijk diverse stijlen maar gebruik :nth(odd) en :nth(even) om dit voor elkaar te krijgen.

Een tabel met zebra stripes

Een tabel met zebra stripes

 

 Theorie

Width, height en borders

Dit zijn eigenlijk de standaard CSS eigenschappen die je zowel aan een tabel als aan een tabelcel of een rij kunt toevoegen. Onderstaande code levert een tabel op van 500 pixels breed, 300 pixels hoog met een rode rand van 2 pixels:

table{
border: #F00 2px solid;
width:500px;
height:300px;
}

Tabel met border


Maar dit levert een rand op rondom de tabel en iedere tabelcel:

table{
border: #F00 1px solid;
width:500px;
height:300px;
}
td{
border: #F00 1px solid;
}

Tabel en cell hebben een border.


Wil je dat er slechts 1 randje te zien is gebruik dan border-collapse in je table stijlen:

table{
border: #F00 1px solid;
width:500px;
height:300px;
border-collapse:collapse;
}

Border collapse


Align en padding
Standaard wordt de content in een tabelcel links midden uitgelijnd en strak tegen de rand. Met text-align en vertical-align kun je dit aanpassen. Even ter herinnering: text-align klinkt alsof het alleen op tekst van toepassing is maar dat is niet zo. Alles (ook afbeeldingen) worden beïnvloed door text-align:

td{
border: #F00 1px solid;
text-align:right;
vertical-align:top;
}

align


Ruimte buiten de cellen moet via cellspacing geregeld worden (zie vorige pagina) maar ruimte binnen de cellen kan gewoon met padding aangegeven worden.

td{
border: #F00 1px solid;
text-align:right;
vertical-align:top;
padding:10px;
}

padding


Achtergrond afbeeldingen

Net als bij div-elementen kunnen tabellen, header cellen en datacellen background-images toegewezen krijgen. In dit geval krijgt iedere cel met de klasse paper een achtergrond.

td{
text-align:right;
vertical-align:middle;
padding:10px;
color:#75695b;
}
.paper{
text-align:left;
background-image:url(afbeelding.png);
width:280px;
height:97px;
color:#FFF;
}

Background images gebruiken in tabellen en/of cellen


 

Helemaal geen border laten zien

Soms wil je gewoon één grote achtergrondplaat voor de tabel en verder helemaal niets. Dan kun je het beste alle borders op nul zetten:

table, td {
border:none;
}


Eventueel moet je in de HTML de cellspacing ook op nul zetten:
<table cellspacing=”0″>
<tr>
<td>Tabelcel 1</td>
<td>Tabelcel 1</td>
</tr>
</table>

 

:nth-child

In hoofdstuk 3 heb je kennis gemaakt met de pseudoclasses :first-child en :last-child. Hierbij hoort ook de pseudoclass :nth-child(). Dit stelt je in staat om te tellen. Bijvoorbeeld iedere 2e tabelcel een kleur geven:

td:nth-child(2){
text-align:left;
background-color:#FC0;
width:300px;
height:20px;
color:#FFF;
}

nth-child


Echter, bij een wat grote opsomming (en dus een grote tabel) wil ik graag mijn rijen om-en-om van kleur laten wisselen. Zebra stripes zou je dit kunnen noemen. In dat geval kun je de waarden ‘odd’ en ‘even’ gebruiken. Odd betekend oneven. Even betekent even.

Aangezien het om een rij gaat kun je beter de hele tablerow aanroepen.

tr:nth-child(odd){
background-color:#FC0;

}
tr:nth-child(even){
background-color:#F60;
}

Wanneer je met :nth-child werkt hoef je geen klasse te specificeren. Je kunt :nth-child met een nummer en odd/even combineren in 1 CSS bestand.  De code van onderstaand voorbeeld staat op de volgende pagina.