Mikä on taulukko-sarakeryhmän ja taulukkoriviryhmän käyttö CSS:ssä

Mika On Taulukko Sarakeryhman Ja Taulukkoriviryhman Kaytto Css Ssa



Ryhmittely taulukoissa antaa käyttäjälle mahdollisuuden yhdistää kaksi tai useampia soluja yhteen yksittäisen arvon tai tekstinpätkän näyttämiseksi, joka vastaa useita aikaisempia merkintöjä. Solujen ryhmittely antaa selkeän näkymän taulukosta ja tekee koko esityksestä tiiviin ja lukijan ulottuvilla. Tekninen termi solujen ryhmittelylle CSS-taulukossa on 'span'. Se on sellainen, että jos yksi tietty rivi tai sarake kattaa arvon, joka on suurempi kuin '1', sen katsotaan olevan taulukkoryhmä.

Mikä on taulukko-sarakeryhmä?

Taulukko-sarakeryhmä, kuten nimestä voi päätellä, on joukko soluja useista sarakkeista. Kaikki tietyn sarakkeen arvot liittyvät toisiinsa. Taulukko-sarake isännöi elementtiä, joka käsittää useita sarakkeita. Käytämme ' ” -tunniste ryhmitellä sarakkeet yhteen taulukkoon CSS:ssä. Sitten span-arvo määritetään huomioimaan, kuinka monta saraketta ryhmässä on.

Esimerkki
Yrityksen työntekijöiden henkilötietoja käsittelevässä taulukossa, jossa 'Nimi', 'Ikä' ja 'Pituus' on kirjattu, jokainen sininen sarake vastaa tiettyä työntekijää, joka näkyy seuraavassa esimerkissä:







< pöytä >
< kollegaryhmä >
< kol tyyli = 'taustaväri: pinkki' >
< kol jänneväli = '3' tyyli = 'taustaväri: vaaleansininen' >
< / kollegaryhmä >
< tr >
< td > Nimi < / td >
< td > Michael < / td >
< td > James < / td >
< td > David < / td >
< / tr >
< tr >
< td > Ikä < / td >
< td > 37 < / td >
< td > 43 < / td >
< td > 29 < / td >
< / tr >
< tr >
< td > Korkeus < / td >
< td > 173 cm < / td >
< td > 184 cm < / td >
< td > 188 cm < / td >
< / tr >
< / pöytä >

Noudata alla annettuja vaiheita yllä olevan koodin mukaisesti:



  • Aloita luomalla taulukko ja lisäämällä tag.
  • Käytä jänneväli hyödyllisyysluokka ja määritä yhteen ryhmitettävien sarakkeiden lukumäärä.
  • Sulje nyt ryhmäryhmä käyttämällä tag.
  • Syötä myös ilmoitetut tiedot taulukon riveille käyttämällä ja tunnisteet.
  • Sulje pöytä -painikkeen kautta tag.

Lähtö



HTML-taulukon solujen 'jänneväli' ilmaisee, kuinka monta saraketta yksi solu voi peittää. Se tarjoaa saman käytön kuin 'yhdistä' solut -toiminto Microsoft Excelissä.





Mikä on taulukkoriviryhmä?

Taulukkoriviryhmä on useiden rivien yhdistäminen yhdeksi ryhmäksi. Yksittäinen elementti sisältää useita rivejä. Se tehdään ' ' -tunniste.

Esimerkki
Seuraava taulukko, joka esittää työntekijöiden myynnit kuukauden aikana, voidaan näyttää ryhmittelemällä kuukauden nimen sisältävä rivi useiden työntekijöiden nimiin. Sitten heidän myyntinsä voidaan näyttää heidän nimiensä mukaisesti. Olemme havainnollistaneet samaa alla olevassa koodissa:



< pöytä luokkaa = 'märkä-jousi-seepra' >
< kollegaryhmä >
< kol >
< kol >
< / kollegaryhmä >




< tbody >
< tr >
< th colspan = '9' > KUUKAUSITIEDOT ( $ ) < / th >
< / tr >
< tr >
< th riviväli = '4' > toukokuuta 2023 < / th >
< th >James< / th >
< td > 1434 < / td >
< / tr >
< tr >
< th >Michael< / th >
< td > 1700 < / td >
< / tr >
< tr >
< th >John< / th >
< td > 1299 < / td >
< / tr >
< / tbody >
< tbody >
< tr >
< th riviväli = '4' > kesäkuuta 2023 < / th >
< th >James< / th >
< td > 1256 < / td >
< / tr >
< tr >
< th >Michael< / th >
< td > 1975 < / td >
< / tr >
< tr >
< th >John< / th >
< td > 1883 < / td >
< / tr >
< / tbody >
< / pöytä >

Yllä mainitussa koodissa:

  • Määritä taulukko ja lisää tag.
  • Määritä sarakkeiden ryhmittely käyttämällä colspan hyötyluokka.
  • Samoin määritä rivien ryhmittely käyttämällä riviväli hyötyluokka.
  • Syötä nyt kaikkien henkilöiden myyntitiedot kahdelta kuukaudelta.
  • Sulje lopuksi taulukko painikkeella tag.

Lähtö

Johtopäätös

Taulukon yksittäiset solut voidaan ryhmitellä, jos yksi arvo vastaa useita muita merkintöjä. Olemme myös havainneet, että taulukko voidaan ryhmitellä joko sarakkeiden tai rivien mukaan. Molemmilla on omat toiminnallisuutensa ja niitä voidaan käyttää missä tahansa.