HTML

Tabellen

Simpele tabellen

Tabellen zijn heel geschikt om gegevens netjes weer te geven op een webpagina. In het verleden werden tabellen ook veel gebruikt om teksten en plaatjes netjes op de pagina neer te zetten, als middel om de opmaak te krijgen zoals gewenst. Later zullen we zien dat we daar CSS voor kunnen en moeten gebruiken.

 

<Table>

Je voegt een tabel in met het <table>-element.

 

<tr>

 

Binnen dit element gebruik je het <tr>-element om rijen aan te geven.

 

<td>

Binnen het <tr>-element gebruik je weer het <td>-element om cellen aan te geven.

 

Border

 

Met de parameter  border van het <table>-element geef je aan hoe breed de rand van de tabel moet zijn. border=”1” geeft de tabel een zo dun mogelijke rand. Hoe dun die rand precies is, hangt af van de webbrowser. border=”0” zorgt voor een tabel zonder rand.

 

Voorbeeld

 

<html>

<head>

     <title>Een simpele tabel</title>

</head>

 

<body>

     <h1>Magisch vierkant</h1>

     <p>Zowel de som van alle cellen in één rij, als de som van alle cellen in één kolommen, als de som van alle cellen in één diagonaal is dertig.</p>

 

     <table border="1">

          <tr>

                <td>8</td>

                <td>5</td>

                <td>2</td>

               <td>15</td>

          </tr>

</table>

 

</body>

</html>

 

         

Zo maak je van een simpele tabel een magisch vierkant.

 

 

Koppen

In een tabel kunnen ook koppen voorkomen. Je kunt van elke willekeurige cel een kop maken door het <th>-element te gebruiken in plaats van het <td>-element.

 

Voorbeeld

 

Een net overzicht van de toename van het aantal konijnen van Fibonacci.

 

 

Cellen samenvoegen

Zodra tabellen iets ingewikkelder worden dan degene die we tot nu toe bekeken hebben, komt het al snel voor dat je cellen moet gaan samenvoegen. Dit kun je doen met cellen die naast elkaar liggen en met cellen die onder elkaar liggen.

Horizontaal samenvoegen

<td colspan = "2">

Om cellen die naast elkaar liggen samen te voegen, gebruik je de parameter colspan van het <td>-element (of het <th>-element). Je geeft aan colspan een getal mee dat aangeeft uit hoeveel cellen de samengevoegde cel moet bestaan.

 

<html>

<head>

     <title>Horizontaal samengevoegde cellen</title>

</head>

 

<body>

     <table border="1">

          <tr>

                <th colspan="6">december 2000</th>

          </tr>

</table>

         

 

De kop van deze tabel bestaat uit zes samengevoegde cellen.

 

Verticaal samenvoegen

<td rowspan = "3">

Het is ook mogelijk om cellen die onder elkaar liggen samen te voegen. Hiervoor geef je aan een <td>-element (of een <th>-element) de parameter rowspan mee.

 

 

 

Met verticaal samengevoegde rijen kun je makkelijk categorieën aanduiden.

 

Als je cellen verticaal wilt samenvoegen, moet je rowspan meegeven aan het eerste <td>-element dat bij de samengevoegde cellen hoort. Let erop dat je in de volgende rij de samengevoegde cel volledig weglaat.

 

In bovenstaand voorbeeld lijkt het alsof sommige rijen maar twee cellen bevatten, hoewel ze er in werkelijkheid drie hebben. Dit komt doordat in de rij daarvoor is aangegeven dat de eerste cel van beide rijen samengevoegd moet worden.

 

Centreren

<table align = "right"> mogelijkheden "right", "center", "left"

 

Opdracht:

1. maak bovenstaande tabellen

2. zet ze vervolgens in het midden van de pagina

 

 

 

©jw webdesign