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 -
- CSS: n edut
- CSS: n käyttö
- Johdanto CSS: ään
- CSS-tekstin muotoilu