HTML Opmaak

HTML Tabellen (tables)

  • Vroeger werden tabellen algemeen gebruikt voor de opmaak van webpagina's.
    Ook tegenwoordig zijn er nog veel websites opgebouwd met tabellen.
    • Ze zijn handig om de inhoud netjes en op de juiste plaats weer te geven.
    • Tegenwoordig wordt er echter uitgebreid gebruik gemaakt van div's en stylesheets om de opmaak van pagina's te verzorgen.
  • Tabellen worden gedefiniëerd door de <table> tag.
  • Een tabel wordt verdeeld in rijen met de <tr> tag (table row).
  • Elke rij wordt verdeeld in cellen met de <th> tag (table header) of/en de
    <td> tag (table data).
  • Een cel (<th>, <td>) kan tekst, foto's, afbeeldingen, links, lijsten, formulieren, nieuwe tabellen, enz. bevatten.

Voorbeeld

<html>
<body>

<table>
<tr>
<td>rij 1, cel 1</td>
<td>rij 1, cel 2</td>
</tr>
<tr>
<td>rij 2, cel 1</td>
<td>rij 2, cel 2</td>
</tr>
</table>

</body>
</html>

Resultaat :

rij 1, cel 1 rij 1, cel 2
rij 2, cel 1 rij 2, cel 2

naar boven 

HTML border attribuut bij tabellen

  • Wanneer het border attribuut niet is gespecificeerd (border="0") worden er geen lijnen weergegeven.
  • Dit kan soms handig zijn, maar meestal willen we toch de lijnen tonen.
  • Het border attribuut geeft lijnen aan elke cel en rond de gehele tabel.
  • Wanneer de waarde wordt gewijzigd geldt dit enkel voor de lijn rond de gehele tabel, de lijnen rond de cellen blijven 1px.

voorbeeld : border="7"

rij 1, cel 1 rij 1, cel 2
rij 2, cel 1 rij 2, cel 2

naar boven 

De HTML rij- en koptitel

  • De kop van elke rij of kolom in een tabel kan worden gedefiniëerd met de <th> tag.
  • Alle grote browsers geven de tekst in het <th> element weer als vetjes gecentreerd.
<html>
<body>

<table border="3">
<tr>
<th></th>
<th>kolom 1</th>
<th>kolom 2</th>
</tr>
<tr>
<th></th>
<th>rij 1</th>
<td>rij 1, cel 1</td>
<td>rij 1, cel 2</td>
</tr>
<tr>
<th>rij 2</th>
<td>rij 2, cel 1</td>
<td>rij 2, cel 2</td>
</tr>
</table

</body>
</html>

Resultaat :

kolom 1 kolom 2
rij 1 rij 1, cel 1 rij 1, cel 2
rij 2 rij 2, cel 1 rij 2, cel 2

naar boven 

nota

De zichtbare resultaten kunnen verschillend zijn in de verschillende browsers.
tip

Daarom is het gebruik van CSS aanbevolen !
  •   mogelijkheden met HTML tabellen

naar boven 

Tabel elementen

Element Beschrijving Attributen
<caption> Definieert een bijschrift. align
<col>
In XHTML <col />		 Definieert de attribuutwaarden voor één of meer kolommen. align, char, charoff, span, valign, width
<colgroup> Definieert één of meer kolommen tot een kolomgroep. align, char, charoff, span, valign, width
<table> Definieert het begin en einde van een tabel. align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width
<tbody> Definieert de feitelijke gegevens van een tabel. align, char, charoff, valign
<td> Definieert een cel uit een rij van een tabel. abbr, align, axis, bgcolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width
<tfoot> Definieert de rijen die de verschillende kolommen afsluiten. align, char, charoff, valign
<th> Definieert een titelcel van een tabel. abbr, align, axis, bgcolor, char, charoff, colspan, height, nowrap, rowspan, scope, valign, width
<thead> Definieert de rijen die de titelcellen van een tabel bevatten. align, char, charoff, valign
<tr> Definieert het begin en het einde van een rij. align, bgcolor, char, charoff, valign
  • + eventuele standaard en gebeurtenis attributen.

naar boven 

naar boven naar boven naar table
naar boven naar het table element