See uuring juhendab tabelite kujundamist CSS-iga.
Kuidas tabelit CSS-iga kujundada?
Tabelile stiilide rakendamiseks teeme läbi alltoodud samme.
1. samm: looge tabel HTML-is
< laud >
< pealdis > Õpilaste teave < / pealdis >
< thead >
< tr >
< th > Nimi < / th >
< th > Kursus < / th >
< th > Märgid < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > William < / td >
< td > Võrgustiku loomine < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Sissejuhatus C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joosep < / td >
< td > Sissejuhatus Java-sse < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / laud >
HTML-is tabeli loomiseks kasutatakse järgmisi HTML-i elemente:
- “
” elementi kasutatakse tabeli loomiseks HTML-is. - “
” elementi kasutatakse tabelisse pealkirja lisamiseks. - “ ” kasutatakse tabeli päise määramiseks, mis tavaliselt sisaldab pealkirju.
- “
” kasutatakse rea lisamiseks. - “
” täpsustage pealkirja sisu. - “ ” täpsustab tabeli kehaosa.
Loodud tabel näeb praegu välja selline:
Liigume edasi, et näha, kuidas seda tabelit kujundada.
2. samm: kujundage element 'keha'.
keha {
fondiperekond: Verdana, Genf, Tahoma, sans-serif;
taust- värvi : rgb ( 233 , 233 , 233 ) ;
}Elementi
rakendatakse järgmiste CSS-i stiiliomadustega:- “ font-perekond ' vara väärtusega ' Verdana, Genf, Tahoma, sans-serif ” kasutatakse brauseri toetatud fondi rakendamiseks. Kui brauser ei toeta esimest kirjastiili, kasutatakse teist.
- “ taustavärv ” atribuut määrab elemendi taustavärvi.
3. samm. Stiilige element 'pealkiri'.
pealdis {
font- suurus : 25 pikslit;
tekst- joondada : Keskus;
taust- värvi : #1C6758;
värvi : maissiid;
}Elemendi
stiil on järgmine: - “ fondi suurus ” atribuuti kasutatakse fondi suuruse määramiseks.
- “ teksti joondamine ” atribuut määrab elemendi teksti joonduse.
- “ värvi ” atribuut viitab elemendi fondi värvile.
Siin on ülaltoodud koodi väljund:
4. samm: lisage tabelile ääris
' piir ” atribuuti kasutatakse elemendi ümber äärise lisamiseks. See on stenogrammi omadus, mis määrab äärise laiuse, äärise stiili ja äärise värvi.Rakendame tabelile äärise koos polsterduse ja veerisega:
laud, th, td {
piir : 2px tahke #1C6758;
polsterdus: 1px 6px;
veeris: auto;
}Siin:
- “ piir ” atribuut kohandab tabeli ümber olevat äärist, määrates äärise laiuse, äärise stiili ja äärise värvi.
- “ polsterdus ” määrab ruumi elemendi sisu ümber, kus esimene väärtus määrab ruumi üla-all ja teine väärtus lisab ruumi sisu paremale ja vasakule küljele.
- “ marginaal ' vara väärtusega ' auto ” lisab elemendi ümber võrdse ruumi.
Väljund
Märge : kui me ei soovi tabeli ääriste vahele tühikuid, kasutage atribuuti border-collapse.
5. toiming: ahendage tabeli piiride vahe
border-collapse: kollaps;
Tabeli ääriste vahelisi tühikuid saab eemaldada, kasutades ' piiri-kokkuvarisemine ” atribuut väärtusega “collapse”:
6. samm: reguleerige tabeli suurust
thead th {
Vaatame, kuidas tabeli suurust reguleerida:
laius : 160 pikslit;
}lisatud ' laius ” atribuut elemendiga
kohandab tabeli suurust automaatselt vastavalt sellele:: 
Samuti saame konkreetsele tabelilahtrile stiile rakendada. Arutame neid!
7. samm: kujundage spetsiifilised tabelilahtrid
< td klass = 'esile' > 99 < / td >
Konkreetse tabeli lahtri stiiliks määrake selle konkreetse lahtri klassi nimi. Näiteks allolev kood näitab, et teise rea kolmandale lahtrile on määratud klassi nimi ' esile ”:Nüüd pääsete lahtrisse CSS-failis oleva klassi nime abil:
.tõstke esile {
taust- värvi : #0f90d5;
}' .tõstke esile ” viitab elemendi
klassi esiletõstmisele. Seda elementi rakendatakse koos ' taustavärv ” atribuut taustavärvi määramiseks. Nagu näeme, on määratud tabelilahter edukalt kujundatud:
8. samm: määrake fondipere ja tabeli suurus
laud {
font-perekond: kursiiv;
font- suurus : 18 pikslit;
tekst- joondada : Keskus;
}Tabelielemendile rakendatakse järgmisi CSS-i atribuute:
- “ font-perekond ” atribuut määrab elemendi fondi stiili.
- “ fondi suurus ” atribuuti kasutatakse elemendi fondi määramiseks.
- “ teksti joondamine ” atribuuti kasutatakse teksti joonduse reguleerimiseks.
Siin on väljund:
9. samm: värvige ridu järjestuses
\
Samuti on lubatud rakendada stiile kindlatele ridadele või veergudele. Näiteks paaritud read kujundatakse järgmises vormingus:
tbody tr:nth-laps ( isegi ) {
taust- värvi : #FFB200;
}Siin:
- ' :nth-laps(paaris) ” pseudovalijat kasutatakse ühe argumendi võtmiseks, mis määrab mustri, millele stiili rakendatakse.
- “ taustavärv ” atribuuti kasutatakse elemendi taustavärvi määramiseks.
Võib täheldada, et taustavärv on edukalt rakendatud paaristele ridadele:
See kõik puudutas tabelite kujundamist CSS-iga
Järeldus
Tabelid on oluline tööriist andmete korrastamiseks. Tabelit saab luua HTML-i
, , ja muude elementide abil. Tabeli stiliseerimiseks kasutatakse mitmeid CSS-i atribuute, nagu ääris, taustavärvi atribuut, fondiperekonna atribuut ja palju muud. Parema mõistmise huvides on selles kirjutises selgitatud samm-sammult CSS-i tabeli stiilimise protseduuri. - “