Hoe maak je een prijsoverzicht in HTML en CSS?
Je kent ze vast wel, van bijvoorbeeld een hosting bedrijf. Een prijsoverzicht met bijvoorbeeld vier mogelijkheden waaruit je kunt kiezen met bovenaan, of juist onderaan de juiste prijs.
Dit kun je maken met een afbeelding, maar het is prima mogelijk om een prijsoverzicht te maken met CSS, in combinatie met HTML. Het voordeel daarvan is dat je eenvoudig onderdelen kunt aanpassen op het moment dat er iets verandert.
Als de prijs omhoog gaat hoef je alleen maar de HTML code aan te passen en niet een hele afbeelding.
Daarnaast is HTML code natuurlijk veel beter als het gaat om zoekmachine optimalisatie.
Prijsoverzicht in HTML en CSS
In deze tutorial laat ik je zien hoe je deze prijstabel kunt maken.
De eerste stap die we moeten nemen is het maken van een tabel, met alle gegevens.
Een tabel die bestaat uit vier pakketten (de kolommen), en vijf onderdelen (de rijen). De pakketten noemen we voor het gemak even pakket 1 tot en met pakket 4.
De onderdelen zijn webruimte, bandbreedte, databases, domeinen en support.
De HTML code
De tabel wordt als volgt opgezet in HTML:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>prijs tabel</title> <link rel="stylesheet" type="text/css" media="all" href="stijl.css" /> </head> <body> <table class="prijzen"> <col /> <col /> <col /> <col />  <col /> <tr> <td></td> <th scope="col">Pakket 1 <span class="price">€ 2,99</span></th> <th scope="col">Pakket 2 <span class="price">€ 4,99</span></th> <th scope="col">Pakket 3 <span class="price">€ 7,99</span></th> <th scope="col">Pakket 4 <span class="price">€ 15,99</span></th> </tr> <tr> <th scope="row">Webruimte</th> <td>4 GB</td> <td>6 GB</td> <td>8 GB</td> <td>12 GB</td> </tr> <tr> <th scope="row">Bandbreedte per maand</th> <td>25 GB</td> <td>50 GB</td> <td>75 GB</td> <td>100 GB</td> </tr> <tr> <th scope="row">Databases MySQL</th> <td>1</td> <td>5</td> <td>onbeperkt</td> <td>onbeperkt</td> </tr> <tr> <th scope="row">Domeinnamen</th> <td>1</td> <td>5</td> <td>10</td> <td>20</td> </tr> <tr> <th scope="row">Support</th> <td>Kantooruren</td> <td>24/7</td> <td>24/7</td> <td>24/7</td> </tr> </table> </body> </html>
Hierboven geef je dus met th scope="col" de koptekst aan voor de kolommen.
Met th scope="row" geef je aan wat de tekst moet zijn aan het begin van een rij.
Met <col> kun je gemakkelijk stijlen bepalen voor de verschillende kolommen.
Het resultaat ziet er dan zo uit:
De eerste CSS code
De volgende stap is om er wat CSS tegenaan te gaan gooien. De HTML code, daar hoeven we vanaf nu eigenlijk niets meer aan te doen.
In het HTML bestand verwijs ik naar het stijlblad met de naam stijl.css. We maken dus een CSS bestand met deze naam aan.
De eerste stap is de volgende code:
body { background-color: #fff; color: #111; margin: 0; padding: 0; font: 1em/1.4 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; } .prijzen { border-collapse: collapse; } .prijzen col { width: 7em; }
Dit zijn wat algemene instellingen zoals de achtergrondkleur, de kleur van de tekst en het lettertype. Daarnaast wil ik dat de (onzichtbare) lijnen van de tabel elkaar overlappen. Dat wordt geregeld met border-collapse.
De kolommen
De breedte van de kolommen wordt vastgelegd met width: 7em.
De breedte van de eerste kolom moet echter afwijkend zijn van de rest. Deze moet namelijk zo breed worden als de breedte van het grootste woord wat er in komt te staan. Dit kan gedaan worden met de first-child selector.
Deze selector zorgt ervoor dat de instelling alleen van toepassing is op het eerste onderdeel. In ons geval gaat het dus alleen om de eerste ‘col’ in de tabel met de naam prijzen.
.prijzen col:first-child { width: auto; }
De volgende stap is om elke individuele cel te voorzien van een tekstkleur (color), een witte rand (border) en een beetje ruimte om de tekst heen (padding).
.prijzen td { color: rgb(51,51,51); border: 1px solid rgb(255,255,255); padding: 0.75em; }
Je ziet dat we voor de kleur de zogenaamde RGB code gebruiken. Je kunt hier natuurlijk ook de naam of de hexadecimale code voor gebruiken.
Voor de padding, de ruimte om de tekst heen wordt em gebruikt.
Nu gaan we aan de slag met het opmaken van de verschillende regels in de tabel ‘prijzen’. We willen dat de regels om en om een iets afwijkende kleur grijs bevatten. Eerst wat lichter, dan weer wat donkerder.
Pseudo selector nth:child
Dit kun je regelen met de pseudo selector nth-child. Deze pseudo selector bepaald voor een lijst dat je iets kunt regelen voor bijvoorbeeld elke derde regel, of voor de regels om en om.
In ons geval kiezen we voor odd (oneven regelnummers (1,3,5 enz.)) of even (even regelnummers (2,4,6 enz)). Het gaat om de regels, of beter gezegd de rijen.
.prijzen tr:nth-child(odd) { background-color: rgb(240,240,240); } .prijzen tr:nth-child(even) { background-color: rgba(246,246,246,.5); }
Hover
Nu wil ik ook dat elke oneven rij iets oplicht, op het moment dat ik er met de muis overheen ga (:hover).
Dat is ook weer te bepalen met behulp van deze zelfde pseudo selector.
.prijzen tr:nth-child(odd):hover td { background-color: rgba(59,87,98,.2); } .prijzen tr:nth-child(even):hover td { background-color: rgba(91,124,121,.2); }
De tabel ziet er nu als volgt uit:
Je ziet dat de muis over de derde regel gaat, en de regel die iets donkerder oplicht.
We willen dat het :hover effect niet in de hoek linksboven ontstaat, dus we voegen toe:
.prijzen tr:first-child, .prijzen tr:first-child:hover td { background-color: transparent; }
Afgeronde hoeken
We willen tenslotte ook nog dat er een bovenste regel (th) komt met een andere achtergrondkleur en afgeronde hoeken aan de bovenzijde. Dit doen we met de volgende code:
.prijzen th[scope="col"] { background-color: rgb(59,87,98); color: rgb(255,255,255); border: 1px solid rgb(255,255,255); font-weight: normal; padding: 0.75em; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; text-shadow: 1px 1px 3px #111111; }
We voegen [scope="col"] aan de eerste regel toe. Dit is om te regelen dat het gaat om de kop van de kolom. En dus niet om de eerste cel van een rij. Die krijgt namelijk scope="row" mee voor het geval je dat nog niet opgevallen was.
Het resultaat ziet er al heel wat interessanter uit.
De details van de prijstabel
Je ziet dat onze tabel inmiddels al goed van uitstraling is. Maar toch missen er nog wat details. Het is namelijk leuker om te zien dat elke kolom een andere kleur heeft. Ook hiervoor gebruik je de pseudo selector :nth-child. Nu gericht op scope="col".
Elke tweede kolom krijgt als kop een alternatieve kleur.
.prijzen th[scope="col"]:nth-child(odd) { background-color: rgb(91,124,121); }
In de kopjes staat ook de prijs. Dit wil ik op een nieuwe regel plaatsen in een iets kleinere lettergrootte.
.prijzen th span.price { display: block; padding: 0.2em 0 0 0; font-size: 87.5%; font-weight: bold; }
Scope row
Als laatste is het nog mooier om de eerste kolom, waar de omschrijvingen in staan aan te passen. Deze kolom heeft als scope, row. Dat betekent dat het kopjes zijn van de rij.
Door deze een andere kleur te geven en de tekst naar links te laten uitlijnen is onze tabel af. Een tabel waarmee je dus recht doet aan datgene waar een tabel voor bedoeld is, namelijk het weergeven van data.
.prijzen th[scope="row"] { background-color: rgb(232,232,232); color: rgb(0,0,0); border: 1px solid rgb(255,255,255); padding: 0.75em; font-weight: normal; text-align: left; }
Om het geheel af te maken geven we elke oneven regel weer een net iets andere kleur als achtergrond.
.prijzen tr:nth-child(odd) th[scope="row"] { background-color: rgba(232,232,232,.5); }
Het eindresultaat
Het resultaat nogmaals:
Wat een goeie uitleg.
Het is me gelukt. hopelijk post je vaker dit soort tutorials.