Tabellen
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
1. Wat is een tabel ?
2. Hoe maak ik een tabel ?
3. Attributen van de tabel
4. Voorbeelden
5. Onzichtbare tabel
6. Lege cel
7. Samenvoegen van cellen
1. Wat is een tabel ?
Een tabel bestaat uit rijen en kolommen. Tabellen worden gebruikt om de inhoud mooi en ordelijk op de pagina te laten weergeven. Ze worden ook vaak gebruikt als hulpmiddel wanneer je bijvoorbeeld een afbeelding links en een afbeelding rechts wilt vertonen op een pagina dan kan je gebruik maken van een onzichtbare tabel met twee kolommen. Zoals je ziet kunnen tabellen dus zeer handig zijn.
 top
2. Hoe maak ik een tabel ?
Een tabel is als volgt opgebouwd:
|
<TABLE>
<TR>
<TD>Inhoud</TD>
</TR>
</TABLE>
|
Hier zie je drie elementen:
| TABLE |
Het element TABLE wordt gebruikt om een tabel aan te maken.. |
| TR |
TR staat voor Table Row. Hiermee maak je een rij aan |
| TD |
TD staat voor Table Data. Hiermee maak je een cel aan waar de inhoud terecht komt. |
Er zijn nog andere elementen die gebruikt kunnen worden in de tabel zoals TH dat staat voor Table Header. Dit heeft dezelfde werking als TD, het enige verschil is dat TH de inhoud vet wordt gedrukt. Dit wordt meestal gebruikt om de koptitels duidelijk te maken, later in de tutorial zien we hier een voorbeeld van. Dan hebben we ook nog volgende elementen: THEAD, TFOOT en TBODY. Deze elementen worden niet zoveel gebruikt dus hier gaan we het in deze tutorial nog niet over hebben.
top
3. De attributen van de tabel
De attributen van de tabel kan je op deze pagina terug vinden.
top
4. Voorbeelden
Nu hebben we het nog maar enkel gehad over de elementen en de attributen maar hoe ziet het er nu visueel uit. Ik ga enkele voorbeelden presenteren waarbij ik de verschillende attributen en elementen gebruik:
<TABLE BORDER="1">
<TR>
<TH>Naam</TH>
<TH>Leeftijd</TH>
</TR>
<TR>
<TD>Jan</TD>
<TD>18</TD>
</TR>
<TR>
<TD>Tom</TD>
<TD>20</TD>
</TR>
</TABLE> |
| Naam |
Leeftijd |
| Jan |
18 |
| Tom |
20 |
|
<TABLE BORDER="1" BORDERCOLOR="#000000" CELLPADDING="2" CELLSPACING="0">
<TR>
<TH BGCOLOR="#3399CC">Naam</TH>
<TH BGCOLOR="#3399CC">Leeftijd</TH>
</TR>
<TR>
<TD>Jan</TD>
<TD>18</TD>
</TR>
<TR>
<TD>Tom</TD>
<TD>20</TD>
</TR>
</TABLE> |
| Naam |
Leeftijd |
| Jan |
18 |
| Tom |
20 |
|
top
5. Onzichtbare tabel
Onzichtbare tabellen worden gebruikt om de inhoud op de pagina te krijgen waar men het wilt. Neem als voorbeeld: Je wilt links op de pagina iets plaatsen maar ook rechts op dezelfde hoogte, hier toon ik hoe het kan:
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD WIDTH="50%">Links</TD>
<TD WIDTH="50%" ALIGN="right">Rechts</TD>
</TR>
</TABLE> |
top
6. Lege cel
Als er geen inhoud in een cel bevindt zal de cel een "niet zo mooie" opmaak krijgen. Zie volgende voorbeeld:
De HTML code van de lege cel ziet er zo uit:
We kunnen dit "probleem" oplossen door een "non-breaking space" te plaatsen:
Het resultaat wordt:
top
7. Samenvoegen van cellen
Het kan wel eens gebeuren dat we cellen moeten samenvoegen. Dit doen we met de elementen COLSPAN en ROWSPAN. Om horizontale cellen samen te voegen gebruiken we COLSPAN, om verticale cellen samen te voegen gebruiken we ROWSPAN. Het aantal cellen dat we willen samenvoegen is de waarde die het element krijgt. Een voorbeeld:
<TABLE BORDER="1">
<TR>
<TH>Naam</TH>
<TH>Leeftijd</TH>
</TR>
<TR>
<TD>Jan</TD>
<TD>18</TD>
</TR>
<TR>
<TD>Tom</TD>
<TD>20</TD>
</TR>
<TR>
<TD COLSPAN="2">Dit zijn mannen</TD>
</TR>
</TABLE> |
| Naam |
Leeftijd |
| Jan |
18 |
| Tom |
20 |
| Dit zijn mannen. |
|
top
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.27) 