Les 8: Tabellen opmaken

Een tabel maak je met de volgende elementen: <table> - Alles binnen <table> en </table> <th> - (Optioneel) kolomkop (tableheader) <tr> - Rij in de tabel (tablerow) <td> - Inhoud van de cel (tabledata)

Voorbeeld code met bijbehorende tabel:

TEST DEZE CODE:

<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>

Belangrijk: iedere rij heeft hier precies 2 cellen. Want er zijn 2 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

TEST DEZE CODE:

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

TEST DEZE CODE:

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;

TEST DEZE CODE:

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

Opdrachten

[1] Voeg een tabel toe aan je eigen pagina. De inhoud moet natuurlijk passen bij je eigen pagina.

[2] Zorg ervoor dat meerdere kolommen en / of rijen samengevoegd worden.

[3] Voeg borders toe en geef ze een mooie kleur.

[4] maak de opdrachten in repl.it