Kaip formuoti lentelę naudojant CSS

Kaip Formuoti Lentele Naudojant Css



Lentelės yra labiausiai paplitusi ir veiksmingiausia priemonė duomenims pateikti organizuotai. Ankstesniais laikais, prieš CSS, elementas buvo naudojamas kuriant turtingą dizaino maketą. Tačiau šiais laikais maketai kuriami naudojant keletą kitų CSS ypatybių. Tiksliau sakant, HTML elementas „“ naudojamas kuriant žiniatinklio lentelę, kurią galima dar labiau formuoti pritaikius skirtingas CSS ypatybes.

Šiame tyrime bus paaiškinta, kaip formuoti lenteles naudojant CSS.

Kaip formuoti lentelę naudojant CSS?

Norėdami pritaikyti stilius lentelėje, atliksime toliau nurodytus veiksmus.





1 veiksmas: sukurkite lentelę HTML



< stalo >
< antraštė > Informacija studentams < / antraštė >
< thead >
< tr >
< th > vardas < / th >
< th > Kursas < / th >
< th > Ženklai < / th >
< / tr >
< / thead >
< tkūnas >
< tr >
< td > Viljamas < / td >
< td > Tinklo kūrimas < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Domkratas < / td >
< td > Įvadas į C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Juozapas < / td >
< td > Įvadas į Java < / td >
< td > 77 < / td >
< / tr >
< / tkūnas >
< / stalo >

Norint sukurti lentelę HTML, naudojami šie HTML elementai:



  • “ “ elementas naudojamas kuriant lentelę HTML.
  • “ “ elementas naudojamas antraštei pridėti prie lentelės.
  • “
“ naudojamas lentelės antraštei, kurioje paprastai yra antraštės, nurodyti.
  • “
    • “ naudojamas eilutei pridėti.
  • “
    • “ nurodo lentelės kūno dalį.

    Šiuo metu sukurta lentelė atrodo taip:



    Pažiūrėkime, kaip sudaryti šios lentelės stilių.



    2 veiksmas: sukurkite „kūno“ elementą

    kūnas {
    šriftų šeima: Verdana, Geneva, Tahoma, sans-serif;
    fonas- spalva : rgb ( 233 , 233 , 233 ) ;
    }

    Elementas taikomas su šiomis CSS stiliaus ypatybėmis:

    • “ šrifto šeima „turtas, kurio vertė“ Verdana, Ženeva, Tahoma, sans-serif “ naudojamas naršyklės palaikomam šriftui taikyti. Jei naršyklė nepalaiko pirmojo šrifto stiliaus, bus naudojamas kitas.
    • “ fono spalva “ ypatybė nustato elemento fono spalvą.

    3 veiksmas: sukurkite „antraštės“ elementą

    antraštė {
    šriftas- dydis : 25 pikseliai;
    tekstas- lygiuotis : centras;
    fonas- spalva : #1C6758;
    spalva : kukurūzų šilkas;
    }

    Elemento

    “ nurodykite antraštės turinį.
  • “
    • stilius yra toks:

    • “ šrifto dydis “ ypatybė naudojama šrifto dydžiui nustatyti.
    • “ teksto lygiavimas “ ypatybė nurodo elemento teksto lygiavimą.
    • “ spalva “ ypatybė nurodo elemento šrifto spalvą.

    Čia yra aukščiau pateikto kodo išvestis:

    4 veiksmas: pridėkite kraštinę prie lentelės
    „ siena ypatybė naudojama norint pridėti kraštinę aplink elementą. Tai trumpoji savybė, nurodanti kraštinės plotį, kraštinės stilių ir kraštinės spalvą.

    Lentelei pritaikykime kraštinę kartu su užpildu ir paraštę:

    lentelė, th, td {
    siena : 2px solid #1C6758;
    pamušalas: 1px 6px;
    paraštė: auto;
    }

    Čia:

    • “ siena ” ypatybė koreguoja kraštinę aplink lentelę, nurodydama kraštinės plotį, kraštinės stilių ir kraštinės spalvą.
    • “ kamšalas “ nurodo erdvę aplink elemento turinį, kur pirmoji reikšmė apibrėžia erdvę viršuje-apačioje, o antroji vertė prideda vietos dešinėje ir kairėje turinio pusėse.
    • “ marža „turtas, kurio vertė“ automatinis “ prideda vienodą erdvę aplink elementą.

    Išvestis

    Pastaba : jei nenorime tarpų tarp lentelės kraštinių, naudokite ypatybę border-collapse.

    5 veiksmas: sutraukite kraštinių tarpus iš lentelės
    Tarpus tarp lentelės kraštų galima pašalinti naudojant ' siena-griūtis “ nuosavybė su reikšme „collapse“:

    border-collapse: griūtis;

    6 veiksmas: sureguliuokite stalo dydį
    Pažiūrėkime, kaip koreguoti lentelės dydį:

    thead th {
    plotis : 160 taškų;
    }

    pridėtas ' plotis ” ypatybė su elementu

    automatiškai pakoreguos lentelės dydį pagal jį::

    Taip pat galime pritaikyti stilius konkrečiam lentelės langeliui. Aptarkime juos!

    7 veiksmas: sukurkite specifinių lentelės langelių stilių
    Norėdami sukurti konkretaus lentelės langelio stilių, nurodykite to konkretaus langelio klasės pavadinimą. Pavyzdžiui, toliau pateiktas kodas reiškia, kad trečiam antros eilutės langeliui yra priskirtas klasės pavadinimas ' paryškinti “:

    < td klasė = 'išryškinti' > 99 < / td >

    Dabar pasiekite langelį naudodami klasės pavadinimą CSS faile:

    .paryškinti {
    fonas- spalva : #0f90d5;
    }

    „ .paryškinti “ nurodo elemento

    		klasės paryškinimą. Šis elementas taikomas su ' fono spalva “ ypatybę, kad nurodytumėte fono spalvą.

    Kaip matome, nurodyta lentelės langelis sėkmingai suformuotas:

    8 veiksmas: nustatykite šriftų šeimą ir lentelės dydį

    stalo {
    šriftų šeima: kursyvus;
    šriftas- dydis : 18px;
    tekstas- lygiuotis : centras;
    }

    Lentelės elementui taikomos šios CSS ypatybės:

    • “ šrifto šeima “ ypatybė nustato elemento šrifto stilių.
    • “ šrifto dydis “ ypatybė naudojama elemento šriftui nustatyti.
    • “ teksto lygiavimas ypatybė naudojama teksto lygiavimui koreguoti.

    Štai išvestis:

    9 veiksmas: spalvinkite eilutes seka
    Taip pat leidžiama taikyti stilius konkrečioms eilutėms ar stulpeliams. Pavyzdžiui, lyginės eilutės formuojamos tokiu formatu:

    \
    tbody tr:nth-child ( net ) {
    fonas- spalva : #FFB200;
    }

    Čia:

    • „ :n-tas vaikas (net) Pseudo parinkiklis naudojamas vienam argumentui, kuris nurodo šabloną, kuriam turi būti taikomas stilius, paimti.
    • “ fono spalva “ ypatybė naudojama elemento fono spalvai nustatyti.

    Galima pastebėti, kad fono spalva sėkmingai pritaikyta lygioms eilutėms:

    Tai buvo viskas apie lentelių formavimą naudojant CSS

    Išvada

    Lentelės yra svarbi priemonė duomenims tvarkyti. Lentelę galima sukurti naudojant HTML

    , ir kitus elementus. Lentelei stilizuoti naudojamos kelios CSS ypatybės, pvz., kraštinė, fono spalvos ypatybė, šrifto šeimos ypatybė ir daugelis kitų. Siekiant geresnio supratimo, šiame rašte paaiškinta žingsnis po žingsnio tvarka, kaip formuoti lentelę naudojant CSS.

    Kita

    Kategorija

    Populiarios Temos

    Kaip pridėti vietoje priglobtą kodą prie „GitHub“?

    Kaip pridėti tarpą tarp stulpelių nepaveikiant eilučių HTML lentelėje?

    Kaip ištaisyti DLL klaidas arba trūkstamų DLL failų problemas „Windows 10“ ir „11“

    Kaip sukurti BCD į 7 segmentų ekrano dekoderį

    Kaip įdiegti „VMware Workstation 17 Pro“ Ubuntu 22.04 LTS

    Didžiausia „Arduino Nano“ įtampa

    Kokie yra geriausi AI rašymo padėjėjai?

    Kaip įdiegti ir naudoti „Ansible“ sistemoje „Windows 11“.

    5 neveikiančios ausinių mikrofono problemos

    Oracle sukurti temp lentelę

    Kaip dinamiškai rašyti HTML kodą naudojant „JavaScript“.

    Kaip gauti užklausos eilutės reikšmes „JavaScript“.

    Ar „Turnitin“ gali aptikti „ChatGPT“.

    „PowerShell“ naudojimas tekstiniams failams skaityti ir tekstui pakeisti

    Kas yra geras komandų eilutės skaičiuotuvas „Linux Mint 21“.

    Kaip iš naujo įkelti „div“ iš naujo neįkeliant viso „jQuery“ puslapio

    Kas yra EOF C programavimo kalboje

    Induktoriai serijinėse ir serijinėse induktorių grandinėse

    Kaip nustatyti greitą Node.js Sass/SCSS projektą?

    Kaip išspręsti „FileNotFoundException“ problemą „Java.io“.

    ,