tabellen

Je kunt <table> gebruiken om een tabel te maken. 1 Waarheid als 1 Koe. Je kunt <table> ook gebruiken om een pagina indeling te maken. Die tweede tabel kan je meestal door een stylesheet vervangen.

Sommige webontwerpers vinden een tabel van de tweede soort verwerpelijk, van hun moet het met stylesheets. Het is waar dat je zo meestal een technisch mooiere oplossing krijgt. Vaak wat compacter en wat gemakkelijker te onderhouden.
Heb je zoiets als:

artikel stuksprijs aantal totaal
tafel 75,- 2 150,-
stoel 35,- 8 280,-

dan zou je wel gek zijn als je dat met <style> ging maken.

overzicht, basis

<table border=1 bordercolor=#aaaaaa celpadding=3 cellspacing=4
	width=5 height=6 bgcolor=#bbbbbb align="center">
<tr bgcolor=#cccccc valign="top" align="left">
<td bgcolor=#dddddd width=5 height=6 valign="bottom" align="right"
	 nowrap colspan=7 rowspan=8 ><font size=2>celinhoud</font>
</table>

Hierin is:

1	randbreedte, pixels
2	lettergrootte, hoort niet bij table
3	celinhoud tot celrand, pixels
4	cellen onderling, pixels
5	minimum breedte, pixels of procent
6	minimum hoogte, pixels of procent
7	overspant 7 kolommen
8	overspant 8 rijen
align	"left" (default), "center", "right", hele tabel, rij of cel
valign	"top", "middle" of "center" (default), "bottom", "baseline", hele rij of cel
nowrap	tekst op één regel
aaa 	randkleur, 6 hexadecimals (rrggbb), of naam
bbb 	achtergrondkleur tabel
ccc 	achtergrondkleur rij
ddd 	achtergrondkleur cel

Dit bovenstaande tabelletje is zo, zonder <table>, gemaakt:

<pre style="background:#fff; color:#000; font-family:sans-serif;
line-height:150%; border:0px;">

De twee kolommen worden door een Tab gescheiden. Ik vind dit kunstje zelf wel mooi, maar stijlkeuze doet er niets mee.

basis structuur

Een tabel heeft rijen en kolommen. Iedere rij moet je specificeren met <tr>, maar de kolommen ontstaan 'vanzelf':

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

Zijn er twee cellen op één rij, dàn zijn er twee kolommen.
Merk op dat de <tbody> tag ontbreekt, ik heb nog geen reden gevonden om die te gebruiken. De <th> ontbreekt ook, die zorgt voor een vette header. Zie de eerste tabel, die met de tafels en stoelen.

Merk ook op dat veel sluittags ontbreken. </td>, </tr> en </th> worden al geïmpliceerd door de volgende 'open' tag.

XHTML, ofwel eXtended HTML, eist dat je tags in paren gebruikt waar dat kan. Bij <td> moet er dus ook </td> zijn!

Hier meer over hoog-breed.

*A test table with merged cells*
	Average		Red eyes
	height	weight	Red eyes
Males	1.9	0.003	40%
Females	1.7	0.002	43%

Een voorbeeld uit de W3 documentatie.

<TABLE border="1" bordercolor="black"
          summary="This table gives some statistics about fruit
                   flies: average height and weight, and percentage
                   with red eyes (for both males and females)." align="center">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
    <TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>

De'summary' (samenvatting) wordt gebruikt door browsers voor blinden. Een tabel op een brailleregel werkt niet echt...

een tekstje	geen align	valign Bij vertical align kan je top, bottom of baseline opgeven. Center of middle kan ook, maar dat krijg je ook zonder valign, default. "top" zal duidelijk zijn. Tussen "baseline" en "top" zie ìk geen verschil. Dit ding is zelf een tabel, deze kolom gebruikt rowspan="4".
een tekstje	top align
een tekstje	baseline align
een tekstje	bottom align

3x3

aap	noot	mies
wim	zus	jet
teun	vuur	gijs

<table align="center">
<tr><td>aap<td>noot<td>mies
<tr><td>wim<td>zus<td>jet
<tr><td>teun<td>vuur<td>gijs
</table>

De breedte van een kolom wordt automatisch die van het breedste element. De tabel ziet er beter uit als alle kolommen even breed zijn zoals hier:

aap noot mies
wim zus jet
teun vuur gijs

<table align="center" width="200"> <colgroup span="3" width="33%"> </colgroup> <tr><td>aap<td>noot<td>mies <tr><td>wim<td>zus<td>jet <tr><td>teun<td>vuur<td>gijs </table>

Door <colgroup span="3" width="33%"> krijgt iedere kolom 1/3 van (in dit geval) 200 pixels. Hoe groot iedere cel is wordt duidelijk als er randjes omheen staan:

aap noot mies
wim zus jet
teun vuur gijs

<table border=2 align="center" width="200"> <colgroup span="3" width="33%"> </colgroup> . .(die leesplank weten we nou wel) . </table>

Je kunt de tabel en/of een enkele cel kleuren:

aap noot mies
wim zus jet
teun vuur gijs

<table border=2 bgcolor="red" align="center" width="200"> <colgroup span="3" width="33%"> </colgroup><tr>.... <tr bgcolor="green">..... <td bgcolor="blue">jet<tr>.... </table>

Jet is niet erg leesbaar: blauwe letters op een blauwe achtergrond.

aap noot mies
wim zus jet
teun vuur gijs

<table align="center" cellpadding="10"> <colgroup span=1> <col bgcolor="red"><col><col bgcolor="#66ff66"> </colgroup> . . </table>

Je kunt hele kolommen een kleur geven. Merk op waarom de middenkolom geen kleur krijgt. Ondanks het ontbreken van border blijft er toch een randje zichtbaar. Dat verdwijnt als je cellspacing="0" opgeeft.

Je kan het net zo gek maken als je wil:

aap noot mies
wim zus jet
teun vuur gijs

aap noot mies
wim zus jet
teun vuur gijs

Deze hele tabellen-tekst stond zelf ook weer in een tabel met één rij en één kolom. De sterren links en rechts kwamen van de basis-achtergrond, de tabel, gecentreerd en 666 pixels breed bevat alle tekst. Dit blokje heeft een achtergrondkleur #9999ff en een tekstkleur #ffff00. (Nu weet ik dat je dit niet moet doen. Een tabel met maar één cel is zinloos, eventuele effecten kan je beter met style maken)

Zo'n blokje als boven kan je eigenlijk beter met <style> maken. Dat doe ik hier, met dezelfde kleuren als hierboven. Wie heel goed kijkt ziet dat deze iets smaller is. Ik heb marges van 3% gekozen: daarom blijft er voor het blok zelf 94% over. Één %, zo'n 6 pixels verschil.
Voor 't zelfde geld kan je links en rechts verschillende marges nemen, wat met <table> niet zo eenvoudig is.

Klik hier voor meer over stijl/tabel combinaties.

Een effectieve tabel met <style> en javascript.

Klik hier voor meer over de breedte van cellen en tabellen.

Klik hier voor een toepassing van colgroup. Vaak nodig: in de linker kolom tekst links, in de andere rechts. Vaak opgelost met een align bij iedere td! Colgroup is dan aanzienlijk eleganter.

cel een	cel twee
cel drie	cel vier

Deze enkele randjes krijg je door

 <table border="1" cellspacing="0" cellpadding="4" bordercolor="black">

cel een cel twee
cel drie cel vier

Die nog smallere randjes krijg je door:

<table border="1" style="border-collapse:collapse;"
cellspacing="0" cellpadding="4" bordercolor="black">

In het eerste geval is een 1 pixel rand om iedere cel, en daarom heen nog een 1 pixel rand. Samen dus 2 pixel. 'Collapse' betekent hier samenvallen, dus 1 pixel. De vertaling 'flauwvallen' lijkt me niet van toepassing...

De tabel aan het begin van dit stuk kan je, met Internet Explorer, ook zo laten zien:

artikel	stuksprijs	aantal	totaal
tafel	75,-	2	150,-
stoel	35,-	8	280,-

Deze code (vier keer zoiets!) doet dat:

<th style="writing-mode:tb-rl">artikel

... maar niet voor Netscape.

En nu, de tabelloze tabel:

artikel	stuksprijs	aantal	totaal
tafel	75,-	2	150,-
stoel	35,-	8	280,-

Niet zichtbaar is dat al die ruimte tussen de kolommen met 'Tab' gemaakt is.

<pre style="font-family:sans-serif;background:#fff; margin:30px; border:none;">
artikel	stuksprijs	aantal	totaal
tafel	75,-	2	150,-
stoel	35,-	8	280,-
</pre>

Gebruik je NoteTab? Wil je de tabs zien met dezelfde breedte als IE ze weergeeft? Kies dan via View-Options-Document-Fonts hetzelfde lettertype als wat je in je HTML-blad gebruikt.
Mijn <pre> laat gewoonlijk een grijs blok met zwarte rand zien. Dat komt door een stylesheet: 'gewonobody.css'. Zie mijnstijl

Netscape denkt weer nèt even anders over tabs dan I.E., de methode is niet echt aanbevelenswaardig voor tabellen.

een geneste tabel uit de NIWO nieuwsgroep:

Links

Boven

Onder

Rechts

<table border=1>
<tr><td>Links
<td>
<table border=2>
 <tr><td>Boven
 <tr><td>Onder
</table>
<td>Rechts
</table>

Als je de code van het bovenstaande bekijkt zie je dat deze twee dingen samen in een overkoepelende tabel staan: dubbel genest dus.

Eens zien of ik het zelf kan. Soortgelijke tabel, maar zonder nest:

Links	Boven	Rechts
	Onder

<table border="1">
<tr>
<td rowspan="2">Links
<td>Boven<td rowspan="2">Rechts
<tr><td>Onder
</table>

Niet al te moeilijk. Om ditzelfde met alleen <style> te doen is wèl al te moeilijk. Het kan wel, maar met tien keer zoveel code, zonder enig voordeel. Dat probeersel zet ik dus maar niet hier.

Molenwiek tabel		aap bla
nl.internet.www.ontwerp	xxxxxx
	NIWO nieuwsgroep

Deze vond ik wel leuk. Mooi gebruik van 2 x rowspan en 2 x colspan. In de tabel staat waar ik hem vond.

Je hebt in HTML niet iets om de eigenlijke code te laten zien. Overal waar > of < staat moet je > of < tikken. Die grijze blokken met code zijn gevuld met een copie van de tabel waar ze over gaan. Arachnophilia en NoteTab hebben functies om al die < en > te vervangen, waardoor het gewone tekst wordt. Dat doe ik nou ook nog even met de molenwiek tabel:

<table border="3" cellspacing="0" cellpadding="10"> <tr> <td colspan="2"><center>Molenwiek tabel</center><td rowspan="2"> aap bla <tr> <td rowspan="2"> nl.internet.www.ontwerp<td> xxxxxx <tr> <td colspan="2">NIWO<br>nieuwsgroep </table>

Nadere verklaring: je hebt in feite deze tabel:

A B C
D E F
G H I

<table border="3" bgcolor="#aaaaaa"> <tr><td>A<td>B<td>C <tr><td>D<td>E<td>F <tr><td>G<td>H<td>I </table>

Nu maak je met colspan van A&B een cel, en ook van H&I:

A&B C
D E F
G H&I

<table border="3" bgcolor="#aaaaaa"> <tr><td colspan="2">A&B<td>C <tr><td>D<td>E<td>F <tr><td>G<td colspan="2">H&I </table><br>

Dan met rowspan een cel van D&G en ook van C&F. Alleen E blijft wat hij is.

A&B C
F
D
G E
H&I

<table border="3" bgcolor="#aaaaaa"> <tr><td colspan="2">A&B<td rowspan="2">C<br>F <tr><td rowspan ="2">D<br>G<td>E <tr><td colspan="2">H&I </table>

Een schaakbord kan mooi in een tabel

Deze landschappen komen uit 'plaatjes':

BMP JPG GIF
HUISBOOM.BMP HUISBOOM.JPG HUISBOOM.GIF

Dit is de code die ze laat zien:


HUISBOOM.BMP	HUISBOOM.JPG	HUISBOOM.GIF

<table width="50%"> <colgroup span="3" align="center" width="33%"> </colgroup><tr> <td><img src="huisboom.bmp"> <td><img src="huisboom.jpg"> <td><img src="huisboom.gif"> <tr> <th>HUISBOOM.BMP <th>HUISBOOM.JPG <th>HUISBOOM.GIF </table>
<th> mag ook als trailer inplaats van als header!

plaatjes met tekst

Bij de plaatjes is te zien hoe je een tekst op een plaatje kan zetten binnen HTML. Dit is de code hiervoor:

<table align="center"><tr> <td width="195" height="150" background="46_15.jpg" align="center" valign="bottom"> <font face="verdana,arial" size ="6" color="#ffffff"> zomerhuis</table>

Of deze, met de schuivende tekst:

<table align="center"><tr> <td width="195" height="150" background="46_15.jpg" valign="top"> <font face="verdana,arial" size ="6" color="#ffff00"> <marquee width="50%" scrolldelay="0" behavior=left> te koop: zomerhuisje, vaste prijs 2.250.000,-</marquee> </table>

Neem je hoogte of breedte te klein dan wordt het plaatje afgesneden, neem je ze te groot dan wordt het plaatje herhaald. Geef het plaatje dus van te voren met een grafisch programma de gewenste afmetingen.

Een tabel met één cel lijkt niet effectief. Het kan met <style> maar dan heb je wel 2x zoveel code nodig.

Hier is de popup-briefkaart.

<html><head><title>briefkaart staand</title> <style>.wit{color: white; font-size: 40;}</style></head> <body background="ster.jpg"> <table cellspacing="35" align="center" class="wit"><tr valign="bottom"> <td width="195" height="150" background="bwplt\46.jpg"> voor <td width="195" height="150" background="bwplt\48.jpg"> rechts <tr valign="bottom"> <td width="195" height="150" background="bwplt\50.jpg"> links <td width="195" height="150" background="bwplt\54.jpg"> achter <tr><td colspan="2"><font face="verdana,arial", color="red" size="6"> <i>Groeten uit Ermelo</i></table> </body></html>

De validator, de échte van W3C, heeft veel klachten over dit verhaal. Ik negeer die klachten totdat ik iets beters bedacht heb. In IE ziet alles er uit zoals ik bedoel, in Opera en Mozilla is het vrijwel identiek.
De CSE lite v3.50 validator kan niet tegen de ontbrekende </td> en </tr>, die is dus eigenlijk onbruikbaar.

Nog meer tabellen? Spreadsheet!

Tabellen

overzicht, basis

basis structuur

valign

3x3

plaatjes met tekst