CSS: taulukon suunnitteluun. esimerkkejä rekisteröinti

Taulukot tehdään CSS - oppituntisuunnitelmien mielenkiintoisia ja vastuullinen. Lähestymistapa tämän liiketoiminnan täytyy asiantuntevasti, jolla on kaikki mahdolliset tyylit. Lisäksi on tarpeen hallussaan kauneuden taju, jotta ei pelotella pois luovuuttaan vierailijoille.

Taulukoissa voi muuttaa lähes kaiken. Kaunis muotoilu liittyy käytön CSS taulukoiden suunnittelun rajoja, pöytä tausta, cell tausta, kuilu niiden välillä ja lisää. Harkitse yleisin.

table border

CSS taulukkotyyli muotoilu liittyy aina pelin rajan (frame). Kaikki oletus taulukot eivät ole ääriviivat runko. Eli se on yhtä kuin 0 pikseliä. Mutta tämä voidaan korjata kiinteistön rajalla.

Voit määrittää ulomman kehyksen koko taulukossa:

taulukko {border: 3px kiinteä musta; }

Tämän ansiosta linjan kaikki taulukot päällä, joka käyttää tätä tyyliä on musta runko. Huomaa, että rajan vain reunoilla, mutta ei sisällä pöydän. Solulinjoille ja runko toisin mainita.

th, td {border: 3px kiinteä musta;}

Paksuus ja väri, voit yksilöidä. Muista, että rajat eivät kaksinkertaistui liittävä soluja.

Sana tarkoittaa kiinteää jatkuva rekisteröinti. Voit määrittää muita arvoja.

se on yleisimmin käytetty tukeva runko, koska se näyttää houkuttelevampi eikä häiritse huomiota päässä sivuston sisältöä.

rajalla omaisuus voidaan määritellä myös laudalla. Rajaa voidaan säätää vain ylhäältä, alhaalta, vasemmalta tai oikealta puolelta. Koska joissakin tapauksissa se ei ole toteuttamiskelpoinen vaihtoehto kehyksen koko taulukossa kerralla.

table {border-top: 1px kiinteä punainen; }

Joten voit asettaa kehyksen yläreunassa pöydän ainoa. Samoin muille osapuolille, eikä vain ylhäältä kirjoittaa: oikealle, vasemmalle tai alhaalta.

taulukko header

Taulukon otsikko voidaan määrittää käyttämällä tag . Tämä tunniste voi olla CSS rekisteröidä paljon ominaisuuksia hienosäätöä. CSS taulukon suunnitteluun on hyvä, koska se on mahdollista liikuttaa elementtejä haluamallasi tavalla.

Tämä otsikko näytetään samalla tavalla kuin tavallinen kirjoja (kuten "taulukossa 1").

Voit määrittää sijainnin otsikko ja omaisuuden kuvatekstin puolella (ylhäältä tai alhaalta). Kohdistamalla vasemmalle tai oikealle määritellään kiinteistön text-align.

tausta taulukot

Tausta taulukon voi olla mikä tahansa värin tai kuvion. Väri asettaa kiinteistön taustavärin. Nimet ominaisuuksia täysin yhdenmukaisia käyttötapoja puheen. Se helpottaa varastointia monta kertaa.

Väri voidaan määrittää nimi ja eri koodauksia. Lisäksi voit määrittää seuraavat:

• Läpinäkyvä - läpinäkyvä.
• Periä - väri on sama kuin emoelementin.
• Initial - oletus.

Vaihtoehto läpinäkyvyyttä voidaan käyttää niissä tapauksissa, joissa kaikki taulukot tekstin CSS-tiedosto on tehty yhdellä värillä, mutta tässä tapauksessa ei ole tarvetta.

Lisäksi taustalla voi olla kuva. Voit tehdä tämän, tyyliin määrätty background-image omaisuutta. Polku on näin:

url ( 'URL')

Polku tiedostoon voi olla joko suhteellinen tai absoluuttinen.

Monimutkaisemmat täyttö voidaan tehdä kaltevuus:

• lineaarinen-gradientti ();
• radial-gradientilla ();
• toistamalla-lineaarinen-gradientti () ja toistamalla-radiaalinen-gradientilla () - gradientti toistetaan.

tausta cell

Lisäksi taustalla yleensä, voit määrittää raidallinen tausta sarakkeisiin tai riveihin. Rekisteröintiä omaisuus käytetään hyvin usein, koska visuaalinen erottaminen linjojen helpompi lukea tietoja.

Lisäksi vuorottelu, ja voit määrittää, kuinka monta tietyn sarakkeen tai rivin. Esimerkiksi näin:

• tr: nnen-lapsi (jopa) {...} - määrittää lomitettu;
• tr: nnen-lapsi (1) {...} - osoitus ominaisuuksien tietyllä rivillä;
• td: nnen-lapsi (jopa) {...} - tieto vuorotellen sarakkeita;
• td: nnen-lapsi (1) {...} - osoituksen ominaisuuksia tietyn sarakkeen.

Lisäksi sekvenssin ja numerot voidaan määrittää - ensimmäinen (td: ensimmäinen-lapsi) tai viime (td: viime-lapsi).

Kuilu solujen

CSS, pöytä muotoilu voit poistaa välit solut. Oletusarvoisesti ne ovat. Jos esimerkiksi asetat kehyksen taulukossa asettamatta välinen etäisyys rajojen, se on täällä tähän tulokseen.

Samaa mieltä, se näyttää ole kovin mukavaa, ja se ei ole kätevää lukea. Käyttäjillä on aaltoilu silmissä, koska tästä. Poistaa nämä puutteet voidaan kirjoittamalla juuri tällainen rivi taulukossa tyyliin:

border-collapse: collapse

Mutta se myös tapahtuu, että etäisyys, päinvastoin, pitäisi lisätä. Lisäksi rakojen koon voidaan määrittää sarakkeiden välillä ja rivien välissä. Joka osoittaa, että arvo (eikä romahtaa):

border-collapse: separate

Mutta tällainen toiminta osoittaa, että se on välttämätöntä erottaa soluja. Koska oli osansa, osoitti lisätilaa:

border-etäisyys: 20px.

Jos haluat määrittää eri etäisyydellä rivien välissä ja sarakkeita, se osoittaa kaksi asiaa:

border-etäisyys: 10px20px.

Ero selaimissa

Muista, että CSS suunnitteluun taulukoiden saattaa näyttää erilaiselta riippuen selaimen. Erityisen huono pätee vanhempien versioiden, että innovaatiot CSS ei tueta.

Edellä on esimerkki kehyksen paksuus digitaalisiksi arvoiksi.

Tässä esimerkissä paksuus kehyksiä vakiot.

reunatyylejä myös vaihtelevat suuresti.

Siksi kehitys aina nähdä tuloksen eri selaimissa.

CSS suunnittelu taulukoissa suositeltavaa tarkistaa selaimella. Erityisen suuri ongelma käytetään olla käyttäjille vanhempien versioiden Internet Explorer.

Hyvin pitkälle kehittäjät voivat, riippuen selaimen yhdistää täysin eri CSS-tiedostoja. Ja joku tekee tarkistaa kunkin tai jonkin tietyn tyylin (luokka).

Ongelmia syntyy varjoista.

CSS: Taulukkomuoto Esimerkit

Rekisteröinti voidaan melko kirjavaa. Kaikki riippuu koko sivuston ja sen suunnitteluun. Kaikki olisi yhdistettävä ja kirjava värejä. Lisäksi se tekee suuri rooli ja maku kehittäjä. Kauneuden taju on kaikki erilaisia.

Annamme muutamia esimerkkejä eri taulukoista. Yllä olevassa kuvassa käyttöä kallistus ja pelata taustaväri ja raja.

Monet ovat kiinnostava esimerkki kauniin siisti muotoilu, joka ei leikkaa silmää käyttäjille. Tämä suoritusmuoto on sopiva lähes kaikissa tilanteissa.

Reunat voidaan tehdä pyöristetty. Se näyttää melko hyvältä.

johtopäätös

Kuten näette, että ulkonäkö taulukoissa CSS on monia työkaluja. Kukin parametri on myös valtava määrä arvo vaihtoehtoja. Jos käytät sitä kaikkea kerralla, voit luoda mestariteoksia. Varsinkin jos et mukautuva suunnittelu kaikille selaimille.

Tärkeintä suunnittelussa - älä liioittele tehosteilla. Kaiken pitäisi tehtävä maltillisesti. Aluksi ulkoasun haluavat kokeilla ja käyttää kaikkia tietojaan heti. Seurauksena taulukon ovat oversaturated ominaisuuksia. Yritä välttää virheet.

Lisäksi jotkut parametrit voivat häiritä toisiaan. Esimerkiksi, ei ole tarpeen määritellä taustaväri taulukossa, kun taas jos on vielä asetettu taustakuvan, joka päällekkäin tietyn värin.