Kako stilizirati tablicu pomoću CSS-a

Tablice su najčešći i najučinkovitiji alat za predstavljanje podataka na organiziran način. Ranije, prije CSS-a, element korišten je za stvaranje bogatih dizajna. Ali danas se izgledi stvaraju korištenjem nekoliko drugih CSS svojstava. Točnije, HTML element “” koristi se za stvaranje web tablice, koja se može dodatno stilizirati primjenom različitih CSS svojstava.

Ova će studija biti vodič koji se odnosi na stilske tablice s CSS-om.

Kako stilizirati tablicu pomoću CSS-a?

Da bismo primijenili stilove na tablicu, proći ćemo kroz niz koraka navedenih u nastavku.

Korak 1: Napravite tablicu u HTML-u

< stol >
< naslov > Informacije o studentima < / naslov >
< thead >
< tr >
< th > Ime < / th >
< th > Tečaj < / th >
< th > Oznake < / th >
< / tr >
< / thead >
< tijelo >
< tr >
< td > Williame < / td >
< td > Umrežavanje < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Utičnica < / td >
< td > Uvod u C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Josipa < / td >
< td > Uvod u Javu < / td >
< td > 77 < / td >
< / tr >
< / tijelo >
< / stol >

Za izradu tablice u HTML-u koriste se sljedeći HTML elementi:

“ ” element se koristi za stvaranje tablice u HTML-u.
“ ” element se koristi za dodavanje naslova u tablicu.
“ ” koristi se za određivanje zaglavlja tablice, koje obično sadrži naslove.
“

” koristi se za redak za dodavanje.

“

” specificira dio tijela tablice.

Kreirana tablica trenutno izgleda ovako:

Idemo naprijed da vidimo kako stilizirati ovaj stol.

Korak 2: Stilizirajte element 'tijela'.

tijelo {
obitelj fontova: Verdana, Geneva, Tahoma, sans-serif;
pozadina- boja : rgb ( 233 , 233 , 233 ) ;
}

Element primjenjuje se sa sljedećim svojstvima CSS stila:

“ obitelj-fontova ' svojstvo s vrijednošću ' Verdana, Ženeva, Tahoma, sans-serif ” koristi se za primjenu fonta koji preglednik podržava. Ako preglednik ne podržava prvi stil fonta, koristit će se drugi.
“ boja pozadine ” Svojstvo postavlja boju pozadine elementa.

Korak 3: Stilizirajte element 'naslova'.

naslov {
font- veličina : 25 px;
tekst- uskladiti : centar;
pozadina- boja : #1C6758;
boja : kukuruzna svila;
}

Element

” odredite sadržaj naslova.

“

stiliziran je na sljedeći način:

“ veličina fonta ” Svojstvo se koristi za postavljanje veličine fonta.
“ poravnanje teksta ” Svojstvo određuje poravnanje teksta elementa.
“ boja ” Svojstvo se odnosi na boju fonta elementa.

Ovo je rezultat gore navedenog koda:

Korak 4: Dodajte obrub tablici
' granica ” Svojstvo se koristi za dodavanje obruba oko elementa. To je skraćeno svojstvo koje određuje širinu obruba, stil obruba i boju obruba.

Primijenimo obrub, zajedno s ispunom i marginom na tablicu:

stol, th, td {
granica : 2px solid #1C6758;
ispuna: 1px 6px;
margina: auto;
}

Ovdje:

“ granica ” Svojstvo prilagođava obrub oko tablice određivanjem širine obruba, stila obruba i boje obruba.
“ podstava ” određuje prostor oko sadržaja elementa, pri čemu prva vrijednost definira prostor na vrhu i dnu, a druga vrijednost dodaje prostor na desnoj lijevoj strani sadržaja.
“ margina ' svojstvo s vrijednošću ' auto ” dodaje jednak prostor oko elementa.

Izlaz

Bilješka : Ako ne želimo razmake između obruba tablice, upotrijebimo svojstvo border-collapse.

Korak 5: Sažmi razmak rubova iz tablice
Razmaci između obruba tablice mogu se ukloniti korištenjem ' granica-kolaps ” svojstvo s vrijednošću “collapse”:

border-collapse: kolaps;

Korak 6: Podesite veličinu tablice
Pogledajmo kako prilagoditi veličinu tablice:

thead th {
širina : 160 px;
}

Dodano ' širina ” svojstvo s elementom

automatski će prilagoditi veličinu tablice prema njemu::

Također možemo primijeniti stilove na određenu ćeliju tablice. Raspravljajmo o njima!

Korak 7: Stilizirajte specifične ćelije tablice
Da biste stilizirali određenu ćeliju tablice, navedite naziv klase te određene ćelije. Na primjer, kod u nastavku predstavlja da je trećoj ćeliji drugog reda dodijeljen naziv klase ' istaknuti ”:

< td razreda = 'istaknuti' > 99 < / td >

Sada pristupite ćeliji koristeći naziv klase u CSS datoteci:

.istaknuti {
pozadina- boja : #0f90d5;
}

' .istaknuti ” odnosi se na isticanje klase elementa

. Ovaj element se primjenjuje s ' boja pozadine ” za određivanje boje pozadine.

Kao što vidimo, navedena ćelija tablice je uspješno oblikovana:

Korak 8: Postavite obitelj fontova i veličinu tablice

stol {
obitelj-fontova: kurziv;
font- veličina : 18 px;
tekst- uskladiti : centar;
}

Sljedeća CSS svojstva primjenjuju se na element tablice:

“ obitelj-fontova ” svojstvo postavlja stil fonta elementa.
“ veličina fonta ” Svojstvo se koristi za postavljanje fonta elementa.
“ poravnanje teksta ” Svojstvo se koristi za podešavanje poravnanja teksta.

Evo rezultata:

Korak 9: Boja redova u nizu
Također je dopušteno primijeniti stilove na određene retke ili stupce. Na primjer, parni redovi stilizirani su slijedeći format u nastavku:

\
tbody tr:nth-child ( čak ) {
pozadina- boja : #FFB200;
}

Ovdje:

' :n-to dijete(parni) ” pseudo selektor koristi se za uzimanje jednog argumenta koji specificira uzorak na koji se treba primijeniti stil.
“ boja pozadine ” Svojstvo se koristi za postavljanje boje pozadine elementa.

Može se uočiti da je boja pozadine uspješno primijenjena na parne retke:

To je bilo sve o oblikovanju tablica s CSS-om

Zaključak

Tablice su važan alat za organizaciju podataka. Tablica se može stvoriti pomoću HTML

, i više elemenata. Nekoliko CSS svojstava koristi se za stiliziranje tablice, kao što su obrub, svojstvo boje pozadine, svojstvo obitelji fonta i mnoga druga. Radi boljeg razumijevanja, ovaj zapis je objasnio postupak korak po korak za stiliziranje tablice pomoću CSS-a.

,

Kako stilizirati tablicu pomoću CSS-a

Kako stilizirati tablicu pomoću CSS-a?

Zaključak

Kategorija

Popularni Postovi

Kako koristiti Dot naredbe u Node.js REPL?

Elasticsearch SQL Translate API

Kako pronaći maksimalnu i minimalnu vrijednost u matrici velikog skupa podataka u MATLAB-u

Što je struktura podataka u C++

Kako zaključati prijenosno računalo s tipkovnice?

Gdje Linux pohranjuje moj Syslog

Kako stvoriti unaprijed postavljenu postavku u Tailwindu

Kako odrediti vrste funkcije u TypeScriptu

Python File readable() metoda

Kako poništiti Git Reset s oznakom –hard

Kako koristiti naredbu systemctl za omogućavanje i onemogućavanje usluga

Prosljeđivanje više vrijednosti jednom parametru PowerShell skripte

Vodič za izradu oscilatora 555 – Astabilni multivibrator

Kako dohvatiti granu iz uzvodnog u lokalni repo?

LWC – Combobox

Kako postaviti Django okruženje na EC2 Windows

Kako koristiti zsh-git-prompt?

Kako sinkronizirati s udaljenim Git spremištem?

Početak rada s agentima u LangChainu?

Kako pronaći faktorijel u MATLAB-u