Websites met stijl

Naslag: tabel-elementen

Deel 1 - zelfstudie

De basisstruktuur van een tabel

De elementen table, tr, td, th

Een tabel bestaat uit de volgende elementen:

• Het element table
  Dit element bevat de hele tabel.
  Die tabel bestaat uit een of meer tabelrijen (tr).
• Het element tr (tabelrij)
  Het tabelrij-element bevat een of meer cellen (td of th).
• Het element td (tabelcel)
  De tabelcel bevat de gegevens (vandaar de naam td, table data, tabelgegevens).
• Het element th (table head, tabelkop)
  Dit element is bedoeld als een cel van de tabel-kop.
  In feite is het een gewone cel, die standaard is voorzien van de stijlen vet en gecentreerd.

  De elementen table, tr, td komen in elke tabel voor. Het element th gebruik je alleen als je ergens een tabelkop wilt.

Basisstructuur

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

Deze tabel gaan we hieronder van opmaak voorzien.

Opmerkingen

• Je moet er bij het maken van tabellen zelf op letten dat elke rij evenveel cellen heeft. Anders wordt de tabel geen rechthoek, maar steekt een rij soms uit.
• Ik heb al de volgende stijlregel aangebracht: td, th {padding: 5px;}
  Door deze padding van 5px staat de inhoud van de cellen niet tegen de rand van de cel.
  Als ik dat niet had gedaan zouden alle gegevens tegen elkaar aan gestaan hebben.

Basisopmaak

Zelf de tabellen maken

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

• Maak een nieuw leeg html-document (Gebruik bv. het bestand nieuw.html dat je in hoofdstuk 3 van de cursus hebt gemaakt).
• Zet in het document de html-code van figuur 1 en sla het op onder een andere naam.
• De stijlen (css) zou je als stijlblok in de head kunnen zetten (tussen de tags <style> en </style>),
  maar je kan daarvoor natuurlijk ook een apart stijlblad gebruiken; zorg dan wel voor een link naar het stijlblad.

Kaders

Standaard kaders

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

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;}.

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:

• collapse (ingeklapt) en
• seperate (gescheiden)
  Gescheiden is de standaard waarde.

In de figuur hieronder zijn de kaders ingeklapt:

opmerking:

• Border-collapse heeft een iets ander effect dan border-spacing: 0;
  Bij border-spacing: 0; komen de cellen wel tegen elkaar te staan, elke cel heeft nog zijn eigen kader. Daardoor zijn de kaders 2x zo dik als bij border-collapse. Zie figuur 5

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.

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:

• table {width: 300px;}
• table {width: 100%;}

Kolombreedte

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.

Opmerking

• Let op dat je bij een tabel met een vaste breedte niet de breedte van alle kolommen vastlegt.
  Geef tenminste van één kolom de breedte niet op.

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.

• Als de opschriften op de bovenste rij staan, bestaat de eerste rij uit th-elementen (figuur 1).
• Als de opschriften links staan, is het eerste cel-element van elke rij een th-element. Zie figuur 10.
• Als de opschriften links én op de bovenste rij staan, dan bestaat de eerste rij uit th-elementen; bovendien is de eerste cel van elk rij een th-element. Zie figuur 11.

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.

Toelichting

• De cel 'aantal inwoners' heeft betrekking op het jaar 1500 en het jaar 2000. Daarom beslaat deze cel 2 kolommen.

• Dat kan geregeld worden met het colspan-attribuut: <th colspan="2">aantal inwoners</th>.
• Omdat de cel nu de plaats van 2 cellen inneemt, moet in de html-code de laatste cel van de eerste rij weg. Er zijn nog maar twee cellen op die rij.

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.

• De toegevoegde codes in de html en in de css zijn rood gemarkeerd.
• In de toelichting onder figuur 13 wordt het attribuut rowspan nader toegelicht.

Toelichting:

• Je maakt een cel 2 of meer rijen hoog met het attribuut rowspan De vorm is rowspan="aantal rijen"..
• De code voor de th-cel linksboven wordt dus <th rowspan="2">in het jaar:</th>.
• De vergrootte cel neemt nu ook de plaats in van de linker cel op de tweede rij. Die cel moet dus uit de html-code worden verwijderd: Daarom zie je in de html op de tweede rij alleen nog de twee cellen staan met 1500 en 2000.

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.

Toelichting

• Cel b-c
  Cel b heeft de eigenschap colspan="2" en vervangt de cellen b en c. Cel c is dus verwijderd.
• Cel 2-3
  Cel 2 heeft de eigenschap rowspan="2" en vervangt de cellen 2 en 3. Cel 3 is dus verwijderd.
• Cel midden heeft de eigenschappen colspan="2" en rowspan="2". Hij vervangt de cellen b2, c2, b3 en c3.
  De cel 'midden' is geplaatst in cel b2 (de cel in de linker bovenhoek van midden). De andere cellen (c2, b3, c3) zijn verwijderd.
• De tekst in alle cellen is horizontaal en verticaal gecentreerd.
  Dat is gedaan met een stijlregel td, th {text-align: center; vertical-align: middle;}

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

• het attribuut class="anders" geeft
  
• en in de css de regel .anders {background-color: green;} opneemt,

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 n^e 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:

• tr:nth-of-type(4) selecteert de 4^e rij (tr) van de tabel.
• Daarachter staat een spatie en dan td.
  Dat betekent dat alle td-elmenten uit de vierde rij worden geseleceerd.

Afwijkende opmaak van een kolom

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

• In de linker tabel is de achtergrondkleur van de td-cellen groen gemaakt
  Dat gaat met de stijlregel td:nth-of-type(1) {background-color: green;}.
• In de rechter tabel zijn de cellen in de linker kolom links uitgelijnd.
  Dat gaat met de stijlregel td:nth-of-type(1) {text-align: left;}.
  (Deze stijlregel laten we staan - de landen kunnen het best links uitgelijnd.)

Opmerkingen:

• Met td:nth-of-type(2) verander je de opmaak van de tweede kolom, met td:nth-of-type(3) die van de derde kolom, enz.

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.

Opmerking:

• De tabel van figuur 16 is alleen maar bedoeld om het markeren van een rij te demonstreren. We gaan verder met de tabel 15b.
• Daarin gaan we de opmaak van de cel linksboven aanpassen.

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 4^e rij de 3^e 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)

• In tabel 17a hieronder is de cel linksboven bij wijze van voorbeeld van een groene achtergrond voorzien.
• In tabel 17b is die cel van de gewenste opmaak voorzien: rechts en onder uitgelijnd, niet vet.

  Ik pas deze methode vaak toe. Eerst geef ik de geselecteerde cellen een felle verder niet gebruikte achtergrondkleur, om te zien of er niet bij vergissing meer (of minder) cellen zijn geselecteerd dan ik bedoelde. Daarna verander ik de achtergrond-kleur in de gewenste opmaakregels. Dan controleer ik opnieuw om te zien of alles echt goed is.

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)

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)

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:

• Op de oneven regels krijgen de even cellen een bruine achtergrond (een na laatste regel)
• Op de even regels krijgen de oneven cellen een bruine achtergrond (laatste regel)

  (De niet genoemde cellen krijgen de lichtere achtergrondskleur hsl(40, 100%, 85%). Dat staat in de regel erboven.

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

Naslag

Het element table

Vorm

Functie

Het element table definieert een tabel.

• Een tabel bestaat uit een of meer rijen (element tr)
• Het element rij bestaat uit een of meer cellen (element td) en/of kop-cellen (element th)

Display

Table gedraagt zich grotendeels als een block-element.

Attributen

Table ondersteunt alleen de globale attributen.

Het element td

Vorm

Functie

Het element td definieert een cel van een tabel.

Display

Td gedraagt zich grotendeels als een inline-block.

Attributen

• colspan
  <td colspan="4">...</td> defineert een cel met een breedte van 4 kolommen.
• rowspan
  <td rowspan="2">...</td> defineert een cel met een hoogte van 2 rijen.

Standaard opmaak

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

• padding: 0;
• text-align: left;
• vertical-align: middle;
• background-color: transparent;

Het td element kent de eigenschap margin niet.

Het element th

Vorm

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 grotendeels als een inline-block.

Attributen

• colspan
  <th colspan="4">...</th> defineert een cel met een breedte van 4 kolommen.
• rowspan
  <th rowspan="2">...</th> defineert een cel met een hoogte van 2 rijen.

Standaard opmaak

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

• padding: 0;
• font-weight: bold;
• text-align: center;
• vertical-align: middle;
• background-color: transparent;

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

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.