CSS- tabellen
Het uiterlijk van een HTML-tabel kan aanzienlijk worden verbeterd met CSS:
| Bedrijf | Contact | Land |
|---|---|---|
| Alfred's voerbak | Maria Anders | Duitsland |
| De supermarkt van Berglund | Christina Berglund | Zweden |
| Winkelcentrum Montezuma | Francisco Chang | Mexico |
| serieuze handel | Roland Mendel | Oostenrijk |
| Eilandhandel | Helen Bennett | VK |
| Koninklijk eten | Philip Cramer | Duitsland |
| Lachende Bacchus-wijnkelders | Yoshi Tannamuri | Canada |
| Verzamelde voedselmagazijnen | Giovanni Rovelli | Italië |
Tafelranden
Gebruik de bordereigenschap om tabelranden in CSS op te geven.
Het onderstaande voorbeeld specificeert een zwarte rand voor <table>, <th> en <td> elementen:
Voorbeeld
table, th, td {
border: 1px solid black;
}
Tafel over de volledige breedte
De bovenstaande tabel lijkt in sommige gevallen misschien klein. Als je een tabel nodig hebt die het hele scherm (volledige breedte) moet beslaan, voeg dan toe width: 100%aan het <table>-element:
Voorbeeld
table {
width: 100%;
}
Dubbele randen
Merk op dat de tabel in de bovenstaande voorbeelden dubbele randen heeft. Dit komt omdat zowel de tabel als de elementen <th> en <td> aparte randen hebben.
Bekijk het onderstaande voorbeeld om dubbele randen te verwijderen.
Tabelranden samenvouwen
De border-collapseeigenschap stelt in of de tabelranden moeten worden samengevouwen tot een enkele rand:
Voorbeeld
table
{
border-collapse: collapse;
}
Als u alleen een rand rond de tabel wilt, specificeert u alleen de bordereigenschap voor <table>:
Voorbeeld
table
{
border: 1px solid black;
}