Websites met stijl

Naslag: tabel-elementen

Op dit naslagblad

Dit naslagblad is verdeeld in een zelfstudiedeel, dat in curusvorm de eigenschapen van tabellen behandelt, en een naslagdeel.

Deel 1 - zelfstudie

Deel 2 - naslag

Deel 1 - zelfstudie

De basisstruktuur van een tabel

De elementen table, tr, td, th

Een tabel bestaat uit de volgende elementen:

Basisstructuur

De basisstructuur van een tabel ziet er dus uit zoals in figuur 1.

figuur 1: de basisstructuur van een tabel
<table> <tr> <th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
<tr>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
</tr>
<tr> <td>2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
</tr>
<tr> <td>3a</td>
<td>3b</td>
<td>3c</td>
<td>3d</td>
</tr>
</table>

Css: td, th {border: 5px;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d

Deze tabel gaan we hieronder van opmaak voorzien.

Opmerkingen

Basisopmaak

Zelf de tabellen maken

Als je zelf de tabellen in dit blad wilt maken zou je dat als volgt kunnen doen:

Kaders

Standaard kaders

Met de border-eigenschap kan de tabel van figuur 1 snel op een echte tabel gaan lijken:

figuur 2: met kaders
Figuur 2a: een kader voor alleen td

Css:
td, th {padding: 5px;}
td {border: 1px solid black;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Figuur 2b: een kader voor td en th

Css: td, th {padding: 5px;}
td, th {border: 1px solid black;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Figuur 2c: een kader voor table en td

Css: td, th {padding: 5px;}
table, td {border: 1px solid black;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Figuur 2d: een kader voor table, td en th

Css: td, th {padding: 5px;}
table, td, th {border: 1px solid black;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Border-spacing

Met de tabel-eigenschap border-spacing kan de afstand tussen de cellen groter of kleiner worden gemaakt.
Als de borderspacing niet wordt opgegeven is de afstand tussen de cellen 2px zoals in de tabellen van figuur 2.

In figuur 3 is de border-spacing 10px: table {border-spacing: 10px;}.

figuur 3: kaders als figuur 2c, met een border-spacing van 10px
Css:
td, th {padding: 5px;}
table, td {border: 1px solid black;}
table {border-spacing: 10px;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Border-collapse

Als je geen dubbele lijnen om de cellen wilt hebben kan je gebruik maken van de tabel-eigenchap border-collapse.

Collapse betekent zoiets als in elkaar storten, inklappen

Border-collapse kent twee waarden:

In de figuur hieronder zijn de kaders ingeklapt:

figuur 4: kaders als figuur 2c, met border-collapse
Css:
td, th {padding: 5px;}
table, td {border: 1px solid black;}
table {border-collapse: collapse;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d

opmerking:

figuur 5: kaders als figuur 2c, met border-spacing: 0;
Css:
td, th {padding: 5px;}
table, td {border: 1px solid black;}
table {border-spacing: 0;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d

Kleuren

De tabel kan ook opgemaakt worden met kleuren in plaats van kaders.
Kaders én kleuren kan natuurlijk ook.

In figuur 6 hebben de cellen witte letters op een grijze achtergrond, de kopcellen hebben een oker achtergrond.

figuur 6: met achtergrondkleuren;
Css: td, th {padding: 5px;}
td {
color: white;
background-color: hsl(40,20% , 60%);
}
th {background-color: hsl(30, 100%, 65%);}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d

In het volgende stukje maken we variaties op de tabel met de opmaak van figuur 6.

De breedte van tabel en kolom

In het voorgaande bepaalde de browser steeds de breedte van de cellen. In principe probeert de browser de cellen zo smal mogelijk te maken. De inhoud past er nog precies in. Daarbij wordt er rekening mee gehouden dat alle cellen boven elkaar dezelfde breedte moeten hebben.

Omdat de celbreedte daardoor vastligt, ligt ook de breedte van de tabel vast.

We gaan nu de tabelbreedte en de breedte van een cel instellen

Tabelbreedte

De breedte van de tabel kan worden aangepast met de eigenschap width. Voorbeelden:

In figuur 7 is de tabelbreedte 420px gemaakt, waarmee de kolommen wat meer ruimte bieden.

figuur 7: in het stijlblad: table {width: 420px;}
Css: td, th {padding: 5px;}
td {
color: white;
background-color: hsl(40,20% , 60%);
}
th {background-color: hsl(30, 100%, 65%);}
table {width: 100%;}
a b c d
1a 1b 1c 1d
2a 2b 2c 2d
3a 3b 3c 3d
Kolombreedte
figuur 8: als figuur 7, met andere gegevens.
De cellen zijn nu gevuld met andere gegevens.
Ze passen daardoor niet meer op de regel.

Bij de telefoonnummers is dat storend.
naam tel lid sinds opmerkingen
Linda 06 123 456 78 2014
Jaqueline 06 234 567 89 2010 junior clubkampioen 2016
Melinda 06 456 789 01 2016

De browser heeft de kolombreedten niet optimaal ingedeeld.
De kolom 'telefoon' moet wat breder en de kolom 'lid sinds' kan wel wat smaller;

Dat kunnen we bereiken door de celbreedten aan te passen.
Dat doen we met een inline stijl in de cellen 'tel' en 'lid sinds'.

We zetten de inline stijl in de bovenste cellen van die kolommen. Dan past de browser de breedte van de cellen eronder automatisch aan. De code ziet er uit als <td style="width: ..px;>"

Met wat experimenteren heb ik uitgezocht dat de kolom 'telefoon' niet kleiner mag worden dan 92px. Anders pasen de telefoonnummers niet meer op de regel. En de kolom 'lid sinds' kan niet kleiner gemaakt worden dan 41px, want dan past het woord sinds niet meer in de cel.

In figuur 9 staat de gewijzigde code. De veranderingen staan in rood aangegeven. In de tabel ernaast zie je het resultaat.

figuur 9: als figuur 8, met aangepaste tabelbreedten
In de html:
<table> <tr> <th>naam</th>
<th style="width: 92px;">tel</th>
<th style="width: 41px;">lid sinds</th>
<th>opmerkingen</th>
</tr>
...

In de css staan de regels van figuur 7.
naam tel lid sinds opmerkingen
Linda 06 123 456 78 2014
Jaqueline 06 234 567 89 2010 junior clubkampioen 2016
Melinda 06 456 789 01 2016

Opmerking

Structuur van een tabel - vervolg

Tabelkop links / boven

Meestal staan de opschriften in de bovenste regel van de tabel. Soms staan de opschriften in de linker kolom. Soms ook staan de opschriften links én boven.

figuur 10: koppen in de linker kolom
<table> <tr> <th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
</tr>
<tr>
<th>3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
<td>3d</td>
</tr>
</table>
1 1a 1b 1c 1d
2 2a 2b 2c 2d
3 3a 3b 3c 3d

 

figuur 11: koppen in de linker kolom en op de bovenste rij
<table> <tr> <th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
<tr> <th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
</tr>
<tr>
<th>3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
<td>3d</td>
</tr>
</table>
a b c d
1 1a 1b 1c 1d
2 2a 2b 2c 2d
3 3a 3b 3c 3d

Cellen die zich uitstrekken over meerdere kolommen of rijen

Met het attribuut colspan kan een cel meer dan een kolom breed gemaakt worden.
Met het attribuut rowspan kan een cel meer dan een rij hoog gemaakt worden.

Colspan

Bekijk figuur 12 en de toelichting onder de figuur. Die tabel gaan we stap voor stap wat verder verfraaien.

figuur 12 (colspan): aantal inwoners in 1500 en 2000 (in miljoenen)
Html

<table> <tr> <th></th>
<th colspan="2">Aantal inwoners</th>
</tr>
<tr> <th>in het jaar:</th>
<th>1500</th>
<th>2000</th>
</tr>
<tr> <td>Nederland</td>
<td>1</td>
<td>16</td>
</tr>
<tr> <td>België</td>
<td>1,3</td>
<td>11</td>
</tr>
<tr> <td>Duitsland</td>
<td>11</td>
<td>80</td>
</tr>
<tr> <td>Engeland</td>
<td>3,5</td>
<td>64</td>
</tr>
<tr> <td>Frankrijk</td>
<td>15</td>
<td>67</td> </tr>
</table>
Aantal inwoners
in het jaar: 1500 2000
Nederland 1 16
België 1,3 11
Duitsland 11 80
Engeland 3,5 64
Frankrijk 15 67


Tabel 12

Css

table {width: 420px;}

td, th {padding: 5px;}

td {
background-color: hsl(40, 20%, 60%);
color: white;
}

th {background-color: hsl(30, 100%, 65%);}

Toelichting

Rowspan

Onvolkomenheden

Tabel 12 heeft 2 onvolkomenheden:

  1. De inhoud van de cellen zouden gecentreerd moeten zijn.
    Dat is gemakkelijk te regelen door aan de opmaak van td de eigenschap text-align: center; toe te voegen.
    (De th-cellen in de kop zijn standaard al gecentreerd, die hoeven niet aangepast te worden.)
  2. Verder heeft de lege cel linksboven geen functie. Die zou beter samengevoegd kunnen worden met de cel 'in het jaar' daaronder.
    Dat kan met behulp van het attribuut rowspan.

In figuur 13 hebben we die veranderingen aangebracht.

figuur 13 (rowspan): aantal inwoners in 1500 en 2000 in miljoenen
<table> <tr> <th rowspan="2">in het jaar:</th>
<th colspan="2">Aantal inwoners</th>
</tr>
<tr> <th>1500</th>
<th>2000</th>
</tr>
<tr> <td>Nederland</td>
<td>1</td>
<td>16</td>
</tr>
<tr> <td>België</td>
<td>1,3</td>
<td>11</td>
</tr>
<tr> <td>Duitsland</td>
<td>11</td>
<td>80</td>
</tr>
<tr> <td>Engeland</td>
<td>3,5</td>
<td>64</td>
</tr>
<tr> <td>Frankrijk</td>
<td>15</td>
<td>67</td> </tr>
</table>
in het jaar: Aantal inwoners
1500 2000
Nederland 1 16
België 1,3 11
Duitsland 11 80
Engeland 3,5 64
Frankrijk 15 67


Tabel 13

Css

table {width: 420px;}

td, th {padding: 5px;}

td {
background-color: hsl(40, 20%, 60%);
color: white;
text-align: center;
}

th {background-color: hsl(30, 100%, 65%);}

Toelichting:

Nieuwe ongerechtigheden:

Deze opmaak heeft een paar nieuwe ongerechtigheden

  1. Dat de cellen in de kolommen 2 en 3 gecentreerd zijn is goed, maar de namen van de landen in de linker kolom kunnen beter links uitgelijnd worden.
  2. De opmaak van de nieuwe cel linksboven is helemaal niet goed. De tekst staat (horizontaal en verticaal) gecentreerd; dat is standaard voor cellen in de kop.
    Maar de tekst 'in het jaar:' slaat op de jaren 1500 en 2000 op de tweede rij. De tekst zou daarom rechts onderin de cel moeten staan en niet vet zijn.

Beide punten worden in orde gemaakt in het hoofdstukje 'Opmaak - vervolg' verderop op deze pagina.

Colspan en rowspan gecombineerd

Je kan ook cellen hebben met zowel colspan als rowspan. De tabel van figuur 14 heeft in het midden zo'n cel.
Die tabel is een uitbreiding van de tabel uit figuur 7. Toegevoegd zijn een colspan-cel, een row-span cel en in het midden de gecombineerde colspan/rowspan cel.
Zie de html-code naast de tabel en de toelichting onder de figuur.

figuur 14: colspan-rowspan
<table> <tr> <th></th>
<th>a</th>
<th colspan="2">b-c</th>
<th>d</th>
</tr>
<tr>
<th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
</tr>
<tr>
<th rowspan="2">2-3</th>
<td>2a</td>
<td colspan="2" rowspan="2">midden</td>
<td>2d</td>
</tr>
<tr>
<td>3a</td>
<td>3d</td>
</tr>
<tr>
<th>4</th>
<td>4a</td>
<td>4b</td>
<td>4c</td>
<td>4d</td>
</tr>
</table>
a b-c d
1 1a 1b 1c 1d
2-3 2a midden 2d
3a 3d
4 4a 4b 4c 4d

Toelichting

Opmaak - vervolg

Als je enkele cellen een afwijkende opmaak wilt geven, kan dat door die cellen van een class-attribuut te voorzien. De opmaak van die class kun je dan in de css instellen.

Als je bijvoorbeeld een aantal cellen

dan worden alle cellen van de class 'anders' groen.

Als je op die manier een kolom van een grote tabel, met zeg 100 rijen, een andere opmaak wilt geven dan moet je 100 cellen van het attribuut class="anders" voorzien. Het zou handig zijn als je dat op een eenvoudiger manier kan doen.

Dat blijkt mogelijk als je slim gebruik maakt van de eigenschap nth-of type.

Nth-of-type

Nth-of-type is een pseudo class, die het ne element van zijn class selecteert binnen de parent (het 'omhullende' element). In plaats van de n tussen de haakjes kan je naar believen een getal invullen.

Een kolom selecteren

Met td:nth-of-type(4) wordt de vierde kolom geslecteerd.

Immers het vierde td-element binnen de parent tr wordt geslecteerd, dat is het 4e td-element van de regel.
Als alle vierde td-elementen worden geselecteerd - alle vierde cellen -, dan is dus de vierde kolom geselecteerd.

Door de 4 te vervangen door en ander nummer kan je elke willekeurige kolom selecteren.

Let op: het gaat hier alleen om de td-elementen. De th-elementen uit de kop doen niet mee.

Een rij selecteren

Een rij selecteren is wat moeilijker. Dat gaat met de volgende selector:
tr:nth-of-type(4) td

Toelichting:

Afwijkende opmaak van een kolom

In figuur 15 hieronder is de opmaak van de eerste (linker) kolom aangepast:

figuur 15: tabel 13 met aangepaste opmaak van de eerste kolom

Tabel 15a
Tabel van figuur 13 met in de css toegevoegd:
td:nth-of-type(1) {background-color: green;}

Tabel 15b
Tabel van figuur 13 met in de css toegevoegd:
td:nth-of-type(1) {text-align: left;}

Opmerkingen:

Afwijkende opmaak van een rij

In tabel 15b kunnen we ook een rij van een aangepaste opmaak voorzien.

Bij wijze van voorbeeld geven we de vierde rij van een groene kleur.
Zoals eerder uitgelegd gaat dat met de stijlregel tr:nth-of-type(4) td {background-color: green;}.
Zie figuur 16.

figuur 16: vierde rij krijgt groene achtergrond

Tabel 16
Tabel 15b met in de css toegevoegd:
tr:nth-of-type(4) {background-color: green;}

Opmerking:

Afwijkende opmaak van een cel

Voor het selecteren van een cel moet je de selector van een rij combineren met de selector van een kolom:
Met tr:nth-of-type(4) td:nth-of-type(3) selecteer je van de 4e rij de 3e cel.

Wij willen de eerste cel op de eerste regel selecteren. Dat is een th-cel, die selecteren we met:
tr:nth-of-type(1) th:nth-of-type(1)

figuur 17: aangepaste opmaak voor de cel linksboven

Tabel 17a
tr:nth-of-type(1) th:nth-of-type(1) {
backgound-color: green;
}

Tabel 17b
tr:nth-of-type(1) th:nth-of-type(1) {
vertical-align: bottom;
text-align: right;
font-weight: normal;
}

Tabel 17b heeft de gewenste opmaak. Hieronder vind je nog eens alle stijlregels voor die tabel.
(De html van de tabel staat in figuur 13)

figuur 18 - css tabel 17b
table {width: 420px;}
/* tabel 420px breed */
td, th {padding: 5px;}
/* alle cellen (td en th) een padding van 5px */
td {
background-color: hsl(40, 20%, 60%);
color: white;
text-align: center;
}
/* td cellen:'*/
/* grijze achtergrond, */
/* witte letters */
/* rechts uitgelijnd */
th {background-color: hsl(30, 100%, 65%);}
/* th cellen: oker achtergrond */
td:nth-of-type(1) {text-align: left;}
/* linker kolom: links uitgelijnd */
tr:nth-of-type(1) th:nth-of-type(1) {
text-align: right;
vertical-align: bottom;
font-weight: normal;
}
/* cel linksboven: */
/* horizontale uitlijning: rechts */
/* verticale uitlijning: onder */
/* niet vet */

Opmaak voor even en oneven rijen

In grote tabelen worden soms de rijen om en om van een iets andere kleur voorzien.
Ook dat is voor elkaar te krijgen met nth-of-type().
Want in plaats van een cijfer mag tussen haakjes ook het woord even of odd (=oneven) staan.

Je krijgt de opmaak van tabel 19a door toevoeging van de stijlregel table tr:nth-of-type(odd) td {background-color: hsl(40, 20%, 50%);}

De selector zegt eigenlijk: de cellen van de oneven tabel-rijen hebben een achtergrondkleur hsl(40, 20%, 50%) (donkergijs).
(de niet genoemde cellen hebben de standaard kleur, lichter grijs.)

Tabel 19b is gelijk aan tabel 19a, alleen zijn de tabelkaders ingeklapt met table {border-collapse: collapse;}.
Door de afwijkende rijkleuren blijven de rijen goed te zien.
(Ik prefereer de linker tabel)

figuur 19: celrijen afwisselend lichter en donkerder
Tabel 19a
Tabel 19b
Tabel 19a: tabel 17, met toevoevoeging van de stijlregel
table tr:nth-of-type(odd) td {background-color: hsl(40, 20%, 50%);}

Tabel 19b: als tabel 19a, met in de stijlregel: table {colspan-collapse: collapse;}
Schaakbord

Als uitsmijter een schaakbord: Leuk om te zien wat je met tabelen kan doen, meer niet.
De laatste twee regels van de Css zijn het meest van belang. Die zijn te lezen als:

In de html staan codes als &#9820;. Hiermee beeld je de schaakstukken af. Meer informatie hierover vind je bij 'bijzondere tekens' van de naslag.

figuur 20: schaakbord
Css:
table {border: 10px solid brown; font-size: 30px; color: black;}
table td {
background-color: hsl(40, 100%, 85%));
width: 50px;
height: 50px;
padding: 0;
vertical-align: middle;
text-align: center;
}
tr:nth-of-type(odd) td:nth-of-type(even) {background-color: hsl(20, 60%, 60%);}
tr:nth-of-type(even) td:nth-of-type(odd) {background-color: hsl(20, 60%, 60%);}
Html:
<table>
<tr>
<td>&#9820;</td><td>&#9822;</td>
<td>&#9821;</td><td>&#9818;</td>
<td>&#9819;</td><td>&#9821;</td>
<td>&#9822;</td><td>&#9820;</td>
</tr>
<tr>
<td>&#9823;</td><td>&#9823;</td>
<td>&#9823;</td><td>&#9823;</td>
<td>&#9823;</td><td>&#9823;</td>
<td>&#9823;</td><td>&#9823;</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>&#9817;</td><td>&#9817;</td>
<td>&#9817;</td><td>&#9817;</td>
<td>&#9817;</td><td>&#9817;</td>
<td>&#9817;</td><td>&#9817;</td>
</tr>
<tr>
<td>&#9814;</td><td>&#9816;</td>
<td>&#9815;</td><td>&#9812;</td>
<td>&#9813;</td><td>&#9815;</td>
<td>&#9816;</td><td>&#9814;</td>
</tr>
</table>

Naslag

Het element table

Vorm
<table>...</table>
Functie

Het element table definieert een tabel.

Display

Table gedraagt zich grotendeels als een block-element.

Attributen

Table ondersteunt alleen de globale attributen.

Het element td

Vorm
<td>...</td>
Functie

Het element td definieert een cel van een tabel.

Display

Td gedraagt zich grotendeeld als een inline-block.

Attributen
Standaard opmaak

De meeste browsers beelden een td element af met de volgende opmaak:

Het td element kent de eigenschap margin niet.

Het element th

Vorm
<th>...</th>
Functie

Het element th definieert een cel in de kop van een tabel, een cel met opschriften over de informatie in de betreffende kolom of rij.

Display

Th gedraagt zich grotendeeld als een inline-block.

Attributen
Standaard opmaak

De meeste browsers beelden een td element af met de volgende opmaak:

De font-weight en text-align eigenschappen wijken af van die van het element td.

Het th element kent de eigenschap margin niet.

Het element tr

Vorm
<tr>...</tr>
Functie

Het element tr definieert een rij in een tabel.
Een rij bevat uit een of meer cellen (element td) en/of kop-cellen (element

Display

Table gedraagt zich grotendeels als een block-element.

Attributen

Tr ondersteunt alleen de globale attributen.