Alle codes voor een html-tabel

Ook al bouw je geen hele webpagina’s meer met een html-tabel, voor prijslijsten e.d. gebruik je ze wel.

Vroeger werden de meeste webpagina’s ontworpen op basis van een html-tabel. Tegenwoordig gebeurt dat eigenlijk niet meer, omdat stijlbladen (cascading style sheets) tabellen hebben verdrongen voor de vormgeving van webpagina’s. Maar tabellen zijn natuurlijk nog steeds heel bruikbaar om bepaalde onderdelen van een webpagina netjes weer te geven, zoals een productoverzicht of prijslijst, zoals die hieronder:

Code voor een html-tabel

Een tabel als geheel wordt aangegeven met behulp van een set <table>-tags. Daarbinnen kan eerst een tabeltitel staat, tussen caption-tags.

Heeft je tabel geen titel, dan volgen direct na de openings-tag van de tabel de table head (<thead>), de table body (<tbody>) en eventueel de table foot (<tfoot>).

Zowel de table head, de table body en de table foot bestaan uit hun beurt uit een of meer table rows (<tr>, met binnen elke rij een of meer tabelcellen (<th> in de table head of <td> in de andere rijen). De afkorting ‘td’ staat voor table data, ofwel: tabelgegevens.

De tabelcel in de table foot beslaat in dit voorbeeld twee kolommen, dus daarom is er aan de openings-tag van de cel binnen de laatste rij nog toegevoegd: colspan="2"

De html-code voor bovenstaande tabel is dan ook de volgende:

<table class="voorbeeldtabel">
    <caption>Prijslijst</caption>
    <thead>
        <tr>
            <th>Product/Dienst</th>
            <th>Prijs</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>€ 85,00</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>€ 95,00</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>€ 75,00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Prijzen onder voorbehoud</td>
        </tr>
    </tfoot>
</table>

Uiterlijk van een html-tabel

Om een html-tabel vorm te geven moet je in je stylesheet zijn. Daar kun je bijvoorbeeld je tabel een rand (border) geven, de titel of de kolomkoppen vet of cursief maken, of het lettertype van de regel onderaan wat verkleinen. Voor de voorbeeldtabel bovenaan de pagina heb ik de volgende opmaak gebruikt (de tabel heb ik een class ‘voorbeeldtabel’ gegeven, zodat deze instellingen niet op élke tabel op mijn website worden toegepast):

.voorbeeldtabel { border: 1px solid darkgrey; border-collapse: collapse; }
.voorbeeldtabel caption { font-variant: small-caps; font-size: 1.3em; }
.voorbeeldtabel thead { background-color: darkgray; }
.voorbeeldtabel th { text-align: left; font-weight: bold; padding: .5em; }
.voorbeeldtabel td { border-bottom: 1px solid lightgrey; padding: .5em; }
.voorbeeldtabel tfoot { font-size: .8rem; text-align: center; border-top: 2px solid darkgrey; }