Paano Mag-istilo ng Table Gamit ang CSS

Paano Mag Istilo Ng Table Gamit Ang Css



Ang mga talahanayan ay ang pinakakaraniwan at epektibong tool upang kumatawan sa data sa isang organisadong paraan. Noong unang panahon, bago ang CSS, ang ginamit ang elemento para sa paglikha ng mga rich design layout. Ngunit sa ngayon, ang mga layout ay nilikha sa pamamagitan ng paggamit ng ilang iba pang mga katangian ng CSS. Higit na partikular, ang HTML na '' na elemento ay ginagamit upang lumikha ng isang web table, na maaaring higit pang i-istilo sa pamamagitan ng paglalapat ng iba't ibang mga katangian ng CSS.

Ang pag-aaral na ito ay gagabay kaugnay sa pag-istilo ng mga talahanayan gamit ang CSS.

Paano Mag-istilo ng Table Gamit ang CSS?

Upang maglapat ng mga istilo sa talahanayan, dadaan tayo sa serye ng mga hakbang na ibinigay sa ibaba.





Hakbang 1: Gumawa ng Table sa HTML



< mesa >
< caption > Impormasyon ng mga Mag-aaral < / caption >
< thead >
< tr >
< ika > Pangalan < / ika >
< ika > kurso < / ika >
< ika > Mga marka < / ika >
< / tr >
< / thead >
< tbody >
< tr >
< td > William < / td >
< td > Networking < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Panimula sa C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Panimula sa Java < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / mesa >

Upang lumikha ng isang talahanayan sa HTML, ang mga sumusunod na elemento ng HTML ay ginagamit:



  • “ 'Ang elemento ay ginagamit upang lumikha ng isang talahanayan sa HTML.
  • “
” ay ginagamit para sa pagdaragdag ng hilera.
  • “
    • ” ay tumutukoy sa bahagi ng katawan ng mesa.

    Kasalukuyang ganito ang ginawang talahanayan:



    Sumulong tayo para makita kung paano i-istilo ang talahanayang ito.



    Hakbang 2: Istilo ang Elemento ng 'katawan'.

    katawan {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background- kulay : rgb ( 233 , 233 , 233 ) ;
    }

    Ang elementong ay inilapat sa mga sumusunod na katangian ng pag-istilo ng CSS:

    • “ font-family ' ari-arian na may halaga ' Verdana, Geneva, Tahoma, sans-serif ” ay ginagamit upang ilapat ang font na sinusuportahan ng browser. Kung hindi sinusuportahan ng browser ang unang istilo ng font, gagamitin ang isa.
    • “ kulay ng background Ang ” property ay nagtatakda ng kulay ng background ng elemento.

    Hakbang 3: Istilo ang Elemento ng 'caption'.

    caption {
    font- laki : 25px;
    text- ihanay : gitna;
    background- kulay : #1C6758;
    kulay : cornsilk;
    }

    Ang elemento ng

    'Ang elemento ay ginagamit upang magdagdag ng caption sa talahanayan.
  • “ ' ay ginagamit upang tukuyin ang header ng talahanayan, na karaniwang naglalaman ng mga heading.
  • “
    • ” tukuyin ang nilalaman ng heading.
  • “
    • ay naka-istilo tulad ng sumusunod:

    • “ laki ng font Ang ” property ay ginagamit para sa setting ng laki ng font.
    • “ text-align Tinutukoy ng ” property ang pagkakahanay ng text ng elemento.
    • “ kulay ” ang property ay tumutukoy sa kulay ng font ng elemento.

    Narito ang output ng ibinigay na code sa itaas:

    Hakbang 4: Magdagdag ng Border sa Table
    Ang ' hangganan 'Ang ari-arian ay ginagamit upang magdagdag ng hangganan sa paligid ng elemento. Ito ay isang shorthand property na tumutukoy sa lapad ng hangganan, istilo ng hangganan, at kulay ng hangganan.

    Ilapat natin ang hangganan, kasama ang padding, at margin sa talahanayan:

    talahanayan, ika, td {
    hangganan : 2px solid #1C6758;
    padding: 1px 6px;
    margin: auto;
    }

    dito:

    • “ hangganan ” inaayos ng property ang hangganan sa paligid ng talahanayan, sa pamamagitan ng pagtukoy sa lapad ng hangganan, istilo ng hangganan, at kulay ng hangganan.
    • “ padding ” ay tumutukoy sa espasyo sa paligid ng nilalaman ng elemento, kung saan ang unang halaga ay tumutukoy sa espasyo sa itaas na ibaba at ang pangalawang halaga ay nagdaragdag ng espasyo sa kanang-kaliwang bahagi ng nilalaman.
    • “ margin ' ari-arian na may halaga ' sasakyan ” nagdaragdag ng pantay na espasyo sa paligid ng elemento.

    Output

    Tandaan : Kung hindi namin gusto ang mga puwang sa pagitan ng mga hangganan ng talahanayan, gamitin ang pag-aari ng border-collapse.

    Hakbang 5: I-collapse ang Border Spacing Mula sa Talahanayan
    Ang mga puwang sa pagitan ng mga hangganan ng talahanayan ay maaaring alisin sa pamamagitan ng paggamit ng ' border-collapse ” property na may value na “collapse”:

    border-collapse: pagbagsak;

    Hakbang 6: Ayusin ang Sukat ng Table
    Tingnan natin kung paano ayusin ang laki ng talahanayan:

    thead ika {
    lapad : 160px;
    }

    Ang idinagdag na ' lapad Ang ” property na may

    na elemento ay awtomatikong magsasaayos ng laki ng talahanayan ayon dito::

    Maaari rin kaming maglapat ng mga istilo sa partikular na cell ng talahanayan. Pag-usapan natin sila!

    Hakbang 7: Mga Cell ng Talahanayan na Partikular sa Estilo
    Upang i-istilo ang partikular na cell ng talahanayan, tukuyin ang pangalan ng klase ng partikular na cell na iyon. Halimbawa, ang code sa ibaba ay kumakatawan na ang ikatlong cell ng pangalawang hilera ay itinalaga ng isang pangalan ng klase ' highlight ”:

    < td klase = 'highlight' > 99 < / td >

    Ngayon, i-access ang cell gamit ang pangalan ng klase sa CSS file:

    .highlight {
    background- kulay : #0f90d5;
    }

    Ang ' .highlight ” ay tumutukoy sa class highlight ng

    		element. Ang elementong ito ay inilapat sa ' kulay ng background ” property upang tukuyin ang kulay sa background.

    Tulad ng nakikita natin, matagumpay na naka-istilo ang tinukoy na cell ng talahanayan:

    Hakbang 8: Itakda ang Pamilya ng Font at Sukat ng Talahanayan

    mesa {
    font-family: cursive;
    font- laki : 18px;
    text- ihanay : gitna;
    }

    Ang mga sumusunod na katangian ng CSS ay inilapat sa elemento ng talahanayan:

    • “ font-family Itinatakda ng property ng ” ang font style ng elemento.
    • “ laki ng font Ang ” property ay ginagamit para sa setting ng font ng elemento.
    • “ text-align Ang ” property ay ginagamit para sa pagsasaayos ng pagkakahanay ng teksto.

    Narito ang output:

    Hakbang 9: Kulay ng mga row sa Sequence
    Pinapayagan din na maglapat ng mga istilo sa mga partikular na row o column. Halimbawa, ang mga pantay na hilera ay naka-istilo sa pamamagitan ng pagsunod sa ibabang format:

    \
    tbody tr:nth-child ( kahit ) {
    background- kulay : #FFB200;
    }

    dito:

    • Ang ' :nth-child(even) ” Ang pseudo selector ay ginagamit upang kumuha ng isang argumento na tumutukoy sa pattern kung saan ilalapat ang estilo.
    • “ kulay ng background Ang ” property ay ginagamit upang itakda ang kulay ng background ng elemento.

    Mapapansing matagumpay na nailapat ang kulay ng background sa pantay na mga hilera:

    Iyon ay tungkol sa pag-istilo ng mga talahanayan gamit ang CSS

    Konklusyon

    Ang mga talahanayan ay isang mahalagang tool upang mapanatiling maayos ang data. Ang talahanayan ay maaaring gawin sa pamamagitan ng paggamit ng HTML

    , , at higit pang mga elemento. Maraming CSS property ang ginagamit para i-istilo ang talahanayan, gaya ng border, background-color property, font-family property, at marami pa. Para sa mas mahusay na pag-unawa, ipinaliwanag ng write-up na ito ang isang hakbang-hakbang na pamamaraan sa pag-istilo ng talahanayan gamit ang CSS.

    Iba pa

    Kategorya

    Patok Na Mga Post

    Mga Solusyon sa Mga Problema ng Kabanata 4 ng Buong Online Computer Science Database at Internet Career Course mula sa Simula

    Paano Gumawa ng Mga Arrow ng Slowness sa Minecraft

    Paano i-install ang Go sa Ubuntu 24.04

    Paano I-clear ang Arduino Memory

    Paano Maghanap ng File sa Raspberry Pi

    Paano Gumawa ng Mga Prompt na Template sa LangChain?

    Palakihin ang Laki ng Font sa Emacs sa Linux

    Mag-login Bilang Root sa Ubuntu

    Paano Mag-cut ng String Pagkatapos ng isang Tukoy na Character sa JavaScript

    Paano Magdagdag ng Double Border na may Iba't ibang Kulay?

    Paano Mag-apply ng Mga Pipeline sa isang Dataset sa Transformers?

    Alisin ang '3D Print with 3D Builder' Pag-right click sa Pagpipilian sa Menu sa Windows 10 - Winhelponline

    Paano Panatilihing Ligtas ang Iyong Laptop sa Naka-check na Luggage?

    Pandas Lambda

    Paano I-edit ang Hosts File sa Linux Mint 21

    Paano Gamitin ang \n sa isang String ng JavaScript

    Vector Erase() Function sa C++

    Paano Gamitin ang Buffer ng Buod ng Pag-uusap sa LangChain?

    Redis Sentinel

    Paano Gamitin ang StringTokenizer sa Java

    ,