Tabellen in stijl

In deel 4 heb je geleerd hoe tabellen werken in html. Je maakte ze met de volgende elementen: <table> - Alles binnen <table> en </table> is de tabel <th> - (Optioneel) kolomkop (tableheader) <tr> - Rij in de tabel (tablerow) <td> - Inhoud van de cel (tabledata)

Voorbeeld code van een tabel en daaronder de bijbehorende tabel:

<table>
  <tr> <!-- Eerste rij: kolomkoppen, automatisch dik gedrukt -->
    <th>Naam</th>
    <th>Achternaam</th>
    <th>Lievelingskleur</th>
  </tr>
  <tr> <!-- Tweede rij: 1e persoon -->
    <td>Kees</td>
    <td>Hendriks</td>
    <td>Rood</td>
  </tr>
  <tr> <!-- Derde rij: 2e persoon -->
    <td>Aron</td>
    <td>de Jong</td>
    <td>Geel</td>
  </tr>
</table>

Naam	Achternaam	Lievelingskleur
Kees	Hendriks	Rood
Aron	de Jong	Geel

Belangrijk: iedere rij heeft hier precies 3 cellen. Want er zijn 3 kolommen gemaakt.

Je kunt ook een cel maken die twee, drie of meer kolommen breed is. Je gebruikt dan:

<td colspan="2"> <!-- 2 kolommen breed -->of <th colspan="2">

Je kunt ook een cel maken die twee, drie of meer rijen hoog is. Je gebruikt dan:

<td rowspan="3"> <!-- 3 rijen hoog -->

Dit kan al snel ingewikkeld worden! Meer uitleg vind je hier: w3schools table​

<table class="personen">
  <tr> <!-- Eerste rij: kolomkop -->
    <th colspan="2">Personen</th>  <!-- 2 kolommen breed -->
  </tr>
  <tr>
    <td rowspan="2">Kees</td>
    <td>Hendriks</td>
  </tr>
  <tr> 
    <!-- Hier maar 1 cel omdat de cel hierboven twee hoog is -->
    <td>de Jong</td>
  </tr>
</table>

Je kunt de inhoud van tabellen opmaken zoals je zou verwachten. De randen van een tabel werken ook zoals met andere elementen. Als je overal randen wilt, zul je zowel <table>, <th> als <td> een border moeten geven.

table.personen { /* Een rand om de buitenkant alleen*/
  border: 1px solid black;
} 

table.personen th { 
  /* Een rand om de headers alleen*/
  border: 1px solid red;
} 
table.personen td { 
  /* Een rand om de andere cellen alleen*/
  border: 1px solid green;
} 

Je ziet dat de randen eigenlijk dubbel getekend worden. Om de randen te laten samenvallen (collapse) gebruiken we de tabel-eigenschap: border-collapse: collapse;

table.personen { 
  border: 1px solid black;
  border-collapse: collapse;
}