Kā veidot tabulu, izmantojot CSS

Tabulas ir visizplatītākais un efektīvākais rīks datu attēlošanai organizētā veidā. Agrāk, pirms CSS, elements tika izmantots, lai izveidotu bagātīgu dizaina izkārtojumu. Taču mūsdienās izkārtojumi tiek veidoti, izmantojot vairākus citus CSS rekvizītus. Konkrētāk, HTML elements “” tiek izmantots, lai izveidotu tīmekļa tabulu, kuru var vēl vairāk stilizēt, izmantojot dažādus CSS rekvizītus.

Šis pētījums sniegs norādījumus par tabulu veidošanu, izmantojot CSS.

Kā veidot tabulu, izmantojot CSS?

Lai piemērotu stilus tabulai, mēs veiksim tālāk norādītās darbības.

1. darbība: izveidojiet tabulu HTML valodā

< tabula >
< parakstu > Informācija studentiem < / parakstu >
< thead >
< tr >
< th > Vārds < / th >
< th > Kurss < / th >
< th > Marks < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Viljams < / td >
< td > Tīklošana < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Džeks < / td >
< td > Ievads C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Jāzeps < / td >
< td > Ievads Java < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / tabula >

Lai izveidotu tabulu HTML, tiek izmantoti šādi HTML elementi:

' ” elements tiek izmantots, lai izveidotu tabulu HTML.
' ” elements tiek izmantots, lai tabulai pievienotu parakstu.
'

” tiek izmantots, lai norādītu tabulas galveni, kas parasti satur virsrakstus.

” tiek izmantots rindas pievienošanai.

” norāda tabulas pamatdaļas daļu.

Izveidotā tabula pašlaik izskatās šādi:

Dosimies uz priekšu, lai redzētu, kā veidot šo tabulu.

2. darbība: ieveidojiet elementu “ķermenis”.

ķermenis {
fontu saime: Verdana, Geneva, Tahoma, sans-serif;
fons- krāsa : rgb ( 233 , 233 , 233 ) ;
}

Elements tiek lietots ar šādām CSS stila īpašībām:

' fontu ģimene 'īpašums ar vērtību' Verdana, Ženēva, Tahoma, sans-serif ” tiek izmantots, lai lietotu fontu, ko atbalsta pārlūkprogramma. Ja pārlūkprogramma neatbalsta pirmo fonta stilu, tiks izmantots otrs.
' fona krāsa Īpašums iestata elementa fona krāsu.

3. darbība: izveidojiet elementa “tikstu” stilu

parakstu {
fonts- Izmērs : 25 pikseļi;
teksts- izlīdzināt : centrs;
fons- krāsa : #1C6758;
krāsa : kukurūzas zīda;
}

Elementam

” norādiet virsraksta saturu.

ir šāds stils:

' fonta izmērs ” rekvizīts tiek izmantots fonta lieluma iestatīšanai.
' teksta līdzināšana ” rekvizīts norāda elementa teksta līdzinājumu.
' krāsa ” rekvizīts attiecas uz elementa fonta krāsu.

Šeit ir iepriekš sniegtā koda izvade:

4. darbība: pievienojiet tabulai apmali
' robeža Īpašums tiek izmantots, lai pievienotu apmali ap elementu. Tas ir saīsināts rekvizīts, kas norāda apmales platumu, apmales stilu un apmales krāsu.

Pielietosim tabulai apmali, polsterējumu un piemali:

tabula, th, td {
robeža : 2 pikseļi ciets #1C6758;
polsterējums: 1px 6px;
piemale: auto;
}

Šeit:

' robeža ” rekvizīts pielāgo apmali ap tabulu, norādot apmales platumu, apmales stilu un apmales krāsu.
' polsterējums ” norāda atstarpi ap elementa saturu, kur pirmā vērtība nosaka atstarpi augšdaļā un apakšā, bet otrā vērtība pievieno atstarpi satura labajā un kreisajā pusē.
' starpība 'īpašums ar vērtību' auto ” pievieno vienādu vietu ap elementu.

Izvade

Piezīme : ja mēs nevēlamies, lai starp tabulas apmalēm būtu atstarpes, izmantojiet rekvizītu border-collapse.

5. darbība: sakļaut tabulas robežu atstarpi
Atstarpes starp tabulas apmalēm var noņemt, izmantojot ' robeža-sabrukums ” īpašums ar vērtību “collapse”:

border-collapse: sabrukums;

6. darbība: pielāgojiet galda izmēru
Apskatīsim, kā pielāgot tabulas izmēru:

thead th {
platums : 160 pikseļi;
}

Pievienotais ' platums ” rekvizīts ar elementu

automātiski pielāgos tabulas izmēru atbilstoši tam::

Mēs varam arī piemērot stilus konkrētai tabulas šūnai. Apspriedīsim tos!

7. darbība: izveidojiet specifiskas tabulas šūnas
Lai veidotu konkrētu tabulas šūnu, norādiet šīs konkrētās šūnas klases nosaukumu. Piemēram, zemāk esošais kods norāda, ka otrās rindas trešajai šūnai ir piešķirts klases nosaukums ' izcelt ”:

< td klasē = 'izcelt' > 99 < / td >

Tagad piekļūstiet šūnai, izmantojot klases nosaukumu CSS failā:

.izcelt {
fons- krāsa : #0f90d5;
}

' .izcelt ” attiecas uz elementa

klases izcēlumu. Šis elements tiek lietots ar ' fona krāsa ” rekvizītu, lai norādītu fona krāsu.

Kā redzam, norādītā tabulas šūna ir veiksmīgi noformēta:

8. darbība: iestatiet fontu saimi un tabulas lielumu

tabula {
fontu saime: kursīvs;
fonts- Izmērs : 18 pikseļi;
teksts- izlīdzināt : centrs;
}

Tabulas elementam tiek lietoti šādi CSS rekvizīti:

' fontu ģimene ” rekvizīts iestata elementa fonta stilu.
' fonta izmērs ” rekvizīts tiek izmantots elementa fonta iestatīšanai.
' teksta līdzināšana ” rekvizīts tiek izmantots teksta līdzinājuma pielāgošanai.

Šeit ir izvade:

9. darbība. Krāsojiet rindas secībā
Ir atļauts arī piemērot stilus noteiktām rindām vai kolonnām. Piemēram, pāra rindas tiek veidotas, ievērojot šādu formātu:

\
tbody tr:nth-child ( pat ) {
fons- krāsa : #FFB200;
}

Šeit:

' :n-tais bērns (pāra) ” pseido selektors tiek izmantots, lai ņemtu vienu argumentu, kas norāda modeli, kuram jāpielieto stils.
' fona krāsa ” rekvizīts tiek izmantots, lai iestatītu elementa fona krāsu.

Var novērot, ka fona krāsa ir veiksmīgi piemērota pāra rindām:

Tas viss bija par tabulu veidošanu, izmantojot CSS

Secinājums

Tabulas ir svarīgs rīks datu kārtošanai. Tabulu var izveidot, izmantojot HTML

, un citus elementus. Tabulas stilizēšanai tiek izmantoti vairāki CSS rekvizīti, piemēram, apmale, fona krāsas rekvizīts, fontu saimes rekvizīts un daudz kas cits. Lai labāk izprastu, šajā rakstā ir izskaidrota soli pa solim procedūra tabulas veidošanai ar CSS.

,

Kā veidot tabulu, izmantojot CSS

Kā veidot tabulu, izmantojot CSS?

Secinājums

Kategorija

Populārākas Posts

Kā lietot Upper_bound() funkciju programmā C++

Kā pārbaudīt, vai vērtība ir skaitlis JavaScript

Kā atkārtoti instalēt peles draiverus operētājsistēmai Windows 11/10/7

Kā atkārtoti instalēt Microsoft Store lietotni

Rādītājs uz rādītāju programmā C++

Sadaliet virkni ar vairākiem atdalītājiem, izmantojot JavaScript

Kā iestatīt un lietot RAM disku sistēmā Windows?

Kā lejupielādēt mūziku savā Android tālrunī?

ESP32 NTP klients-serveris: iegūstiet datumu un laiku – Arduino IDE

Kas ir Vertex AI? Paskaidrojiet sīkāk

SQL Server Izveidot sinonīmu

Kā lietot sarunu zināšanu grafiku programmā LangChain?

Lapis Lazuli Minecraft

Kas ir AIPRM — paskaidrots Chrome paplašinājums ChatGPT

Git komandas, strādājot ar attāliem krātuvēm

Kā lietotnē Remove-Alias (Microsoft.PowerShell.Utility) cmdlet programmā PowerShell?

Kā pārlūkprogrammā Internet Explorer 8 atspējot Adobe Flash animācijas visiem, izņemot baltajā sarakstā iekļautajām vietnēm - Winhelponline

Funkcija ar vairākām izejām MATLAB

Roblox durvju figūra – viss, kas jums jāzina

Oracle atjaunina vairākas kolonnas