Sådan styles tabel med CSS

Sadan Styles Tabel Med Css



Tabeller er det mest almindelige og effektive værktøj til at repræsentere data på en organiseret måde. I tidligere tider, før CSS, var element blev brugt til at skabe rige designlayouts. Men i dag skabes layouts ved at bruge flere andre CSS-egenskaber. Mere specifikt bruges HTML-elementet '' til at skabe en webtabel, som kan styles yderligere ved at anvende forskellige CSS-egenskaber.

Denne undersøgelse vil guide relateret til styling af tabeller med CSS.

Hvordan styles tabel med CSS?

For at anvende stilarter på bordet vil vi gennemgå rækken af ​​trin nedenfor.





Trin 1: Opret en tabel i HTML



< bord >
< billedtekst > Elevinformation < / billedtekst >
< thead >
< tr >
< th > Navn < / th >
< th > Rute < / th >
< th > Mærker < / th >
< / tr >
< / thead >
< kroppen >
< tr >
< td > William < / td >
< td > Netværk < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Introduktion til C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Introduktion til Java < / td >
< td > 77 < / td >
< / tr >
< / kroppen >
< / bord >

For at oprette en tabel i HTML bruges følgende HTML-elementer:



  • “ ” element bruges til at oprette en tabel i HTML.
  • “ ”-elementet bruges til at tilføje en billedtekst til tabellen.
  • “ ” bruges til at angive tabellens overskrift, som normalt indeholder overskrifterne.
  • “
” bruges til tilføjelsesrækken.
  • “
    • ” angiver kroppens del af tabellen.

    Den oprettede tabel ser i øjeblikket sådan ud:



    Lad os gå videre for at se, hvordan du style dette bord.



    Trin 2: Style 'body' Element

    legeme {
    skrifttype-familie: Verdana, Geneve, Tahoma, sans-serif;
    baggrund- farve : rgb ( 233 , 233 , 233 ) ;
    }

    Elementet anvendes med følgende CSS-stilegenskaber:

    • “ skrifttype-familie ' ejendom med værdien ' Verdana, Genève, Tahoma, sans-serif ” bruges til at anvende den skrifttype, der understøttes af browseren. Hvis browseren ikke understøtter den første skrifttype, vil den anden blive brugt.
    • “ baggrundsfarve egenskaben angiver elementets baggrundsfarve.

    Trin 3: Stil 'billedtekst'-element

    billedtekst {
    skrift- størrelse : 25px;
    tekst- justere : center;
    baggrund- farve : #1C6758;
    farve : majssilke;
    }

    Elementet

    ” angiv overskriftens indhold.
  • “
    • er stylet som følger:

    • “ skriftstørrelse ” egenskaben bruges til indstilling af skriftstørrelsen.
    • “ tekstjustering ” egenskab angiver justeringen af ​​elementets tekst.
    • “ farve ” egenskab refererer til elementets skrifttypefarve.

    Her er outputtet af den ovenfor angivne kode:

    Trin 4: Tilføj kant til tabellen
    Det ' grænse ” egenskaben bruges til at tilføje en kant rundt om elementet. Det er en stenografiegenskab, der specificerer kantbredden, kantstilen og kantfarven.

    Lad os anvende grænsen sammen med polstringen og margen til tabellen:

    bord, th, td {
    grænse : 2px fast #1C6758;
    polstring: 1px 6px;
    margin: auto;
    }

    Her:

    • “ grænse ” egenskab justerer rammen rundt om tabellen ved at angive kantbredde, kantstil og kantfarve.
    • “ polstring ” angiver rummet omkring elementets indhold, hvor den første værdi definerer rummet øverst-nederst, og den anden værdi tilføjer plads i højre-venstre sider af indholdet.
    • “ margen ' ejendom med værdien ' auto ” tilføjer lige stor plads omkring elementet.

    Produktion

    Bemærk : Hvis vi ikke vil have mellemrummene mellem tabelkanterne, skal du bruge egenskaben border-collapse.

    Trin 5: Skjul grænseafstand fra tabel
    Mellemrummene mellem bordkanterne kan fjernes ved at bruge ' grænse-kollaps egenskab med værdien 'kollaps':

    grænse-kollaps: kollaps;

    Trin 6: Juster bordstørrelsen
    Lad os se, hvordan du justerer bordstørrelsen:

    den th {
    bredde : 160px;
    }

    Den tilføjede ' bredde ” egenskab med

    -elementet vil automatisk justere tabelstørrelsen i overensstemmelse hermed::

    Vi kan også anvende typografier til den specifikke tabelcelle. Lad os diskutere dem!

    Trin 7: Stil specifikke tabelceller
    For at style den specifikke tabelcelle skal du angive klassenavnet på den pågældende celle. For eksempel repræsenterer koden nedenfor, at den tredje celle i den anden række er tildelt et klassenavn ' fremhæve ”:

    < td klasse = 'fremhæv' > 99 < / td >

    Få nu adgang til cellen ved hjælp af klassenavnet i CSS-filen:

    .fremhæv {
    baggrund- farve : #0f90d5;
    }

    Det ' .fremhæv ” refererer til klassefremhævningen af ​​

    		-elementet. Dette element anvendes med ' baggrundsfarve ” egenskab for at angive farven på baggrunden.

    Som vi kan se, er den angivne tabelcelle formateret med succes:

    Trin 8: Indstil skrifttypefamilien og tabellens størrelse

    bord {
    skrifttype-familie: kursiv;
    skrift- størrelse : 18px;
    tekst- justere : center;
    }

    Følgende CSS-egenskaber anvendes på tabelelementet:

    • “ skrifttype-familie egenskaben angiver elementets skrifttypestil.
    • “ skriftstørrelse egenskaben bruges til indstilling af elementets skrifttype.
    • “ tekstjustering ” egenskaben bruges til at justere tekstjusteringen.

    Her er outputtet:

    Trin 9: Farver rækker i sekvens
    Det er også tilladt at anvende typografier på specifikke rækker eller kolonner. For eksempel styles de lige rækker ved at følge nedenstående format:

    \
    tbody tr:nth-child ( også selvom ) {
    baggrund- farve : #FFB200;
    }

    Her:

    • Det ' :nth-child(selv) ” pseudovælgeren bruges til at tage et argument, der specificerer det mønster, som stylingen skal anvendes på.
    • “ baggrundsfarve egenskaben bruges til at indstille elementets baggrundsfarve.

    Det kan observeres, at baggrundsfarven med succes anvendes på de lige rækker:

    Det handlede om styling af borde med CSS

    Konklusion

    Tabeller er et vigtigt værktøj til at holde dataene organiseret. Tabellen kan oprettes ved at bruge HTML-elementerne

    , og flere. Adskillige CSS-egenskaber bruges til at stilisere tabellen, såsom kant, baggrundsfarveegenskab, fontfamilieegenskab og mange flere. For bedre forståelse har denne opskrivning forklaret en trin-for-trin procedure til at style en tabel med CSS.

    Andet

    Kategori

    Populære Indlæg

    Sådan installeres Proxmox VE 8 på din server

    Kubectl Vedhæft kommando

    Sådan bruges vpasolve()-funktionen i MATLAB?

    Hvordan tæller man baseret på tilstand i MySQL?

    Hvad er navngivningskonvention i C++

    Sådan deaktiveres Roblox-sikkerhedsmeddelelser?

    BigQuery vs Athena

    Sådan forbinder du Discord til din PlayStation Network-konto

    Sådan installeres NVIDIA-driverne på Windows 10/11

    Kapitel 6: Moderne computerarkitektur Grundlæggende med Assembly Language

    Sådan køres et program, der er forhøjet via højreklikmenuen i Windows 7 / Vista? - Winhelponline

    Forbind Asana med Salesforce

    PHP echo vs print erklæringer

    Hvad er array.slice()-metoden i JavaScript?

    Løs problemet 'Lydikon på proceslinjen virker ikke' i Windows 10

    Hvordan AWS brugte ML til at hjælpe Amazon Fulfillment Centre med at reducere nedetid?

    Forståelse af Makefile-syntaks: Almindelige problemer og løsninger (herunder 'Manglende operatør' og 'Indgangspunkt ikke fundet')

    Hvad er BCM, og hvorfor bruges det i en Raspberry Pi

    Sådan integreres MongoDB Java-driveren

    Hvad er metoden lower_Bound() i C++

    ,