logo
  Tabel
  Tabellen zijn saai wordt er vaak gezegd, maar dat dat niet waar is en dat je er veel meer mee kan zal ik je hier tonen. De standaard tabel ziet er zo uit:

<table width="500px" border="0" cellspacing="0"> Hier begint de tabel
<tr> kolomregel
<th>&nbsp;</th> kolomkop
</tr> kolomregel sluiten
<tr> kolomregel
<td>&nbsp;</td> cellen
</tr> regel sluiten
</table> tabel wordt hier afgesloten


Koptekst

Koptekst bij een table kan je zo doen:

dagen van de maand
   
   

Je moet een extra rij maken, tekst centreren en 'vet' maken. Echt mooi is het niet, want je kan duidelijk zien dat hij in de tabel staat. Maar het kan mooier, bij deze lijkt het er net op dat de tekst buiten de tabel staat, maar hij staat er gewoon in,

dagen van de maand
   
   

Dit doe je zo:

<table width="50%">
<caption><strong>tekst</strong></caption>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Commentaar

commentaar bij een table zetten zonder dat de bezoeker het ziet kan ook:

<table width="50%" summary="mijn commentaar neerzetten zonder een ander het ziet">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Kantlijnen

Kantlijnen voor het frame de buitenrand

   
   

<table width="50%" frame="border">
<tr>
<td>hosdfsdf</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Attributen voor de randen
void geen randen (dit is de standaardwaarde)
above bovenkant
below onderkant
hsides boven en -onderkant
lhs linkerkant
rhs rechterkant
vsides linker- en rechterkant
border alle vier zijden

Rules Attributen

   
   

<table width="50%" rules="all">
<caption><strong>tekst</strong></caption>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

none: geen lijnen (dit is de standaardwaarde)
groups: alleen de lijnen tussen de rijgroepen en kolomgroepen
rows: alleen de lijnen tussen de rijen
cols: alleen de lijnen tussen de kolommen
all: alle lijnen tussen de rijen en kolommen.

Scrollen in de tabel

Je kent het wel, je hebt een tabelletje gemaakt, maar in een vakje past niet helemaal jou tekst, dus heb je een probleem, want je wilt eigenlijk dat vakje niet groter maken.
De oplossing is dus een scoll te maken in je tabel
dit is een vakje
dit is een vakje dit is een vakje

<table width="50%">
<tr>
<td><div style="overflow: scroll; overflow-x: hidden; height: 35px;">tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
</tr>
</table>

Algemeen
Je kent wel het probleem dat je tekst zo groot is, dat het niet in het vakje past. Hiervoor hebben we in CSS een attribuut, nl. overflow. Je moet wel in acht houden dat het minimaal 35px hoog moet zijn, want anders krijg je problemen met de scrollknoppen. Het kan verschillende waarden bevatten:

scroll : hier worden automatisch scrollbars gezet, ook als de afbeelding of tekst niet groter is dan het vakje waar het in moet passen.
auto : hier worden automatisch scrollbars weergegeven als de inhoud groter wordt dan het vakje.
hidden : Alles wat over de grenzen van het vakje komt, wordt verborgen.
visible : alles wat over het vakje komt, wordt weergegeven zonder scrollbars, het vakje wordt dus groter al de inhoud ook groter wordt.

Je kan ook met een hele tabel scrollen zoals hieronder:

     
     
     
     
     
     

Dit lijkt op een iframe, maar is gemaakt met div-tag.

<div>
<div style="width: 500px; height: 80px; overflow-y:scroll; overflow-x:hidden;">
<table width="500">
<tr>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
</tr>
<tr>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
</tr>
<tr>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
<td class="table-a">&nbsp;</td>
</tr>
</table>
</div>
</div>

Zo zie je maar: er is veel met tabellen te doen

 
eind