7.1: Tabellen deel 1

§ 7.1.1: Standaard tabellen

Bij het horen van het woord tabel denk je waarschijnlijk het eerst aan eindeloze rijen cijfertjes en getallen. En daar is de tabel-functie in HTML dan ook uitermate geschikt voor en ook voor bedoeld. Een tabel maak je dus uitsluitend om rijen en kolommen met data weer te geven op de website. Ooit werden tabellen gebruikt om een pagina-layout te maken. Dat is echter verouderd. Hoe we dat nu doen leer je in een CSS-cursus.

Een tabel bestaat uit rijen (Horizontale verdeling) en kolommen (vertikale verdeling). Vergelijk een vel ruitjespapier of een spreadsheet. Deze bestaan ook uit rijen en kolommen. Eén zo'n vakje (ruitje) noemen we dan een cel.
Een eenvoudige tabel maak je op de volgende wijze:

Je begint met het element <table> en eindigt met het eindelement </table>. Tussen deze elementen voeg je voor elke rij de elementen <tr> en </tr> toe. Voor elke CEL in een rij gebruik je tussen deze laatste twee elementen <td> en </td>. Tussen <td> en </td> noteer je de gegevens die je in de betreffende cel wilt plaatsen. Een voorbeeld zal het een en ander verduidelijken.

<tr> staat voor Table Row; de engelse benaming voor tabelrij
<td> staat voor Table Data; de engelse benaming voor tabel data.
Let op: alleen tussen <td> en </td> komen de gegevens van de betreffende cel.

cel 1	cel 2	cel 3
cel 4	cel 5	cel 6
cel 7	cel 8 twee regels	cel nummer 9

Hieronder zie je de code van bovenstaande tabel:

<table style="border: 2px solid #cccccc; ">
  <tr>
    <td style="border: 2px solid #cccccc;">cel 1</td>
    <td style="border: 2px solid #cccccc;">cel 2</td>
    <td style="border: 2px solid #cccccc;">cel 3</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">cel 4</td>
    <td style="border: 2px solid #cccccc;">cel 5</td>
    <td style="border: 2px solid #cccccc;">cel 6</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">cel 7</td>
    <td style="border: 2px solid #cccccc;">cel 8<br>twee regels</td>
    <td style="border: 2px solid #cccccc;">cel nummer 9</td>
  </tr>
</table>

Om de tabellen in bovenstaande voorbeelden duidelijk weer te geven hebben we ze een grijze buitenrand van 2 pixels (beeldpunten) mee gegeven. Dit hebben we gedaan door de style-optie: style="border: 2px solid #cccccc;" toe te voegen aan het <table> element. Hiervoor staat de 2px voor de dikte van de rand in het aantal pixels. Als tweede staat er solid, hierdoor krijg je een doorgetrokken streep. En als laatste staat er een hexadecimale kleurcode, deze geeft de kleur van de rand weer. Je bent natuurlijk vrij om elke gewenste dikte aan de border te geven. Wil je een hele dikke lijn van pakweg 10 pixels, ik denk niet dat het fraai is, dan kan dat ook. Deze lijndikte heeft echter alleen betrekking op de buitenrand. De randen om de individuele cellen maken we door (voorlopig!) bij elke <td> ook bovenstaande style-optie mee te geven.

Merk nu op dat de tekst in de negende cel langer is dan de tekst in de overige cellen. Daardoor is de derde kolom breder geworden. Een kolom wordt zo breed als nodig is. Datzelfde geldt ook voor de hoogte van een cel. In cel 8 staat een <br>-code waardoor de tekst in die cel over twee regels verdeeld wordt. Deze grotere celhoogte heeft gevolgen voor de hele rij. Alle cellen in deze rij zijn nu even hoog als cel 8. Overigens kan het ook zo zijn dat één regel tekst in een cel over meerdere regels verdeeld wordt omdat deze zin niet past in de breedte van de cel. Alle cellen binnen een kolom zijn dus altijd even breed en alle cellen in een rij zijn altijd even hoog.

§ 7.1.2: tabel tekstuitlijning

cel 1
	cel 5	cel 6
cel 7		cel nummer 9

Hieronder zie je de code van bovenstaande tabel:

<table style="border: 2px solid #cccccc; ">
  <tr>
    <td style="border: 2px solid #cccccc;">cel 1</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td style="border: 2px solid #cccccc;">cel 5</td>
    <td style="border: 2px solid #cccccc;text-align:right">cel 6</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">cel 7</td>
    <td style="border: 2px solid #cccccc;"><br></td>
    <td style="border: 2px solid #cccccc;">cel nummer 9</td>
  </tr>
</table>

In de eerste rij is maar één cel gevuld met gegevens. De browser maakt uit de andere twee rijen echter op dat er toch drie kolommen moeten zijn. De cellen twee en drie worden niet weergegeven.
Cel vier wordt net als cel 2 en cel 3 niet weergegeven omdat deze geen inhoud heeft (er staat geen tekst in). Om een cel zonder inhoud toch weer te geven, moeten we te werk gaan zoals in cel acht. Hoewel er in cel acht geen tekst staat, vinden we hier wel een break <br>. Dit is voor de browser net zo goed inhoud, dus zal de cel wel worden getekend. Een andere manier om deze cel toch te voorzien van inhoud is door er een spatie in te zetten. Maar dan wel in de vorm van de karaktercode:  

§ 7.1.3: Tabeltitel - <caption>

Wanneer je een tabel gebruikt dan kan het soms handig zijn een titel aan die tabel toe te voegen. Dit kan je natuurlijk doen door boven de tabel een tekst in te typen met grote letters, bijvoorbeeld met behulp van <h2> of <p style="font-size:15px". De tabelfunctie kent hier zelf echter ook een mogelijkheid voor in de vorm van het <caption> element.

Fruit, groente en peulvruchten
appels	broccoli	erwten
peren	sla	tuinbonen
bananen	andijvie	sperziebonen

Hieronder zie je de code van bovenstaande tabel:

<table style="border: 2px solid #cccccc; ">
  <caption>Fruit, groente en peulvruchten</caption>
  <tr>
    <td style="border: 2px solid #cccccc;">appels</td>
    <td style="border: 2px solid #cccccc;">broccoli</td>
    <td style="border: 2px solid #cccccc;">erwten</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">peren</td>
    <td style="border: 2px solid #cccccc;">sla</td>
    <td style="border: 2px solid #cccccc;">tuinbonen</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">bananen</td>
    <td style="border: 2px solid #cccccc;">andijvie</td>
    <td style="border: 2px solid #cccccc;">sperziebonen</td>
  </tr>
</table>

Als je aan het <caption> element het attribuut style="caption-side: bottom;" toevoegt dan komt de titel onder de tabel te staan.

§ 7.1.4: Tabelkoppen - <th>

Soms zal het voorkomen dat je de tekst in de bovenste rij en/of de linker kolom in een andere letter wilt weergeven, omdat je deze als kolom kop wilt gebruiken. Nu kun je hiervoor natuurlijk gebruikmaken van elementen als <b> (vet) of <i> (cursief) maar het kan eenvoudiger. Als je in plaats van <td> en </td> gebruik maakt van <th> en </th> zal de tekst in de desbetreffende cel vet en gecentreerd worden weergegeven.

Fruit, groente en peulvruchten
Fruit	Groente	Peulvruchten
appels	broccoli	erwten
peren	sla	tuinbonen
bananen	andijvie	sperziebonen

Hieronder zie je de code van bovenstaande tabel:

<table style="border: 2px solid #cccccc; ">
  <caption style="caption-side: bottom;">Fruit, groente en peulvruchten</caption>
  <tr>
    <th style="background-color:#219ac9;color:white">Fruit</th>
    <th style="background-color:#219ac9;color:white">Groente</th>
    <th style="background-color:#219ac9;color:white">Peulvruchten</th>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">appels</td>
    <td style="border: 2px solid #cccccc;">broccoli</td>
    <td style="border: 2px solid #cccccc;">erwten</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">peren</td>
    <td style="border: 2px solid #cccccc;">sla</td>
    <td style="border: 2px solid #cccccc;">tuinbonen</td>
  </tr>
  <tr>
    <td style="border: 2px solid #cccccc;">bananen</td>
    <td style="border: 2px solid #cccccc;">andijvie</td>
    <td style="border: 2px solid #cccccc;">sperziebonen</td>
  </tr>
</table>

Opdracht 18: Tabellen deel 1

Maak een nieuwe html-pagina en geef hem de naam tabellen.html
Bewaar deze pagina in de ROOT-map
Maak in deze pagina een tabel met de onderstaande vulling.
De tabel bevat een titel
De tabel bevat tabelkoppen
Let op de uitlijning van de cellen.