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:
- Table bevat 4 rijen.
- De eerste rij is de rij met de titels. Die bevat 4 th elementen.
- De andere drie rijen bevatten elk 4 td elementen.
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:
- de tabel komt over de volle breedte
(table {
width: 100%;})
- td en th krijgen elk hun eigen letterkleur en achtergrondkleur.
- td wordt links uitgelijnd, th wordt gecentreerd en vet.
- td wordt verticaal naar boven uitgelijnd (vertical-align: top;). Zie figuur 3 voor het effect:
figuur 3: verticale uitlijning: links zonder, rechts met vertical-align: top;
- de kleur van de lijnen tussen de cellen is in feite de kleur van de achtergrond (van het element article waar de tabel in staat).
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:
- Hoofdstuk 30: over sjablonen. Op deze website staan 11 sjablonen, opzetjes voor het maken van een eigen website.
- Hoofdstuk 31: suggesties voor het aanpassen van de sjablonen
- Hoofdstuk 32: over afbeeldingen (hoe je aan afbeeldingen komt, auteursrecht)
- Hoofdstuk 33: over hoe je je website op indternet plaatst (hosting providers, domeinnamen, ftp)
- Hoofdstuk 34: over hoe je ervoor zorgt dat je website kan worden gevonden op internet.
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.