In de begindagen van webontwikkeling waren HTML-tabellen erg eenvoudig en ontbraken uitgebreide stylingopties. Tegenwoordig zijn de meeste tabellen echter gestileerd om een meer esthetische en functionele ervaring voor gebruikers te creëren.
CSS biedt een reeks tabelstijlkenmerken. Met deze attributen kunt u onder andere tabelcellen scheiden, tabelranden specificeren en tabelbreedte en -hoogte specificeren.
In deze zelfstudie wordt aan de hand van voorbeelden uitgelegd hoe u een tabel opmaakt met behulp van CSS . Aan het einde van deze tutorial ben je een expert.
HTML-tabellen
De HTML-code definieert de structuur van de tabellen. Gebruik de tag
om een tabel te definiëren. De tags
,
en
specificeren respectievelijk rijen, tabelkoppen en inhoudscellen.
Laten we eens kijken naar een voorbeeld van een HTML-tabel. In het onderstaande voorbeeld hebben we een tabel met de top vijf van boeken op de New York Times bestsellerlijst voor de week van 23 maart 2020:
De code voor onze tabel is als volgt:
Deze tabel heeft drie kolommen en zes rijen, inclusief een rij met `on je geest.
Tabellen CSS
CSS wordt gebruikt om tabellen op te maken. Hoewel de bovenstaande tabel de gegevens op een georganiseerde manier weergeeft, is deze in gewone HTML geschreven (er zijn geen stijlen). Door CSS te gebruiken, kunt u tabellen er beter uit laten zien.
Er zijn veel CSS-functies die je kunt gebruiken om stijl een tafel. Met CSS kunt u:
randen toevoegen
randen comprimeren
randafstand aanpassen
de breedte en hoogte van een tabel
opvulling toevoegen
tekst horizontaal uitlijnen
tekst verticaal uitlijnen
jog mouse (hover)-functie toevoegen
stel celkleuren in
stel in hoe lege cellen worden weergegeven
We zullen al deze onderwerpen in de onderstaande discussie behandelen.
Randen
Stel dat we randen willen toevoegen rond de array of rond de elementen die deze bevat.
Om randen toe te voegen, kunnen we de eigenschap border gebruiken. Hier is een voorbeeld dat de eigenschap border gebruikt om randen toe te voegen aan een tabel en zijn cellen, inclusief kopcellen:
In onze code definiëren we een effen zwarte rand, 1 pixel breed. Hier is het resultaat van onze code:
Houd er rekening mee dat onze tabel dubbele randen Dit komt omdat we een rand hebben toegepast op de tabel zelf (
), de kopteksten (
) en de cellen (
). dubbele randen naar enkele randen, we kunnen de eigenschap border-collapse gebruiken.
De eigenschap border-collapse converteert de dubbele randen van een tabel naar enkele randen. De standaardwaarde van de border-collapse-eigenschap is samengevouwen. Als de eigenschap border-collapse de waarde collapse < krijgt /code>, randen rond een array worden samengevouwen.
Hier is een voorbeeld van de b command-collapse eigenschap in actie:
Onze code geeft als resultaat:
Onze tabel en de inhoud ervan hebben nu een enkele rand.
Border Spac nld
U kunt de border-spacing-eigenschap gebruiken om de afstand tussen cellen in een tabel te definiëren. De border-spacing-eigenschap definieert de horizontale en verticale afstand tussen cellen - en het doet het in die volgorde.
Hier is een voorbeeld met de eigenschap border-spacing in onze eerste tabel (degene zonder samengevouwen randen):
Onze code geeft als resultaat:
Elk van onze cellen heeft een afstand van 10px op de horizontale en verticale randen.
Breedte en hoogte
U kunt de breedte en hoogte van een tabel en de eigenschappen ervan specificeren met de attributen width en height .
Stel dat we willen dat de breedte van onze tabel hierboven (die met de randen samengevouwen) de breedte is van de webpagina zelf, en stel dat we willen dat de hoogte van elke tabelkop 30 pixels hoog is. We kunnen dit doen met de volgende CSS-code:
Onze code geeft als resultaat:
Zoals je kunt zien, heeft onze tabel nu de breedte van de webpagina. Bovendien zijn de kolomkoppen in onze tabel 30 pixels hoog.
Opvulling
U kunt de eigenschap opvulling gebruiken om wat ruimte tussen de randen van cellen in een tabel en de inhoud van die cellen. De eigenschap padding kan worden gebruikt voor de tags
en
.
Sup, laten we zeggen dat we 10px padding rond de cel willen toevoegen inhoud van onze tabel inclusief kopcellen. We kunnen dat doen met deze code:
Onze code geeft als resultaat:
De inhoud van elk van de regels en onze header-tabel nu hebben 10px opvulling aan alle randen.
Horizontale tekstuitlijning
U kunt de eigenschap text-align gebruiken om tekst uit te lijnen die is opgeslagen in een of
in een array. Standaard worden
-elementen gecentreerd uitgelijnd en
-elementen links uitgelijnd.
De meest gebruikte waarden ‚Äã‚Äãvan het kenmerk voor tekstuitlijning zijn:< br>
links, midden, rechts (ondersteund door alle browsers behalve Microsoft Edge en Internet Explorer)
begin en einde (ondersteund door alle browsers behalve Microsoft Edge en Internet Explorer) )
Stel dat we de
-elementen in onze array willen centreren en de
-elementen links van elke cel willen uitlijnen. We kunnen het doen met deze code:
Onze code geeft als resultaat:
In dit voorbeeld hebben we de tekst buiten de cel gecentreerd. De cel d `header en header celtekst worden links uitgelijnd.
Verticale tekstuitlijning
CSS De vertical-align eigenschap wordt gebruikt om de verticale uitlijning van de inhoud in de
of
-tag. Standaard is de waarde van de eigenschap voor verticale uitlijning ingesteld op middle , wat betekent dat de inhoud verticaal in het midden van de cel wordt uitgelijnd. p>
Stel dat we de tekst in onze cellen
willen uitlijnen met de onderkant van de cellen, dan doen we dat met deze code:
Onze code geeft als resultaat:
Shop
Learn programming in R: courses
$
Best Python online courses for 2022
$
Best laptop for Fortnite
$
Best laptop for Excel
$
Best laptop for Solidworks
$
Best laptop for Roblox
$
Best computer for crypto mining
$
Best laptop for Sims 4
$
Latest questions
NUMPYNUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPYNUMPY
How to convert Nonetype to int or string?
12 answers
NUMPYNUMPY
How to specify multiple return types using type-hints
12 answers
NUMPYNUMPY
Javascript Error: IPython is not defined in JupyterLab
