Randen van HTML-tabellen: collapse, spacing, zebrarijen, rond | We.Inc
Style randen van HTML-tabellen met CSS: border-collapse, border-spacing, lijnen per cel, zebrarijen en ronde hoeken. Live playground met CSS om te kopiëren.
Geef een tabel zichtbare lijnen door een border op de th- en td-cellen te zetten, en voeg dan border-collapse: collapse toe aan de tabel zodat aangrenzende cellen één lijn delen in plaats van er twee te tekenen. Gebruik voor ruimte tussen cellen border-collapse: separate met border-spacing. Ronde hoeken vereisen het separate-model, omdat samengevoegde randen border-radius negeren.
De randeigenschappen van tabellen in één oogopslag
Doel
CSS
Waar het komt
Enkele gedeelde rasterlijnen
border-collapse: collapse
Lijnen rond elke cel
border: 1px solid #ccc
th, td
Ruimte tussen cellen
border-spacing: 4px
table (alleen separate-model)
Gestreepte rijen
tbody tr:nth-child(even) { background: #f5f5f5 }
Ronde buitenhoeken
border-radius + border-collapse: separate
table en hoekcellen
Alleen lijnen tussen rijen
border-bottom: 1px solid #ddd
th, td
Tabellen hebben hun eigen randregels, los van gewone boxen, dus CSS die op een div werkt ziet er op een tabel vaak verkeerd uit. Gebruik de playground om te wisselen tussen het collapsed- en het separate-model, verander lijndikte, celafstand en hoekradius, en kopieer dan de exacte CSS die wordt opgebouwd.
Kies in de playground het collapse- of separate-model en zie de dubbele lijnen samensmelten of uit elkaar gaan.
Kies welke lijnen u tekent: een volledig raster, alleen rijen of alleen een buitenkader.
Zet zebrarijen of ronde hoeken aan; afronden schakelt de tabel automatisch naar het separate-model.
Kopieer de gegenereerde CSS, of begin bij een van de bewerkbare voorbeelden verderop.
Zet randen op de cellen, niet alleen op het table-element. Een rand op alleen de tabel tekent een buitenkader en niets daarbinnen.
Gebruik border-spacing: 0 met het separate-model als u ronde hoeken wilt zonder zichtbare tussenruimte.
Geef alleen de rijen in tbody strepen, zodat de koprij zijn eigen achtergrond houdt.
Houd lijnkleuren licht en laat padding het meeste scheidingswerk doen; zware rasters maken getallen moeilijker te scannen.
Zet brede tabellen in een container met overflow-x: auto zodat telefoons de tabel kunnen scrollen in plaats van de hele pagina.
Veelgestelde vragen
Waarom toont mijn tabel dubbele randen?
De beginwaarde van border-collapse is separate, dus elke cel tekent zijn eigen rand en twee buren staan naast elkaar. Zet border-collapse: collapse op de tabel en aangrenzende randen smelten samen tot één lijn.
Waarom werkt border-radius niet op mijn tabel?
Ronde hoeken worden genegeerd in het collapsed-randmodel. Schakel de tabel naar border-collapse: separate, zet border-spacing: 0 en rond dan de buitenste hoekcellen af, of zet de tabel in een div met border-radius en overflow: hidden.
Mag het HTML-attribuut border nog op tabellen?
De HTML-standaard noemt het border-attribuut op table verouderd en zegt dat u CSS moet gebruiken. Browsers tekenen het nog voor oude pagina's, maar nieuwe code hoort randen in een stylesheet in te stellen, zodat één regel elke tabel bepaalt.
Welke waarden accepteert border-spacing?
Eén lengte stelt de ruimte zowel horizontaal als verticaal in. Twee lengtes stellen eerst de horizontale ruimte tussen kolommen in en daarna de verticale ruimte tussen rijen, bijvoorbeeld border-spacing: 8px 4px. Het heeft geen effect als de tabel collapsed is.
Hoe geef ik maar één kolom een rand?
Selecteer de cellen in die kolom met een selector zoals td:nth-child(2), th:nth-child(2) en geef ze een linker- of rechterrand. Cellen direct stylen werkt in beide randmodellen hetzelfde.
Twee randmodellen
In het separate-model is elke cel een eigen box met een eigen rand, en border-spacing bepaalt de ruimte tussen die boxen. Dit is de standaard, daarom ziet een kale tabel met celranden er dubbel uit.
In het collapsed-model maakt de browser van elke gedeelde rand één lijn. Dat is wat de meeste datatabellen willen, al verliest u daarmee border-spacing en ronde hoeken.
Leesbare datatabellen
Horizontale lijnen tussen rijen leiden het oog beter langs een rij cijfers dan een dicht raster. Lijn numerieke kolommen rechts uit, houd een duidelijke koprij met th-elementen en voeg een caption toe zodat de tabel een naam heeft voor gebruikers van schermlezers.
Zebrastrepen helpen bij lange tabellen met veel kolommen. Controleer of de streepkleur nog genoeg contrast laat voor de tekst die erop staat.
Naslag randeigenschappen van tabellen
Eigenschappen die bepalen hoe tabellijnen worden getekend
Eigenschap
Waarden
Beginwaarde
Opmerkingen
collapse, separate
Op de tabel instellen. Collapse voegt gedeelde randen samen.
één of twee lengtes
Eerst horizontale, dan verticale ruimte. Genegeerd bij collapse.
dikte stijl kleur
Meestal ingesteld op th en td.
Genegeerd in het collapsed-model.
Bewerkbare voorbeelden van tabelranden
Collapsed raster met een koprij
De klassieke datatabel: één lijn tussen elke cel en een gekleurde kop.
Alleen rijen, met zebrastrepen
Geen verticale lijnen. Een onderrand op elke cel plus een tint op even rijen houdt lange rijen makkelijk te volgen.
Ronde tabelhoeken
Het separate-model zonder tussenruimte, randen rechts en onder elke cel, en de buitenhoeken afgerond.
Het verouderde border-attribuut naast de CSS-versie
Beide tabellen zien er hetzelfde uit. De tweede houdt de styling in CSS, zoals de HTML-standaard vraagt.
Playground voor tabelranden
Randmodel
Te tekenen lijnen
Volledig raster
Alleen rijen
Alleen buitenkader
Lijndikte: {n}px
Celafstand: {n}px
Hoekradius: {n}px
Zebrarijen
Lijnkleur
Celafstand en afronding werken alleen in het separate-model.