HTMLhulp.nl logo
Responsieve prijstabellen bouwen met HTML en CSS

Responsieve prijstabellen bouwen met HTML en CSS

Responsieve prijstabellen bouwen met HTML en CSS

Prijstabellen zijn een vast onderdeel van veel websites. Ze geven bezoekers in één oogopslag inzicht in verschillende pakketten, functies en prijzen. Denk aan abonnementen, softwarepakketten of diensten. Op desktops is dit vaak overzichtelijk in kolommen te tonen, maar op mobiele apparaten kan een prijstabel snel onleesbaar worden. Daarom is het belangrijk om een prijstabel responsief te maken met HTML en CSS. In dit artikel leer je hoe je stap voor stap een toegankelijke en mobielvriendelijke prijstabel bouwt.

De basisstructuur van een prijstabel

Een prijstabel kun je opzetten met een gewone HTML-tabel of met divs en CSS Grid. Voor semantische duidelijkheid gebruiken we hier eerst een <table>.

<table>
<thead>
<tr>
<th>Pakket</th>
<th>Prijs</th>
<th>Functies</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>€9,99 / maand</td>
<td>1 gebruiker, 5 GB opslag</td>
</tr>
<tr>
<td>Pro</td>
<td>€19,99 / maand</td>
<td>5 gebruikers, 50 GB opslag</td>
</tr>
<tr>
<td>Enterprise</td>
<td>€49,99 / maand</td>
<td>Onbeperkte gebruikers, 1 TB opslag</td>
</tr>
</tbody>
</table>

Standaard styling met CSS

table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}
th {
background: #f4f4f4;
}

Dit werkt prima op desktop, maar is niet geschikt voor mobiel.

Responsief maken met media queries

Met media queries kun je de tabel omvormen naar een gestapeld blok op kleinere schermen.

@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead {
display: none;
}

tr {
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 10px;
}

td {
display: flex;
justify-content: space-between;
padding: 10px;
border: none;
border-bottom: 1px solid #eee;
}

td::before {
content: attr(data-label);
font-weight: bold;
}
}

HTML met data-label:

<tbody>
<tr>
<td data-label="Pakket">Basic</td>
<td data-label="Prijs">€9,99 / maand</td>
<td data-label="Functies">1 gebruiker, 5 GB opslag</td>
</tr>
</tbody>

Op mobiel wordt elke rij getoond als een apart blok met duidelijke labels.

Alternatief: prijstabellen met CSS Grid

CSS Grid is ideaal om prijstabellen te maken zonder <table>.

<div class="pricing">
<div class="plan">
<h2>Basic</h2>
<p class="price">€9,99 / maand</p>
<ul>
<li>1 gebruiker</li>
<li>5 GB opslag</li>
</ul>
<button>Bestel</button>
</div>
<div class="plan">
<h2>Pro</h2>
<p class="price">€19,99 / maand</p>
<ul>
<li>5 gebruikers</li>
<li>50 GB opslag</li>
</ul>
<button>Bestel</button>
</div>
<div class="plan">
<h2>Enterprise</h2>
<p class="price">€49,99 / maand</p>
<ul>
<li>Onbeperkt</li>
<li>1 TB opslag</li>
</ul>
<button>Bestel</button>
</div>
</div>

CSS:

.pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.plan {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
.plan h2 {
margin: 0 0 10px;
}
.price {
font-size: 1.5rem;
color: #00bf63;
}

Met auto-fit schaalt de tabel automatisch naar het aantal kolommen dat past op het scherm.

Extra functies voor prijstabellen

  1. Highlight het populairste pakket

.plan.populair {
border: 2px solid #00bf63;
background: #f9fff9;
}

  1. Call-to-action knoppen
    Maak de bestelknoppen opvallend:

button {
background: #00bf63;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background: #009f54;
}

  1. Icons toevoegen
    Gebruik bijvoorbeeld SVG-iconen voor functies.

Toegankelijkheid bij prijstabellen

  • Gebruik altijd duidelijke koppen of labels (data-label of <th>).

  • Zorg voor voldoende kleurcontrast.

  • Zet prijzen altijd in tekst, niet alleen als afbeelding.

  • Gebruik ARIA-labels bij knoppen indien nodig.

Veelgemaakte fouten bij prijstabellen

  1. Alleen afbeeldingen gebruiken in plaats van echte HTML → slecht voor SEO en toegankelijkheid.

  2. Geen responsieve versie maken → tabel breekt op mobiel.

  3. Onduidelijke knoppen zoals “Klik hier” i.p.v. “Bestel Pro-pakket”.

  4. Te veel informatie in één tabel waardoor het onoverzichtelijk wordt.

  5. Niet aangeven welk pakket aanbevolen of populair is.

Tips voor effectieve prijstabellen

  • Houd het overzichtelijk met maximaal 3–4 pakketten naast elkaar.

  • Highlight één aanbevolen pakket.

  • Gebruik korte, duidelijke beschrijvingen.

  • Zorg dat de belangrijkste verschillen meteen zichtbaar zijn.

  • Test de weergave op mobiel en tablet.

Met HTML en CSS kun je prijstabellen bouwen die er strak uitzien, goed werken op mobiel en bezoekers overtuigen om actie te ondernemen.