HTML -tabelranden
HTML-tabellen kunnen randen van verschillende stijlen en vormen hebben.
Een rand toevoegen
Wanneer u een rand aan een tabel toevoegt, voegt u ook randen toe rond elke tabelcel:
Gebruik de CSS- bordereigenschap op
table, th, en
tdelementen om een rand toe te voegen:
Voorbeeld
table, th, td
{
border: 1px solid black;
}
Samengevouwen tabelranden
Om dubbele randen zoals in het bovenstaande voorbeeld te voorkomen, stelt u de CSS- border-collapse
eigenschap in op collapse.
Hierdoor vallen de grenzen samen tot één enkele rand:
Voorbeeld
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Stijl tafelranden
Als je van elke cel een achtergrondkleur instelt en de rand een witte kleur geeft (hetzelfde als de achtergrond van het document), krijg je de indruk van een onzichtbare rand:
Voorbeeld
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Ronde Tafel Randen
Met de border-radiuseigenschap krijgen de randen afgeronde hoeken:
Voorbeeld
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Sla de rand rond de tafel over door weg te laten tableuit de css-selector:
Voorbeeld
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Gestippelde tafelranden
Met de border-styleeigenschap kunt u het uiterlijk van de grens instellen.
De volgende waarden zijn toegestaan:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Voorbeeld
th, td {
border-style: dotted;
}
Rand kleur
Met de border-coloreigenschap kunt u de kleur van de rand instellen.
Voorbeeld
th, td {
border-color: #96D4D4;
}