Tabellen zijn het meest gebruikelijke en effectieve hulpmiddel om gegevens op een georganiseerde manier weer te geven. Vroeger, vóór CSS, was de element werd gebruikt voor het maken van rijke ontwerplay-outs. Maar tegenwoordig worden lay-outs gemaakt door verschillende andere CSS-eigenschappen te gebruiken. Meer specifiek wordt het HTML-element “
” gebruikt om een webtabel te maken, die verder kan worden vormgegeven door verschillende CSS-eigenschappen toe te passen.
Deze studie zal een gids zijn met betrekking tot stylingtabellen met CSS.
Hoe stijl je een tabel met CSS?
Om stijlen op de tabel toe te passen, doorlopen we de onderstaande reeks stappen.
-element wordt toegepast met de volgende CSS-stijleigenschappen:
“ font-familie ” eigenschap met de waarde “ Verdana, Genève, Tahoma, schreefloos ” wordt gebruikt om het lettertype toe te passen dat door de browser wordt ondersteund. Als de browser de eerste letterstijl niet ondersteunt, wordt de andere gebruikt.
“ Achtergrond kleur ” eigenschap stelt de achtergrondkleur van het element in.
“ lettertypegrootte ” eigenschap wordt gebruikt voor het instellen van de lettergrootte.
“ tekst uitlijnen ” eigenschap specificeert de uitlijning van de tekst van het element.
“ kleur ” eigenschap verwijst naar de letterkleur van het element.
Hier is de uitvoer van de hierboven verstrekte code:
Stap 4: Rand toevoegen aan de tabel De ' grens ” eigenschap wordt gebruikt om een rand rond het element toe te voegen. Het is een afgekorte eigenschap die de randbreedte, randstijl en randkleur specificeert.
Laten we de rand, samen met de opvulling en marge toepassen op de tabel:
“ grens ” eigenschap past de rand rond de tabel aan door de randbreedte, randstijl en randkleur op te geven.
“ opvulling ” specificeert de ruimte rond de inhoud van het element, waarbij de eerste waarde de ruimte boven-onder definieert en de tweede waarde voegt ruimte toe aan de rechts-linkszijden van de inhoud.
“ marge ” eigenschap met de waarde “ auto ” voegt gelijke ruimte rond het element toe.
Uitgang
Opmerking : Als we geen spaties tussen de tabelranden willen, gebruik dan de eigenschap border-collapse.
Stap 5: Randafstand van tabel samenvouwen De ruimtes tussen de tafelranden kunnen worden verwijderd door gebruik te maken van de ' grens-ineenstorting ” eigenschap met de waarde “ineenstorten”:
grens-ineenstorting: ineenstorting;
Stap 6: pas de tafelgrootte aan Laten we eens kijken hoe we de tafelgrootte kunnen aanpassen:
hoofd th { breedte : 160px; }
De toegevoegde “ breedte ”-eigenschap met het
-element zal de tabelgrootte automatisch overeenkomstig aanpassen::
We kunnen ook stijlen toepassen op de specifieke tabelcel. Laten we ze bespreken!
Stap 7: Stijlspecifieke tabelcellen Om de specifieke tabelcel op te maken, geeft u de klassenaam van die specifieke cel op. De onderstaande code geeft bijvoorbeeld aan dat de derde cel van de tweede rij een klassenaam krijgt toegewezen ' hoogtepunt ”:
De volgende CSS-eigenschappen worden toegepast op het tabelelement:
“ font-familie ” eigenschap stelt de lettertypestijl van het element in.
“ lettertypegrootte ” eigenschap wordt gebruikt voor het instellen van het lettertype van het element.
“ tekst uitlijnen ” eigenschap wordt gebruikt voor het aanpassen van de tekstuitlijning.
Hier is de uitvoer:
Stap 9: kleur rijen in volgorde Het is ook toegestaan om stijlen toe te passen op specifieke rijen of kolommen. De even rijen worden bijvoorbeeld gestileerd door het onderstaande formaat te volgen:
\ tlichaam tr:nth-kind ( ook al ) { achtergrond- kleur : #FFB200; }
Hier:
De ' :n-kind(even) ” pseudo-selector wordt gebruikt om één argument te nemen dat het patroon specificeert waarop de styling moet worden toegepast.
“ Achtergrond kleur ” eigenschap wordt gebruikt om de achtergrondkleur van het element in te stellen.
U kunt zien dat de achtergrondkleur met succes is toegepast op de even rijen:
Dat ging allemaal over het stylen van tabellen met CSS
Conclusie
Tabellen zijn een belangrijk hulpmiddel om de gegevens georganiseerd te houden. De tabel kan worden gemaakt met behulp van de HTML-elementen
,
,
en meer. Verschillende CSS-eigenschappen worden gebruikt om de tabel te stylen, zoals rand, achtergrondkleureigenschap, lettertypefamilie-eigenschap en nog veel meer. Voor een beter begrip heeft dit artikel een stapsgewijze procedure uitgelegd om een tabel op te maken met CSS.
