Tabel- en celranden

Probleem

Je kan randen toevoegen aan tabellen net zoals aan andere HTML-elementen. Randen zijn bijzonder bruikbaar voor de tabellen. Ze zorgen ervoor dat tabelgegevens gemakkelijker te vatten zijn.

Design

We beginnen met de stenonotatie:

table {
    border: 1px solid #338ba6;
}

Met deze stijlregel wordt er een rand van 1 pixel dik rond de tabel getekend.

Je kan de uitgebreide notatie gebruiken:

table {
    border-width: 2px;
    border-style: dotted;
    border-color: red;
}

Daarmee kan je de rand meer in detail specifiëren. Je kan bijvoorbeeld de onderrand in een andere kleur zetten:

table {
    border-width: 2px;
    border-style: dotted;
    border-color: #f00;
    border-bottom-color: #00f;
    border-right-style: solid;
    border-right-color: #0f0;
}

Met de eigenschap borderspacing stel je de afstand in tussen aangrenzende cellen. Standaard tonen browsers vaak een kleine ruimte tussen de cellen, waar mee je de incruk krijgt dat er een dubbele lijn tussen de cellen staat. Je deze ruimte vergroten of verkleinen met de eigenschap border-spacing. Deze waarde wordt meestal in pixels opgegeven. Ik zelf gebruik em. Je kan een aparte waarde opgeven voor de horizontale en voor de verticale afstand opgeven. Wanneer een rand bij twee aangrenzende cellen is opgegeven, is de breedte van de lijnen twee keer die van de buitenranden.

Het is mogelijk om aangrenzende randen samen te laten vallen zodat je slechts één lijn tussen de cellen krijgt. Dat doe je met de eigenschap border-collapse.
Mogelijke waarden zijn:

1. collapse: de randen vallen waar mogelijk samen tot een enkele rand, border-spacing wordt genegeerd en cellen worden tegen elkaar geschoven, en de eigenschap empty-cells wordt genegeerd.
2. separate: randen los van elkaar, border-spacing en empty-cells worden toegepast.

Je kan ook randen toevoegen aan individuele cellen. Je volgt hetzelfde principe als voor het bepalen van tabelranden. Maar je gebruikt andere selectoren. Je gaat nu geen tabel meer selecteren maar een cel, een th of een td. Deze stijlregel maakt een iets lichtere rand rond td en th tabelcellen:

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

Oplossing

De enige manier om die witruimte tussen de randen weg te krijgen is de waarde instellen van het border-collapse attribuut.

table {
    border: 1px solid #338ba6;
    border-collapse: collapse;
}

Verder voegen we randen rond de cellen toe en witruimte toe tussen de inhoud en de rand door de padding eigenschap van td en th in te stellen:

td, th {
    border: 0.1em solid #0088dd;
    padding: 0.4em;
}

See the Pen Multimedia - CSS - Tabel- en celranden by Jef Inghelbrecht (@jef) on CodePen.