TABLES

Inleiding.
Mijn handleiding voor het "behandelen" van tables (tabellen).

De structuur van een tabel.
In deze handleiding ga ik ervan uit dat de lezer bekend is met de minimale structuur van een normale webpagina zoals hieronder weergegeven .

Voorbeeld

De verschillende varianten van de DTD (document type declaration) zijn te vinden in de: HTML 4.01 DTD specificatie

De HTML 4.01 tabel specificatie is de originele "standaard", dat zijn 2946 regels (Engels), op 1 lange bladzijde :-)
Deze handleiding heeft kleinere maar wel meer pagina's met de nodige voorbeelden.

Met HTML kun je tabellen definiëren om data in tabelvorm weer te geven.

Hoewel tabellen oorspronkelijk het licht zagen om data in tabellen te tonen worden ze in de huidige praktijk vooral (en veelvuldig) als lay-out methode gebruikt om tekst en grafische elementen attractief over het beeldscherm te verdelen .

Puristen vinden het maar niets dat tabellen misbruikt worden voor dat doel, maar de grenzen tussen structuur en inhoud zijn helemaal niet zo scherp als ze ons maar al te graag laten geloven.
De juiste verdeling van content over een webpagina is namelijk wel degelijk een structuur-aspect en gelijktijdig ook een opmaak-aspect.

Ook zijn er nog steeds problemen met andere, betere, lay-out mogelijkheden zoals het (gecombineerde) gebruik van bijvoorbeeld "float", "clear", "display", "visibility" en "position".
Eigenschappen die weliswaar al geruime tijd W3C.ORG standaard zijn, maar zelfs in de meest moderne browsers (die ook niet iedereen al heeft geïnstalleerd) nog niet tot volle tevredenheid gebruikt kunnen worden, zodat site-ontwerpers nog steeds uitwijken naar de vertrouwde mogelijkheden (en beperkingen) die tabellen nu eenmaal bieden.

Optisch gezien kun je tabellen verdelen in:
[1] tabellen (met kader) voor tabellarische data en in
[2] z.g. "blinde tabellen" (zonder kader) die dan ge- of misbruikt worden, om bijvoorbeeld tekst in meerdere kolommen te plaatsen of om een door de ontwerper gewenste verdeling van de content over het scherm te verkrijgen.

Voorbeeld

Zo ziet het er in het echt uit!

Toelichting

Het wordt allemaal nog in detail uitgelegd, maar hier alvast een kleine introductie:

<table> is het start-element van de tabel.
Als de tabel een kader moet hebben, zet dan in het start-element <table>, het attribuut border="1" (=kader), zie de source-code hierboven, met een grotere waarde dan "0".
De opgegeven waarde is de dikte van het kader in px.
In het geval van een "blinde"tabel laat je het attribuut "border" en de waarde (-0- of -1-) weg, of je maakt van de waarde netjes "0".

<tr> is de start-tag van een tr (table-row): een "regel" in een tabel.
Na de <tr> komt de start-tag van de tabel-cel <th> of <td>.
Na de afsluitende </th>-tag of </td>-tag wordt de betreffende regel met </tr> afgesloten.

Een tabel kan een of meerdere gewone cellen bevatten maar ook kopcellen of voetcellen.
Tekst in kopcellen wordt door de meeste browsers automatisch in het midden gecentreerd en in een vettere letter weergegeven.

<th> is de start-tag van een th (table header cel) het "kopje" boven een kolom cellen.
<td> is de start-tag van een "gewone" td (table data cel).
De inhoud van een cel moet altijd tussen het start-element en het sluit-element geplaatst worden. </th> en </td> zijn de sluit-elementen.
Officieel gezien hoeven deze sluit-elementen niet meer gebruikt te worden, maar ik kan je verzekeren dat er veel minder fout gaat indien je ze wel gebruikt, sommige browsers zijn erg pietluttig op dit punt.

In een th-cel of een td-cel kunnen alle mogelijke elementen geplaatst worden zoals tekst, plaatjes, andere block- of inline-elementen , je kunt in een td zelfs een complete andere tabel plaatsen.
In dat geval spreken we van een nested-table (geneste tabel).
Met </table> wordt de tabel afgesloten.

Opm. 1:
Let erop dat tussen het <table>-element en het <tr>-element, tussen het <tr> en het </tr>-element, tussen het <tr> en het <td>-element en de andere vergelijkbare gevallen, nooit "inhoud" zoals tekst, plaatjes o.i.d geplaatst worden.
Zet "inhoud" dus alleen tussen <th> en </th> en tussen <td> en </td>.

Opm. 2:
In het geval van "geneste" tabellen is het voor een goede werking (sommige browsers worden er erg nerveus van) af te raden om tussen het <td>-element en het erop volgende <table>-element "inhoud" te zetten.

Dus, als je problemen wilt vermijden, doe dan niet:

maar zorg ervoor dat "Hier staat tekst", tussen zijn eigen <td>"Hier staat tekst"</td> elementen staat.

Praktijk 1:
Bij sommige browsers (in het geval dat de inhoud van een cel nog niet ingevuld is: <td></td>) kan het voorkomen dat de cel zich visueel anders gedraagt dan dat je denkt.
Zet in zulke gevallen altijd (tenminste voorlopig tot de cel definitief gevuld is) een <br> tussen de <td> en </td>, dus als volgt: <td><br></td>.
Een andere oplossing is om tussen de <td> en </td>-elementen de volgende code te plaatsen: (& # 1 6 0 ;) dat is dezelfde code als: (& n b s p ;).

Praktijk 2:
Om makkelijk te kunnen werken met tabellen is het in de praktijk gebleken, dat het echt noodzakelijk is, dat je bij het maken van de tabel, voorlopig , de border op "1" zet <table border="1"> .
Alleen zo kun je namelijk zien wat er met de inhoud in de betrokken cellen gebeurt (is) als je tussentijds je creatie in je browser bekijkt.
Is alles naar wens zet dan pas de border op "0" (in het geval van een "blinde" tabel).