Hvordan style tabeller ved hjelp av CSS
Denne bloggen vil demonstrere prosedyren for styling bord ved hjelp av CSS. Så la oss komme i gang!
Hva er tabeller i HTML
Bord regnes som en essensiell komponent i en Html dokument. Det kan opprettes ved hjelp av “ Noen viktige og grunnleggende CSS -egenskaper er gitt nedenfor som hjelper til med å endre tabellstil: Vi vil nå diskutere alle de ovennevnte CSS-egenskapene for å style HTML-tabeller med passende eksempler. Stiltabeller ved hjelp av CSS Border Property CSS tilbyr en "grense" -egenskap som brukes til å legge til grenser i et bord. For å legge til en grense, kan du ta i bruk følgende eksempel. Eksempel Produksjon Stilbordgrense ved bruk av CSS -breddeegenskaper I forrige eksempel har du sett metoden for å sette inn en grense rundt et bord i CSS. Det gitte “grense”Eiendom spesifiserer ikke bredden, da du kanskje vil justere den i henhold til dine krav. For å gjøre det, sjekk ut det oppgitte eksemplet. Eksempel Full bredde på bordet Produksjon Stiltabeller ved hjelp av CSS Border-Collapse-egenskap Som du kan se, har tabellen opprettet i det ovennevnte eksemplet en egen kant for hver rad og kolonne som kanskje ikke gir et anstendig blikk på et nettsted. Imidlertid tillater CSS deg å kollapse de grenser inn i en enkelt grense ved å bruke “grensekollaps”Eiendom. Eksempel Bordgrenser kollapser Produksjon Stiltabell ved hjelp av CSS -bredde og høydeegenskaper I CSS, “bredde”Og“høyde”Egenskaper brukes først og fremst for endring av tabellmatriser. I det følgende eksempel vil vi angi tabellen bredde som "90%" og høyde av tabelloverskriftscellen som “90px”: Stylingbord ved hjelp av CSS Eksempel for innstilling av høyde og bredde: Produksjon Stiltabellceller justering ved bruk av CSS vertikal-align-egenskap CSS “vertikal-align”Eiendom brukes til å justere teksten i tabellcellen fra toppen, bunnen eller midten, men du må velge om du vil justere raden eller kolonnene vertikalt. La oss sjekke det oppgitte eksemplet: Stylingbord i HTML Eksempel på å sette vertikal justering Eksemplet ovenfor vil vertikalt justere tabellcelleteksten til bunnen: Stiltabellceller justering ved bruk av CSS horisontal egenskap CSS tilbyr “horisontalt”Eiendom med det formål å justere teksten horisontalt. Denne egenskapen kan bidra til å justere teksten til venstre, høyre eller sentrum: Stylingbord i HTML Eksempel på å sette horisontal justering Det ovennevnte eksemplet vil justere teksten som er lagt til i tabellcellen med hensyn til bunn: Stiltabeller ved hjelp av CSS -polstringseiendommer “polstring”CSS -eiendom brukes til å kontrollere mellomrommene mellom tekstceller og kant. Det brukes hovedsakelig for Eksempel Stylingbord i HTML Eksempel på bruk av padding -egenskap De undergitte bildene betyr at vi har lagt til "20px" polstring mellom grensen og celleteksten: Stiltabeller ved hjelp av CSS bakgrunnsfargede eiendommer CSS tillater deg å definere farger separat for hver tabell hver kolonne, rad eller celle. For eksempel vil følgende tabell inneholde bakgrunn av tabelloverskriften “th" som "oransje” farge og alt "nth-Child (til og med)”Selv antall rader”tr" vil ha "grå" bakgrunnsfarge: Farget bordhode Produksjon Konklusjon Til Stil HTML Tabeller, du kan bruke forskjellige CSS -egenskaper For å legge til og justere grenser, lage kollapsgrenser, justere bredden og høyden på tabellen, justere tekst horisontalt eller vertikalt, legge til polstring eller tilpasse rader, søyler eller celler med de spesifiserte fargene. Denne bloggen demonstrerte bruken av forskjellige CSS -egenskaper for stiltabeller for en webside. Prøv dem og nyt styling HTML -bord på en ny måte! ”Tag and the Sub-Table Tags”
”For rader,” ”For kolonner, og“ ”For bordoverskrifter. Alle de nevnte kodene er de grunnleggende tabellkoden; Imidlertid kan CSS -stilegenskaper brukes til stylingbord.
Det undergitte eksemplet vil vise et solid ”svart”Grensen til“1px”Bredde for hele bordet”bord”, Headers“th”, Og kolonner“td”:Lærer Student Alice merke Luice Griffin
I dette eksemplet vil vi lage en HTML -tabell og style det på en måte som den vil spenne over hele skanningen med full bredde “100%”:Lærer Student Alice merke Luice Griffin
Nå vil vi bruke "grensekollaps”Eiendom for å style det opprettede bordet med en enkelt kant for både rader og kolonner:Lærer Student Alice merke Luice Griffin
Lærer Student Alice merke Luice Griffin
Lærer Student Alice merke Luice Griffin
Lærer Student Alice merke Luice Griffin
og elementer. Lærer Student Alice merke Luice Griffin
Lærer Student Alice merke Luice Griffin