HTML-gids

Tabellen

<table>
   <tr>
      <th>Kopje</th>
      <th>Kopje</th>
   </tr>
   <tr>
      <td>Celinhoud</td>
      <td>Celinhoud</td>
   </tr>
   <tr>
      <td>Celinhoud</td>
      <td>Celinhoud</td>
   </tr>
</table>

Hierboven ziet u de basisstructuur van een tabel. De tabel begint met <table> en eindigt met </table>. Daarbinnen bevinden zich de rijen met <tr> en </tr> als begin- en eindtag. Daar weer binnen bevinden zich de cellen met <td> en </td> als begin- en eindtag, of met <th> en </th>. In het laatste geval bevatten de cellen een kopje en dat zal de browser in de opmaak laten zien. Deze tabel bestaat dus uit 3 rijen met elk 2 cellen. De boven elkaar liggende cellen worden door de browser automatisch gevormd tot rechte kolommen. De tweede cel in de eerste rij komt dus precies boven de tweede cel in de tweede rij te liggen. De bovenste rij bevat hier de kopjes. Het resultaat ziet er zo uit:

Kopje	Kopje
Celinhoud	Celinhoud
Celinhoud	Celinhoud

Natuurlijk kunnen ook deze tags weer attributen en eigenschappen krijgen. De code voor een meer ingewikkelde tabel ziet er als volgt uit:

<table width="100%" border="1" bordercolor="#000000" bgcolor="#cccccc" cellspacing="2" cellpadding="4">
   <tr height="50" valign="bottom">
      <th rowspan="3" bgcolor="#ffff00" align="right" width="100">Kopje</th>
      <th colspan="2" bgcolor="#ffffff" align="center">Kopje</th>
   </tr>
   <tr>
      <td>Celinhoud</td>
      <td>Celinhoud</td>
   </tr>
   <tr>
      <td>Celinhoud</td>
      <td>Celinhoud</td>
   </tr>
</table>

Deze tabel heeft 3 rijen en 3 kolommen. Op het eerste gezicht lijken het misschien 2 kolommen, maar een aantal cellen is samengevoegd met rowspan="3" en colspan="2". Het resultaat ziet er nu zo uit:

Kopje	Kopje
	Celinhoud	Celinhoud
	Celinhoud	Celinhoud

width="..." : de breedte van de tabel of van een cel in pixels of als percentage (bij een cel krijgen alle andere cellen in dezelfde kolom automatisch dezelfde breedte; u hoeft per kolom dus maar van 1 cel de breedte op te geven)
height="..." : de hoogte van de tabel of van een rij in pixels
background="..." : verwijzing naar het adres van een afbeelding die als achtergrond gebruikt wordt van de tabel, een rij of een cel (zie ook het gedeelte over afbeeldingen)
   background="plaatje.gif" : naar een afbeelding in dezelfde map
   background="mapnaam/plaatje.gif" : naar een afbeelding in de map 'mapnaam'
   background="../plaatje.gif" : naar een afbeelding in de bovenliggende map
   background="http://www.website.nl/plaatje.gif" : naar plaatje op een andere website
bgcolor="..." : de achtergrondkleur van de tabel, een rij of een cel (is alleen zichtbaar als er geen afbeelding als achtergrond gebruikt wordt)
border="..." : de dikte van de kaders in de tabel (0 is geen kader; zo kunt u een pagina verdelen in kolommen)
bordercolor="..." : de kleur van de kaders in de tabel
cellspacing="..." : de marge tussen de afzonderlijke cellen in pixels
cellpadding="..." : de marge tussen de celinhoud en de randen van de cellen in pixels
align="..." : de manier van horizontaal uitlijnen van de celinhoud
   align="left" : links uitlijnen
   align="right" : rechts uitlijnen
   align="center" : centreren
valign="..." : de manier van verticaal uitlijnen van de rijinhoud
   align="top" : aan de bovenkant uitlijnen
   align="bottom" : aan de onderkant uitlijnen
   align="middle" : in het midden uitlijnen
rowspan="..." : het aantal rijen dat een cel omspant (in het voorbeeld hierboven loopt de 1e cel over 3 rijen; in de 2e en 3e rij ontbreekt daarom de 1e cel en worden alleen de 2e en 3e cel vermeld)
colspan="..." : het aantal kolommen dat een cel omspant (in het voorbeeld hierboven loopt de 2e cel over 2 kolommen; de 3e cel ontbreekt dus)

De manier waarop kleuren worden aangeduid wordt uitgelegd in het gedeelte over kleuren.

Start | Basis | Links | Opmaak | Kleuren | Afbeeldingen | Tabellen | Opsommingen | Formulieren | Frames | Speciale tekens | Meta-tags