borders, frame en rules.

<... border="1"> wordt gebruikt om een tabel met een "kader" (border) te tonen.
<... border="1" frame="..."> wordt gebruikt om te bepalen "hoe" het kader eruit moet zien.
<... border="1" rules="..."> wordt gebruikt om te bepalen "hoe" de lijnen tussen de cellen eruit moeten zien.

De materie wordt nu iets ingewikkelder, hetgeen geen verwondering hoeft te wekken, want we gaan het hebben over <table border="getal"> en hoe het kader (en de lijnen tussen de cellen) eruit kan zien in moderne browsers.

Belangrijk:
Wat nu volgt werkt alleen in de allermodernste browsers, dus als je ook bezoekers met oude(re) browsers verwacht kun je dit voorlopig overslaan.

Vroeger was het eenvoudig om een kader te maken rond een tabel, met border="1" (=1px) zie je een kader, met border="0" zie je geen kader.
Als je "1" veranderde in "2" werd het kader dikker enzovoort, zie de vroegere voorbeelden.

De nieuwste browsers kunnen echter meer.
Er is iets nieuws: <table border="..." ... frame="...">.

De nieuwe combinatie wordt nu bijvoorbeeld <table border="3" frame="box" >, (<table border="3" frame="border" > mag ook en heeft hetzelfde effekt).

Even een stukje source terughalen dat we al eerder hebben gebruikt en zoals hierboven aangegeven veranderen door het toevoegen van frame="void".

Zoals gezegd kunnen oude(re) browsers geen voorbeelden laten zien dus doen we het maar weer met een plaatje:

De tabel op het plaatje hierboven heeft geen buitenkader omdat we gebruik hebben gemaakt van frame="void", maar heeft wel horizontale en verticale lijnen.

Naast frame="void" zijn er nog meer mogelijkheden:
Met frame="above" (above = boven) krijgen we alleen boven een lijn.
Met frame="below" (below = onder) krijgen we alleen onder een lijn.
Met frame="hsides" (hsides = horizontal sides = horizontale zijden) boven en beneden een lijn.
Met frame="vsides" (vsides = vertical sides = verticale zijden) links en rechts een lijn.
Met frame="lhs" (lhs = left hand side = links) alleen links een lijn.
Met frame="rhs" (rhs = right hand side = rechts) alleen rechts een lijn.

De plaatjes denk je er maar bij :-)

Ja maar, hoor ik je al zeggen, hoe zit het met die 2 horizontale en die 2 verticale lijnen tussen de cellen, die zie ik nog steeds op dat plaatje hierboven, daar wil ik ook iets aan veranderen. Nou dat kan, dat doen we als volgt.

We3er even een stukje source terughalen en veranderen door het toevoegen van rules="none".

De tabel op het plaatje hierboven heeft alleen een buitenkader omdat we gebruik hebben gemaakt van rules="none", heeft dus geen horizontale of verticale lijnen tussen de cellen.

De mogelijkheden onder elkaar:
Met rules="none" (none = geen) geen lijnen, alleen een buitenkader.
Met rules="rows" (rows = regels) alleen horizontale lijnen tussen de cellen.
Met rules="cols" (cols = columns = kolommen) alleen verticale lijnen tussen de cellen.
Met rules="all" (all = allemaal) alle lijnen binnen het kader.
Met rules="groups" (groups = groepen) alleen lijnen tussen kop en body en tussen body en footer.

Daar hebben we een plaatje van (met buitenkader):