Tabellen en kolommen

In 2003 zette iedereen dingen naast elkaar met een tabel. Dat werkt nog steeds. Tegenwoordig kan het ook met kolommen in CSS, en die zetten de stukken op een telefoon netjes onder elkaar.

Een tabel zoals toen

Een tabel bestaat uit rijen (<tr>) met cellen erin (<td>). Met de attributen op <table> geef je hem zijn uiterlijk:

• border is de dikte van de rand, 0 is geen rand;
• cellpadding is de ruimte binnen een cel, cellspacing de ruimte tussen de cellen;
• width is de breedte, bgcolor de kleur (ook op een losse cel);
• colspan="2" laat een cel over twee kolommen lopen.

<table border="1" cellpadding="6" cellspacing="0" width="100%">
<tr><td colspan="2" bgcolor="#e0338a"><font color="white"><b>Gegevens van {naam}</b></font></td></tr>
<tr><td bgcolor="#ffe3f1" width="40%">Woonplaats</td><td>Utrecht</td></tr>
<tr><td bgcolor="#ffe3f1">Lievelingskleur</td><td>Roze</td></tr>
<tr><td bgcolor="#ffe3f1">Muziek</td><td>Van alles</td></tr>
</table>

Een indeling met een tabel

Zo maakte je vroeger twee kolommen: een tabel met één rij en twee cellen. valign="top" zet de tekst in elke cel bovenaan.

<table width="100%" cellpadding="8" cellspacing="4">
<tr>
<td width="35%" valign="top" bgcolor="#e7f5ff"><b>Links</b><br>Een smalle kolom, bijvoorbeeld voor je gegevens.</td>
<td valign="top" bgcolor="#fff9db"><b>Rechts</b><br>Een brede kolom voor je verhaal.</td>
</tr>
</table>

Een tabel blijft altijd naast elkaar staan. Past hij niet op een telefoon, dan moet je bezoeker hem opzij schuiven. Voor een tabel met gegevens is dat prima; voor de indeling van je pagina zijn kolommen beter.

Kolommen met flex

Zet de stukken in een <div> met display: flex: dan staan ze naast elkaar. flex: 1 geeft elke kolom even veel ruimte, en gap is de ruimte ertussen. Met een klasse in een <style> hoef je dat maar één keer op te schrijven.

<style>
.kolommen { display: flex; gap: 10px; }
.kolom { flex: 1; padding: 8px; background-color: #e7f5ff; }
</style>
<div class="kolommen">
<div class="kolom">Eerste kolom</div>
<div class="kolom">Tweede kolom</div>
<div class="kolom">Derde kolom</div>
</div>

Kolommen met grid

Met display: grid kies je zelf hoe breed elke kolom is. grid-template-columns: 1fr 2fr betekent: twee kolommen, en de tweede is twee keer zo breed als de eerste.

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px">
<div style="padding: 8px; background-color: #fff3bf">Smal</div>
<div style="padding: 8px; background-color: #d3f9d8">Twee keer zo breed</div>
</div>

Op een telefoon onder elkaar

Met @media geef je regels die alleen gelden op een smal scherm. @media (max-width: 600px) betekent: op een scherm tot 600 pixels breed, dus op de meeste telefoons. Daar zet je de kolommen onder elkaar.

<style>
.indeling { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.indeling > div { padding: 8px; background-color: #ffe3f1; }
@media (max-width: 600px) {
  .indeling { grid-template-columns: 1fr; }
}
</style>
<div class="indeling">
<div>Op een computer links</div>
<div>Op een computer rechts, op een telefoon eronder</div>
</div>

Bij display: flex doet flex-direction: column hetzelfde. @media kijkt naar de breedte van het scherm, niet naar die van je pagina. Probeer het in de editor: boven het voorbeeld staat de knop "Telefoon".