CSS opmaak

Probleem

Welke stijlregels heb je nodig om een tabel weer te gegeven zoals een desktop spreadsheet?

Design

1. We vertrekken van de tabel van de Jommeke's strips.

2. Voeg een klasse eigenschap toe aan de html tabel:

<table class="spreadsheet">
    <caption>
        Jommeke strips
    </caption>
    <tr>
        <th scope="col">Nummer</th>
        <th scope="col">Titel</th>
        <th scope="col">Kaft</th>
        <th scope="col">Prijs</th>
    </tr>

3. Voeg eventueel een referentie toe naar het externe CSS bestand.

4. We maken de tabel op in zijn geheel. Om de tabel van de klasse spreadsheet te selecteren nemen we de naam van het element gevolgd door een punt en de klassennaam, zonder spatie er tussen. We beginnen met een rand te tekenen rond de cellen en we stellen de border-collapse eigenschap in:

table.spreadsheet {
    border: 1px solid #a6aac6;
    border-collapse: collapse;
}

Met de border eigenschap tekenen we een rand de buitenkant van de tabel. De border-collapse verwijdert witruimte tussen de cellen van de tabel.

5. Vervolgens kijken we naar de cellen van de tabel:

table.spreadsheet td {
    border: 1px solid #a6aac6;
    text-align: right;
    padding: 0.2em;
}

Hiermee voegen we een rand aan de cellen toe. Met text-align wordt de inhoud rechts uitgelijnd. Dat geeft dit als resultaat:

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

6. Je ziet dat de th elementen nog geen rand hebben. Dat gaan we nu doen. We gebruiken een donkerder kleur voor deze rand en ook een achtergrondkleur om te benadrukken dat ze koppen in plaats van gewone cellen zijn:

table.spreadsheet th {
    border: 1px solid #828282;
    background-color: #cbcbcb;
    font-weight: bold;
    text-align: center;
    padding:  0.2em;
}

7. Tenslotte stijlen we ook de tabeltitel om die visueel één te maken met de rest van de tabel. De tabeltitel plaats ik overigens onderaan:

table.spreadsheet caption {
    font-size: larger;
    font-weight: bold;
    background-color: #bcbcbc;
    color:  #111;
    padding:  0.4em 0 0.4em 0;
    caption-side: bottom;
}

Met dit als resultaat:

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