foutieve- en gedoogde-tables | gedoogde- en perfecte-tables
| onderwerp | omschrijving | gecentreerde header | |
| gecentreerd | gecentreerd | ||
| voorbeelden | slechte | sites | 13 |
| goede | websites | 34 | |
| perfecte | browsers | 34 | |
| denkwijze | redelijke | tables | 32 |
| leuke | headers | 43 | |
In de google-balk heb ik table example ingetikt. Op de eerste pagina met resultaten heb ik een website gekozen, die gezien zijn hoge positie bij de zoekmachine, goede informatie zou moeten kunnen verschaffen over hoe je met tables "omgaat". Het voorbeeld hierboven (met een gewijzigde textuele inhoud mijnerzijds...) voldeed aan werkelijk álles wat ik verwacht had.
volkomen invalide, ouderwetse en foutieve code
Kijk even helemaal onderop de pagina wat voor een gedrocht aan code daar staat.
Deze pagina dient er overigens voor om jou er te van overtuigen dat er altijd betere manieren zijn, dan om tables te gebruiken. Op de kompoos zal je ze werkelijk mondjesmaat vinden, en dan nog alléén als het een functie heeft (zoals op deze pagina).
Dat neemt niet weg dat ik niemand zal verbieden om tables te gebruiken. Vandaar dat ik de code dusdanig heb aangepast dat die (met een exact dezelfde "uitkomst") voor de html5 (W3C) valideert. Dit is trouwens geen garantie dat dát zo blijft. Met de regelmaat van de klok wordt de html5 "bijgeschaafd". Ik blijf er op hameren: als het even NIET nodig is, GEEN tables gebruiken.
<table border="1">
<thead>
<tr>
<td class="breed25pct">onderwerp</td>
<td class="breed25pct">omschrijving</td>
<td class="centreer breed50pct" colspan="2" >gecentreerde header</td>
</tr>
<tr>
<td class="breed25pct"> </td>
<td class="breed25pct"> </td>
<td class="centreer breed25pct">gecentreerd</td>
<td class="centreer breed25pct">gecentreerd</td>
</tr>
</thead>
<tbody>
<tr>
<td class="breed25pct" rowspan="3">voorbeelden</td>
<td class="breed25pct">slechte</td>
<td class="breed25pct">sites</td>
<td class="breed25pct">13</td>
</tr>
<tr>
<td class="breed25pct">goede</td>
<td class="breed25pct">websites</td>
<td class="breed25pct">34</td>
</tr>
<tr>
<td class="breed25pct">perfecte</td>
<td class="breed25pct">browsers</td>
<td class="breed25pct">34</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="breed25pct" rowspan="2">denkwijze</td>
<td class="breed25pct">redelijke</td>
<td class="breed25pct">tables</td>
<td class="breed25pct">32</td>
</tr>
<tr>
<td class="breed25pct">leuke</td>
<td class="breed25pct">headers</td>
<td class="breed25pct">43</td>
</tr>
</tbody>
</table>
<style type="text/css">
table{
width:100%}
.centreer{
text-align:center}
.breed25pct{
width:25%}
.breed50pct{
width:50%}
td{
padding:0 0 2px 5px}
</style>
<table border="1" width="100%" height="176">
<colgroup align="left">
<colgroup align="left">
<colgroup align="center" span="2">
<thead>
<tr>
<td scope="col" width="25%" height="19">onderwerp</td>
<td scope="col" width="25%" height="19">omschrijving</td>
<td width="50%" scope="colgroup" colspan="2" height="19">browsers</td>
</tr>
<tr>
<td width="25%" height="19"> </td>
<td width="25%" height="19"> </td>
<td scope="col" width="25%" height="19">strict</td>
<td scope="col" width="25%" height="19">slecht</td>
</tr>
</thead>
<tbody>
<tr>
<td scope="rowgroup" width="25%" rowspan="3" height="69">voorbeelden</td>
<td scope="row" width="25%" height="19">slechte</td>
<td width="25%" height="19">sites</td>
<td width="25%" height="19">13</td>
</tr>
<tr>
<td scope="row" width="25%" height="19">goede</td>
<td width="25%" height="19">websites</td>
<td width="25%" height="19">34</td>
</tr>
<tr>
<td scope="row" width="25%" height="19">perfecte</td>
<td width="25%" height="19">browsers</td>
<td width="25%" height="19">34</td>
</tr>
</tbody>
<tbody>
<tr>
<td width="25%" scope="rowgroup" rowspan="2" height="45">denkwijze</td>
<td scope="row" width="25%" height="20">redelijke</td>
<td scope="row" width="25%" height="20">tables</td>
<td width="25%" height="20">32</td>
</tr>
<tr>
<td width="25%" height="19">leuke</td>
<td width="25%" height="19">headers</td>
<td width="25%" height="19">43</td>
</tr>
</tbody>
</table>