Websites met stijl

29. Tabellen

In dit hoofdstuk

In dit laatste hoofdstuk over de Apollo-website komen tabellen aan de orde.

Elementen van een tabel

Een basistabel bestaat uit vier elementen:

We gaan in dit hoofdstuk een deel van de tabel in de Apollo-website nabouwen. Die tabel staat op de webpagina Apollo-vluchten (vluchten.htm en bestaat uit 4 kolomen en 12 rijen. De bovenste rij bestaat uit kopcellen met de opschriften. Daarna volgen de rijen met de gegevens. figuur 1: tabel van de Apollo-website (eerste vier rijen). Wij gaan de eerste vier rijen bouwen, het stuk van de tabel uit figuur 1.

Tabel - de html

De struktuur van de tabel is eenvoudig:

Hieronder zie je de struktuur in html; links met lege cellen, rechts de cellen met de inhoud.

figuur 2: html; links zonder gegevens; rechts met gegevens
<table> <tr> <th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>

<tr> <td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr> <td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr> <td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table> <tr> <th> </th>
<th>datum </th>
<th>missie </th>
<th>bemanning </th>
</tr>

<tr> <td>7</td>
<td>11 okt '68<br>-22 okt'68 </td>
<td>aardbaan</td>
<td>Water Schirra<br>Walter Cunningham<br>Donn Eisele</td>
</tr>

<tr> <td>8</td>
<td>21 dec '68<br>-27 dec '68</td>
<td>om de maan<br>zonder maan-<br>lander
<td>Frank Borman<br>Jim Lovell<br>William Anders</td>
</tr>

<tr> <td>9</td>
<td>3 mrt '69<br>-13 mrt '69</td>
<td>aardbaan<br>test maanlander</td>
<td>James McDivitt<br>Russel Schweikart<br>David Scott</td>
</tr>
</table>

Tabel - de opmaak

table { width: 100%; }

td { text-align: left;
vertical-align: top;
background-color: hsl(33, 12%, 15%);
color: hsl(40, 30%, 60%);
padding: 5px 10px;
}

th { color: hsl(45, 100%, 60%);
text-align: center;
font-weight: bold;
background-color: hsl(36, 45%, 37%);
}

De opmaak is eigenlijk heel recht toe recht aan:

Wil je meer weten over tabellen en hun opmaak, kijk dan in de naslag over table.

Nagekomen: In hoofdstuk 35 heb ik een hoofdstuk over hot spots toegevoegd. Daarin pas ik de Apollo-website zó aan dat je informatie krijgt over een astronaut door te klikken op zijn foto.

Verder

Dit is het laatste hoofdstuk over de Apollo website. In de volgende hoofdstukken allerlei informatie:

Eventuele nieuwe onderwerpen zullen na hoofdstuk 34 worden toegevoegd.

Nagekomen:

In hoofdstuk 35 heb ik een hoofdstuk over hot spots toegevoegd. Daarin pas ik de Apollo-website zó aan dat je informatie krijgt over een astronaut door te klikken op zijn foto.