De Help Desk punt NL
Kennisbank
De Helpdesk > De Helpdesk > Kennisbank

Alle codes voor een html-tabel

Oplossing

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:

Prijslijst
Product/DienstPrijs
Item 1 € 85,00
Item 2 € 95,00
Item 3 € 75,00
Prijzen onder voorbehoud

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

 
Was dit artikel bruikbaar? ja / nee
Gerelateerde artikelen html leren: dit zijn de basisbeginselen
Hoe wordt een lijst gemaakt? De basis html-codes
Rijen en kolommen als koppen vastzetten in Excel
Routing Cheet Sheet
Draytek routers inlognaam en wachtwoorden
MikroTik routers inlognaam en wachtwoorden
Een 3D-tekst maken voor je site doe je zo!
Leuke lijsten maken met html en css
Hoe je CSS gebruikt voor je website-layout
Maak je website-teksten lekker leesbaar
Artikel details
Artikel ID: 703
Categorie: Een eigen website maken - Tabellen
Zoekwoorden css, cascading, style, sheet, gebruik, table, tabel, kolom, table, class, row, rij, html, code
Datum toegevoegd: 5-Dec-2017 15:59:40
Aantal bekeken: 3319
Beoordeling (Stemmen): Artikel beoordeeld 5.0/5.0 (1005)

 
« Ga terug