CSS -tabelle
Die voorkoms van 'n HTML-tabel kan aansienlik verbeter word met CSS:
Maatskappy | Kontak | Land |
---|---|---|
Alfred se voerkissie | Maria Anders | Duitsland |
Berglund se supermark | Christina Berglund | Swede |
Montezuma Winkelsentrum | Francisco Chang | Mexiko |
ernstige handel | Roland Mendel | Oostenryk |
Eilandhandel | Helen Bennett | VK |
Koninklike kos | Philip Cramer | Duitsland |
Laggende Bacchus Wynkelders | Yoshi Tannamuri | Kanada |
Versamelde Kospakhuise | Giovanni Rovelli | Italië |
Tafelgrense
border
Gebruik die eiendom om tabelgrense in CSS te spesifiseer .
Die voorbeeld hieronder spesifiseer 'n swart rand vir <table>, <th>, en <td> elemente:
Voorbeeld
table, th, td {
border: 1px solid black;
}
Volle breedte tabel
Die tabel hierbo kan in sommige gevalle klein lyk. As jy 'n tabel nodig het wat die hele skerm (volwydte) moet strek, voeg width: 100%
by die <table>-element:
Voorbeeld
table {
width: 100%;
}
Dubbele grense
Let daarop dat die tabel in die voorbeelde hierbo dubbele grense het. Dit is omdat beide die tabel en die <th> en <td> elemente aparte grense het.
Om dubbele grense te verwyder, kyk na die voorbeeld hieronder.
Vou tabelgrense in
Die border-collapse
eienskap stel of die tabelgrense in 'n enkele rand ingevou moet word:
Voorbeeld
table
{
border-collapse: collapse;
}
As jy net 'n rand om die tafel wil hê, spesifiseer net die border
eienskap vir <table>:
Voorbeeld
table
{
border: 1px solid black;
}