Hoe maak je een prijsoverzicht in 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.

Prijstabel in HTML en CSS

In deze tutorial laat ik je zien hoe je deze prijstabel kunt maken.

eindresultaat

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:




	
	prijs tabel
	
Pakket 1 € 2,99 Pakket 2 € 4,99 Pakket 3 € 7,99 Pakket 4 € 15,99
Webruimte 4 GB 6 GB 8 GB 12 GB
Bandbreedte per maand 25 GB 50 GB 75 GB 100 GB
Databases MySQL 1 5 onbeperkt onbeperkt
Domeinnamen 1 5 10 20
Support Kantooruren 24/7 24/7 24/7

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:

prijstabel zonder enige opmaak

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 hexa decimale 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 (2,4,6 enz.)) of even (even regelnummers (1,3,5 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:

tabel met kleur rijen tr nth-child

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.

tabel met kop met afgeronde hoeken

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);
}

tabel kop heeft verschillende kleuren

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:

eindresultaat

1 Reactie

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *