logo
  Titel
  Tables zijn heel makkelijk te maken...
<table>
<tr>
<td></td>
</tr>
</table>
De opmaak hiervan wordt een ander verhaal. Dit kunnen we het beste doen met css. Laten we makkelijk beginnen.

Hoogte en breedte:

HTML
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

CSS
table {
border: 1px #2b2b2b solid;
width: 400px;
height: 100px;}
td, th {
border: 1px #2b2b2b solid;}
Dat ziet er dan zo uit:

Je ziet... in de html hoef je niets van opmaak te zetten, alles wordt geregeld door de css.

Maximaal en minimaal:
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

CSS
table { border:1px #000000 solid;
width: 100%;
max-width: 500px;
min-width: 350px; }
td, th {
border: 1px #000000 solid;}

Dit ziet er een beetje raar uit, want aan de ene kant zeg je dat de breedte 100% moet zijn en aan de andere kant moet toch weer die maximale breedte 500px en minimaal 350px.
Daar is een hele logische verklaring voor, want stel dat jij nog een schermresolutie hebt van 1024 x 768, maar de bezoeker heeft een schermresolutie van 2400 x 1200. Bij jou ziet de opmaak van je website er prachtig uit, maar bij de bezoeker heel lelijk lang opgerekt.
Dus als jij kijkt is het dan een breedte van 350px en bij de bezoeker 500 px, dus toch variable, maar met beperkingen.
Dit geld ook voor de hoogte alleen dan zet je dit neer:
max-height: 500px;
min-height: 300px;

Border:
Een toch wel vaak gebruikt element is de border, het is de 'versiering' van de table. Hier zijn een aantal voorbeelden:

table, td, th { border: 1px #000000 solid; }

table { border: 1px #000000 solid; }

td, th { border: 1px #000000 solid; }

'Collapse'
HTML
<table id="voorbeeld1"> (of voorbeeld2)
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

CSS
table {
border: 1px #000000 solid;
width: 400px;
margin-bottom: 20px;}
td, th {
border: 1px #000000 solid;}
#voorbeeld1 {
border-collapse: collapse;}
#voorbeeld2 {
border-collapse: separate;}

Ruimtes creëren met de borders.
HTML
<table id="voorbeeld1"> (of voorbeeld2)
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

CSS
table {
border: 1px #000000 solid;
width: 400px;
margin-bottom: 20px;}
td, th {
border: 1px #000000 solid;}
#voorbeeld1 {
border-spacing: 5px; }
#voorbeeld2 {
border-spacing: 10px 1px;}
Als je een table gebruikt is het soms duidelijker als je borders gebruikt. Maar als de cel leeg is, dan zie je een rechthoekje met niets er in. Ook hier is een oplossing voor. Als de cel leeg is is er ook geen border.

HTML
<table id="voorbeeld1"> (of voorbeeld2)
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

CSS
table {
width: 400px;
margin-bottom: 20px;}
td, th {
border: 1px #000000 solid;}
#voorbeeld1 {
empty-cells: show; }
#voorbeeld2 {
empty-cells: hide;}
 

Backgroundcolor-image:
Natuurlijk kan je ook met kleuren gaan werken en hier zie je een aantal voorbeelden:

table { background-color: #A8D5FF; }

Hier verander je de <tr> tag in <tr style="background-color:#FFF000;">

Hier verander je de <td> tag in <td style="background-color:#FFF000;">

In plaats van background-color:#FFF000 te gebruiken, kan je ook een plaatje gebruiken en daarvoor gebruik je dan:
background-image: url(jouplaatje.png);

Je kan ook lijntjes maken waardoor het net lijkt of je op lijntjespapier schrijft zoals hieronder


Hiervan zet je dit in je css:

table { width: 400px; }
td, th { border-bottom: 1px #000000 solid; }

Float:
Normaal krijg je het niet voor elkaar om een tekst naast een table te krijgen, maar met de float tag wel en je kan de table links of rechts zetten, zie het voorbeeld hieronder.

 
HTML
<table id="voorbeeld1"> (of voorbeeld2)
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
CSS
table {
border: 1px #000000 solid;
width: 200px;
} td, th {
border: 1px #000000 solid;}
#voorbeeld1 {
float: left;}
#voorbeeld2 {
float: right;}
  Na deze float is het beste even alles aftesluiten met:
 
HTML
<p class="clear"></p>
CSS
.clear {
clear: left; } of:
.clear {
clear: left; } of:
.clear {
clear: both;
  Nou zit de tekst aan de zijkant van de table tegen de table aan, maar ook daar is een oplossing voor:br> table {
width: 200px;
float: left;
margin: 5px 10px;
}
Dit houdt in dat de bovenkant en onderkant 5 px ruimte heeft en links en rechts 10 px.

Regels:
Het kan wel eens handig zijn om in je table duidelijk te laten zien welke regel men nou eigenlijk zit.

Hierboven zie je dat de oneven lijnen donkerder zijn. In jou css zet je het volgende neer:

table tr:nth-child(odd) {background-color:#E6E6E6;}

Aan de table zelf hoef je niets te veranderen dit gaat
vanzelf.
Wil je zoals hieronder de de even regels ook een ander kleurtje geven, dan doe je het volgende:

table tr:nth-child(odd) {background-color:#E6E6E6;}
table tr:nth-child(even) {background: #E6E6D4}

Je ziet dat dit helemaal niet zo moeilijk is, een piepklein regeltje maar in je css.

Wil jou nou een regel, bijvoorbeeld de koptekst een andere kleur hebben, dan zet je er
een regeltje bij:

table tr:nth-child(odd) {background-color:#E6E6E6;}
table tr:nth-child(even) {background: #E6E6D4}
table tr:nth-child(1) {background-color:#000000; color:#FFFFFF;}

Als je de van de koptekst een footer wil maken dan vul je ipv 1 nu in dit geval 9 in

Als je nou bijvoorbeeld elke 3e regel een andere kleur wilt hebben kan dat ook:

table tr:nth-child(odd) {background-color:#E6E6E6;}
table tr:nth-child(even) {background: #E6E6D4}
table tr:nth-child(3n) {background-color:#000000; color:#FFFFFF;}

Natuurlijk kunnen we dit ook verticaal doen:

table td:first-child {background-color:#000000; color:#FFFFFF;}
table tr:nth-child(odd) {background: #E6E6D4}
table td:nth-child(even) {background-color:#E6E6E6;}

Je kan ook een tabel maken met lijnen zoals hieronder

 
HTML
<table summary="Employee Pay Sheet" id="hor-minimalist-a">
<thead>
<tr>
<th scope="col">Naam</th>
<th scope="col">Salaris</th>
<th scope="col">Bonus</th>
<th scope="col">Chef</th>
</tr>
</thead>
<tbody>
<tr>
<td>K. Jannssen</td>
<td>&euro;1300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>J. Maffenhof</td>
<td>&euro;1150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>G. Wingping</td>
<td>&euro;1200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>X. Xoetenbeecke</td>
<td>&euro;1175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>
CSS
#hor-minimalist-a {
background:#FFF none repeat scroll 0 0;
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#hor-minimalist-a th {
border-bottom:2px solid #6678B1;
color:#039;
font-size:14px;
font-weight:normal;
padding:10px 8px;
}
#hor-minimalist-a td {
color:#669;
border-bottom:1px solid #CCC;
padding:9px 8px 0;
}
#hor-minimalist-b tbody tr:hover td {
color:#009;
}

 
eind