Johdanto CSS-taulukon muotoilusta

Siksi, että käytämme CSS: ää, vaikka voimme käyttää HTML-taulukoita, johtuu siitä, että HTML-taulukossa taulukkoon perustuva sivun asettelu näyttää usein hitaammin kuin vastaava CSS: ään perustuva asettelu; tämä pätee erityisesti sivuihin, joilla on paljon sisältöä. Taulukoita ei tule käyttää asettelun apuvälineinä. Ja jos rakennamme HTML-taulukoita ilman selaimessa tyylejä tai määritteitä, se näytetään ilman reunoja. Pöydän muotoilu CSS: llä voi parantaa sen ulkonäköä.

CSS-taulukot ovat melko yksinkertaisia ​​ymmärtää ja käyttää. On vain syytä muistaa vastaavat CSS-näyttöominaisuuksien arvot HTML-taulukon peruselementeille. CSS: n avulla pystymme valmistamaan tyylikkäitä pöytiä.

Mikä on CSS-taulukon muotoilu?

CSS (Cascading Style Sheets) -taulukko kuvaa kuinka asettaa joukon elementtejä riveihin ja sarakkeisiin. HTML-taulukkoon sovellettava oletus CSS on CSS-taulukko.

  • CSS on suunnitellut ja suunnitellut joustavuuden uudelleen.
  • Se tarkoittaa, että CSS-pohjainen asettelu varmistaa, että sijoitat kaikki tyylit (ts. Pienistä muutoksista tärkeimpiin sääntöihin) yhteen sijaintiin.
  • Muuttamalla tyylisivulle asettamasi asetussäännöt vaikuttavat jokaiseen sivulle, joka siihen viittaa.
  • CSS-pohjainen sivun asettelu näkyy yleensä nopeammin näytössä ja jopa lataus on nopeampaa kuin taulukkoon perustuva asettelu.

CSS-taulukkotyylin ominaisuudet

Alla on CSS-taulukkotyylien eri ominaisuudet:

1. Rajan romahtaminen

Sitä käytetään osoittamaan, onko taulukon solujen ympärillä olevat reunat erotettava vai pienennettävä.

Syntaksi: border-collapse: separate|collapse|initial|inherit;

  • Rajan romahtaminen: erillinen: Sitä käytetään siten, että viereisillä soluilla on omat ja itsenäiset reunat, joita ei jaeta.

Syntaksi

border-collapse: separate;

Oletusarvo, joka on asetettu reunan romahtamisominaisuudelle, on erillinen. Kun ne on erotettu, selaimet laittavat parin pikselin tilan kunkin solun väliin käyttämällä raja-etäisyysominaisuutta.

Koodi

lähtö:

  • Reunuksen romahtaminen: romahtaminen: Kun asetamme reunan romahtamisen ominaisuuden romahtamaan, se poistaa solujen välisen tilan.

Syntaksi

border-collapse: collapse;

Koodi

Tulos:

Vaikka poistaisit tämän tilan asettamalla HTML-tunnisteen solujen sijoitusmääritteen arvoon 0, selaimet näyttävät silti kaksinkertaiset reunat. Toisin sanoen yhden solun alareuna ilmestyy alla olevan solun ylärajan yläpuolelle, mikä aiheuttaa reunusten kaksinkertaistumisen. Raja-romahdusominaisuuden asettaminen romahtamaan eliminoi sekä solujen välisen tilan että tämän rajojen kaksinkertaistumisen.

  • Reunuksen romahtaminen: alkuperäinen: Sitä käytetään rajaamaan romahdusominaisuus oletusarvoon.
  • Reunuksen romahtaminen: peri: Sitä käytetään, kun reunan romahtaminen -ominaisuus perii sen vanhemmista elementeistä. Tämä ominaisuus toimii vain, kun sitä käytetään tag.

    Arvot: romahta, erillinen, alkuperäinen, peri;

    2. Rajaväli

    Se asettaa tilan reunusten viereen ja taulukon ympäröivän sisällön. Se on samanlainen kuin tunnisteen solualue

    määrite, paitsi että sillä on valinnainen toinen arvo. Tämä ominaisuus toimii vain, kun sitä käytetään
    tag.

    Syntaksi

    border-spacing: Length|initial|inherit;

    Rajaväli vie yleensä yhden tai kaksi pituusarvoa. Tässä määritetään vain yksi arvo, niin se määrittelee sekä vaaka- että pystysuuntaisen etäisyyden solujen välillä.

    Koodi

    lähtö:

    Jos tässä määritetään kaksi arvoa, ensimmäinen arvo määrittelee solujen välisen vaakavälin (välilyönti kummankin solun kummallakin puolella) ja toinen arvo määrittelee solujen välisen pystysuunnan. (tila, joka erottaa yhden solun pohjan sen alla olevan solun yläreunasta).

    3. Kuvateksti

    Kuvatekstin puoleinen ominaisuus määrittelee taulukon kuvatekstin sijainnin. Kun tämä ominaisuus lisätään taulukon kuvatekstiin, tämä ominaisuus määrittää, näkyykö kuvateksti taulukon ylä- tai alareunassa. Kuvateksti näkyy yleensä taulukon yläosassa.

    Syntaksi

    caption-side: top|bottom|initial|inherit;

    Tällä ominaisuudella voi olla yksi neljästä arvosta:

    • Kuvateksti: ylhäällä: Se on oletusarvo. Tässä asetetaan otsikko taulukon yläpuolelle.

    Syntaksi: caption-side:top;

    Koodi

    lähtö:

    • Kuvateksti: alaosa: laittaa kuvatekstin taulukon alle.

    Syntaksi: caption-side:bottom;

    Koodi

    lähtö:

    • Kuvateksti: alkuperäinen: Sitä käytetään ominaisuuden asettamiseen oletusarvoon.
    • Kuvateksti-puolella: periä: Perii tämän ominaisuuden emoelementistä.

    Arvot: ylhäällä, alhaalla, alussa, perivät;

    4. Tyhjät solut

    Se kertoo selaimelle, pitäisikö sen näyttää taulukko, joka on täysin tyhjä. Se hallitsee niiden solujen reunojen ja taustan renderointia, joilla ei ole näkyvää sisältöä taulukossa, joka käyttää erotettujen reunojen mallia.

    Syntaksi: empty-cells: show|hide|initial|inherit;

    Tällä ominaisuudella voi olla yksi neljästä arvosta:

    • Tyhjä solu: näytä: Tätä ominaisuutta käytetään tyhjän solun reunojen näyttämiseen.

    Syntaksi: empty-cells: show;

    Koodi

    lähtö:

    • Tyhjä solu: piilota: Tätä ominaisuutta käytetään piilottamaan tyhjän solun reunat.

    Syntaksi: empty-cells: hide;

    Koodi

    lähtö:

    • Tyhjä solu: alkuperäinen : Sitä käytetään ominaisuuden asettamiseen oletusarvoon.
    • Tyhjä solu: periä: Perii tämän ominaisuuden emoelementistä.

    Arvot: näytä, piilota, alusta, peri;

    5. Taulukon asettelu

    Ohjaa, kuinka selain piirtää taulukon, ja se voi vaikuttaa hieman selaimen näyttämisnopeuteen. Tällä ominaisuudella voi olla yksi neljästä arvosta.

    Syntaksi: table-layout: auto|fixed|initial|inherit;

    Oletusominaisuus on auto.

    1. Taulukon asettelu: automaattinen: Automaattinen asettaa elementtien leveyden säätämään automaattisesti sisällön mukaan.

    2. Taulukko - asettelu: kiinteä : Kiinteä asetus pakottaa selaimen esittämään kaikki sarakkeet samalla leveydellä kuin ensimmäisen rivin sarakkeet. Jos sisältö ylittää ensimmäisen rivin, sisältö kääritään, leikataan tai laajennetaan solujen ulkopuolelle.

    Koodi

    lähtö:

    3. Taulukon asettelu: alkuperäinen: Sitä käytetään ominaisuuden asettamiseen oletusarvoon.

    4. Taulukon asettelu: peri: Perii tämän ominaisuuden sen vanhemmasta elementistä.

    johtopäätös

    CSS: n avulla voimme tehdä tyylikkäitä pöytiä ja parantaa pöydän ulkonäköä.

    Suositellut artikkelit

    Tämä on opas CSS-taulukon muotoiluun. Tässä keskustellaan ominaisuuksista koodeilla, ulostuloilla ja CSS-taulukon muotoilun syntaksilla. Voit myös käydä läpi annettujen artikkeleidemme saadaksesi lisätietoja -

    1. CSS: n edut
    2. CSS: n käyttö
    3. Johdanto CSS: ään
    4. CSS-tekstin muotoilu

    Luokka:

    Web-kehitystyökalut