Kuinka muotoilla taulukko CSS:llä

Kuinka Muotoilla Taulukko Css Lla



Taulukot ovat yleisin ja tehokkain työkalu tietojen esittämiseen järjestelmällisesti. Aikaisemmin, ennen CSS:ää, elementtiä käytettiin rikkaiden suunnitteluasetelmien luomiseen. Mutta nykyään asetteluja luodaan käyttämällä useita muita CSS-ominaisuuksia. Tarkemmin sanottuna HTML-elementillä “” luodaan web-taulukko, jota voidaan edelleen muokata käyttämällä erilaisia ​​CSS-ominaisuuksia.

Tämä tutkimus opastaa taulukoiden muotoiluun CSS:llä.

Kuinka muotoilla taulukkoa CSS:llä?

Tyylien soveltamiseksi taulukkoon käymme läpi alla olevat vaiheet.





Vaihe 1: Luo taulukko HTML-kielellä



< pöytä >
< kuvateksti > Opiskelijoiden tiedot < / kuvateksti >
< thead >
< tr >
< th > Nimi < / th >
< th > Kurssi < / th >
< th > Merkit < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > William < / td >
< td > Verkostoituminen < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Johdatus C++:aan < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Johdatus Javaan < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / pöytä >

Taulukon luomiseen HTML-kielellä käytetään seuraavia HTML-elementtejä:



  • ' ”-elementtiä käytetään taulukon luomiseen HTML-kielellä.
  • ' ” -elementtiä käytetään lisättäessä kuvateksti taulukkoon.
  • '
” käytetään määrittämään taulukon otsikko, joka yleensä sisältää otsikot.
  • '
    • ' käytetään rivin lisäämiseen.
  • '
    • ” määrittää taulukon runko-osan.

    Luotu taulukko näyttää tällä hetkellä tältä:



    Mennään eteenpäin nähdäksemme kuinka muotoilla tämä taulukko.



    Vaihe 2: Muotoile 'body' -elementti

    kehon {
    kirjasinperhe: Verdana, Geneve, Tahoma, sans-serif;
    tausta- väri- : rgb ( 233 , 233 , 233 ) ;
    }

    -elementtiä käytetään seuraavilla CSS-tyyliominaisuuksilla:

    • ' font-perhe 'omaisuus arvolla' Verdana, Geneve, Tahoma, sans-serif ” käytetään selaimen tukeman fontin käyttämiseen. Jos selain ei tue ensimmäistä kirjasintyyliä, käytetään toista.
    • ' taustaväri ”-ominaisuus määrittää elementin taustavärin.

    Vaihe 3: Tyyli 'teksti'-elementti

    kuvateksti {
    fontti- koko : 25px;
    teksti- kohdistaa : keskus;
    tausta- väri- : #1C6758;
    väri- : maissisilkki;
    }

    ja muita elementtejä. Taulukon tyylistämiseen käytetään useita CSS-ominaisuuksia, kuten reunus, taustaväriominaisuus, fonttiperheominaisuus ja paljon muuta. Ymmärtämisen helpottamiseksi tässä kirjoituksessa on selitetty vaiheittaiset ohjeet taulukon tyylistämiseksi CSS:llä.

    Muut

    Luokka

    Suosittu Viestiä

    Kuinka suorittaa työ Raspberry Pi:llä

    Staattiset globaalit muuttujat C++:ssa

    Äänen korjaaminen Raspberry Pi:ssä

    Hanki suodatin ja seuraa Kubernetes-tapahtumia

    Mikä on Elastic Beanstalk? Onko se PaaS vai IaaS?

    Kuinka lisätä muistia sekä agenttiin että sen työkaluihin LangChainissa?

    Kuinka muuttaa akselia MATLABissa

    Kuinka muuntaa merkkijono merkkijonoksi Arduinossa käyttämällä toCharArray-funktiota

    Ero Arduino IDE:n ja TinkerCAD Simulatorin välillä

    Kuinka muuttaa Windowsin näytön skaalausta?

    Kuinka laittaa useita hiuksia Robloxiin?

    Kuinka korjata hiiren jäätyminen Windows 11:ssä?

    Mitä ovat tunnisteet C++:ssa?

    Diagonaalisten murtolukujen käyttäminen Tailwind Css:ssä

    Merkkijononäkymä C++:ssa

    CHMOD 777: Syntaksi ja funktio

    Mikä on switch Expression C#:ssa

    Oracle LIKE

    Mikä on Bighead ja Bighead -sarja Robloxissa

    Korjaa Explorer.exe -virhe 'Tähän tiedostoon ei ole liitetty ohjelmaa' Windows 7: ssä tai 8: ssa - Winhelponline

    ” määritä otsikon sisältö.
  • '
    • -elementti on muotoiltu seuraavasti:

    • ' Fonttikoko ” -ominaisuutta käytetään kirjasinkoon asettamiseen.
    • ' tekstin tasaus ”-ominaisuus määrittää elementin tekstin tasauksen.
    • ' väri- ”-ominaisuus viittaa elementin fontin väriin.

    Tässä on yllä olevan koodin tulos:

    Vaihe 4: Lisää reunus taulukkoon
    ' rajaa ” -ominaisuutta käytetään lisäämään reunus elementin ympärille. Se on pikakirjoitusominaisuus, joka määrittää reunuksen leveyden, reunuksen tyylin ja reunuksen värin.

    Laitetaan taulukkoon reunus, täyte ja marginaali:

    pöytä, th, td {
    rajaa : 2px kiinteä #1C6758;
    täyte: 1px 6px;
        margin: auto;
    }

    Tässä:

    • ' rajaa ”-ominaisuus säätää taulukon ympärillä olevaa reunaa määrittämällä reunuksen leveyden, reunuksen tyylin ja reunuksen värin.
    • ' pehmuste ” määrittää elementin sisällön ympärillä olevan tilan, jossa ensimmäinen arvo määrittää tilan ylhäällä alareunassa ja toinen arvo lisää tilaa sisällön oikealle vasemmalle puolelle.
    • ' marginaali 'omaisuus arvolla' auto ” lisää yhtä paljon tilaa elementin ympärille.

    Lähtö

    Huomautus : Jos emme halua välilyöntejä taulukon reunojen väliin, käytä border-collapse -ominaisuutta.

    Vaihe 5: Tiivistä reunusten väli taulukosta
    Taulukon reunojen väliset välilyönnit voidaan poistaa käyttämällä ' rajan romahtaminen ' omaisuutta arvolla 'collapse':

    border-collapse: romahtaa;

    Vaihe 6: Säädä pöydän kokoa
    Katsotaanpa, miten taulukon kokoa säädetään:

    thead th {
    leveys : 160 pikseliä;
    }

    Lisätty ' leveys ”-ominaisuus

    -elementin kanssa säätää automaattisesti taulukon koon sen mukaan::

    Voimme myös soveltaa tyylejä tiettyyn taulukon soluun. Keskustellaan niistä!

    Vaihe 7: Tyylikohtaiset taulukon solut
    Määritä tietyn taulukon solun tyyli määrittämällä kyseisen solun luokan nimi. Esimerkiksi alla oleva koodi edustaa, että toisen rivin kolmannelle solulle on määritetty luokan nimi ' kohokohta ”:

    < td luokkaa = 'kohokohta' > 99 < / td >

    Siirry nyt soluun käyttämällä CSS-tiedoston luokan nimeä:

    .kohokohta {
    tausta- väri- : #0f90d5;
    }

    ' .kohokohta ” viittaa

    		-elementin luokan korostukseen. Tätä elementtiä käytetään ' taustaväri ” -ominaisuutta määrittääksesi taustan värin.

    Kuten näemme, määritetty taulukon solu on muotoiltu onnistuneesti:

    Vaihe 8: Aseta fonttiperhe ja taulukon koko

    pöytä {
    font-family: kursiivinen;
    fontti- koko : 18px;
    teksti- kohdistaa : keskus;
    }

    Taulukkoelementtiin sovelletaan seuraavia CSS-ominaisuuksia:

    • ' font-perhe ”-ominaisuus määrittää elementin kirjasintyylin.
    • ' Fonttikoko ” -ominaisuutta käytetään elementin kirjasimen asettamiseen.
    • ' tekstin tasaus ” -ominaisuutta käytetään tekstin tasauksen säätämiseen.

    Tässä on tulos:

    Vaihe 9: Väritä rivit järjestyksessä
    On myös sallittua käyttää tyylejä tietyille riveille tai sarakkeille. Esimerkiksi parilliset rivit on muotoiltu alla olevan muodon mukaan:

    \
    tbody tr:nth-child ( jopa ) {
    tausta- väri- : #FFB200;
    }

    Tässä:

    • ' :n-lapsi(parillinen) ” pseudovalitsinta käytetään ottamaan yksi argumentti, joka määrittää kuvion, johon tyyliä sovelletaan.
    • ' taustaväri ' -ominaisuutta käytetään elementin taustavärin asettamiseen.

    Voidaan havaita, että taustaväriä käytetään onnistuneesti parillisille riveille:

    Siinä oli kyse taulukoiden muotoilusta CSS:n avulla

    Johtopäätös

    Taulukot ovat tärkeä työkalu tietojen järjestämisessä. Taulukko voidaan luoda käyttämällä HTML-elementtejä ,

    		,