Taulukko on yksi tärkeimmistä työkaluista verkkosivujen luomiseen.
Ilman käyttämällä CSS:ää, voit luoda monimutkaisia sivuja vain taulukoiden avulla. Jos olet suorittanut oppituntisarjan Verkkosivuston tekeminen - ensimmäiset askeleet, ymmärrät, mistä puhumme.
Mikä tahansa taulukko on joukko rivejä ja sarakkeita, joiden leikkauskohdassa on soluja. Esimerkiksi:
Katsotaanpa taulukkoamme HTML-näkökulmasta:
itse taulukko määritellään tunnisteilla
,
taulukossa on nimilaput
,
taulukko koostuu riveistä - tunnisteista
,
jokainen rivi koostuu sarakkeista - tunnisteista
,
sarakkeiden nimet sijaitsevat ensimmäisellä rivillä - tagit
.
Luodaan taulukko, jossa ilmoitamme sisällöksi rivi- ja sarakenumeroiden leikkauspisteen:
Tulos:
Kuten näette, siitä ei tullut kovin kauniisti, me koristelemme sen.
leveys- asettaa taulukon leveyden (pikseleinä tai % näytön leveydestä),
bgcolor- määrittää taulukon solujen taustavärin,
tausta- täyttää pöydän taustan kuviolla,
rajaa- asettaa määritellyn leveyden (pikseleinä) koko taulukon ympärille,
solupehmuste- asettaa marginaalin pikseleinä solun reunan ja sen sisällön välillä.
Käytetään näitä parametreja:
Tulos:
Tämä on parempi, mutta taulukkomme on painettu ikkunan vasempaan reunaan, kuten siinä oleva teksti. Korjataan tämä lisäämällä kolme muuta parametria:
kohdistaa- asettaa taulukon kohdistuksen: vasen (oikea), oikea (vasen), keski (keskellä),
soluvälit- määrittää taulukon solujen välisen etäisyyden (pikseleinä),
solupehmuste- määrittää tekstin ja taulukon solun sisäreunan välisen etäisyyden (pikseleinä).
Käytetään näitä parametreja:
Tulos:
Huomaa, että taulukossa on kaksoisreunat. Jos määrittelet soluväli = "0", niin rajat ovat tavallisessa muodossa:
Tulos:
Yleensä kaksi parametria on vastuussa rajoista:
kehys- määrittää pöydän ympärillä olevan kehyksen tyypin ja voi ottaa seuraavat arvot:
mitätön- ei kehystä,
edellä- vain yläkehys,
alla- vain alakehys,
hsides- vain ylä- ja alakehys,
vsides- vain vasen ja oikea kehys,
lhs- vain vasen kehys,
rhs- vain oikea kehys,
laatikko- rungon kaikki neljä osaa.
säännöt- määrittää sisäisten taulukkorajojen tyypin ja voi ottaa seuraavat arvot:
ei yhtään- solujen välillä ei ole rajoja,
ryhmiä- rajat vain riviryhmien ja sarakeryhmien välillä (käsitellään hieman myöhemmin),
rivit- rajat vain rivien välillä,
sarakkeet- rajat ovat vain sarakkeiden välissä,
kaikki- näyttää kaikki reunat.
Näiden parametrien avulla voit asettaa rajat haluamallasi tavalla. Tässä annamme vain yhden esimerkin, kokeile niitä kaikkia itse.
Tulos:
On huomattava, että rajat sisään eri selaimet näytetään hieman eri tavalla.
HTML-tunnisteet tr ja td
Taulukot muodostetaan rivi riviltä. Siksi rivillä (tr) määritellyt parametrit laajentavat vaikutuksensa rivin kaikkiin soluihin (td). Merkkijonoilla voi olla kolme parametria:
kohdistaa- Tasaa tekstin soluissa vaakasuunnassa, voi ottaa arvoja: vasen (oikea), oikea (vasen), keskellä (keskellä),
väärä- Tasaa tekstin soluissa pystysuunnassa, voi ottaa arvoja: ylös (ylhäällä), alas (alhaalla), keskellä (keskellä),
bgcolor- määrittää viivan värin.
Katsotaanpa esimerkkiä:
leveys- asettaa sarakkeen leveyden (pikseleinä tai prosentteina, jolloin taulukon leveydeksi otetaan 100%),
korkeus- määrittää solun korkeuden, ja kaikista saman rivin soluista tulee tämä korkeus.
Lisätään esimerkiksi koodiamme tunnisteisiin
nämä parametrit
1
2
3
Tulos:
On huomioitava, että jos et aseta leveyttä ja korkeutta, taulukko muodostetaan sisällön mukaan (tämä oli tilanne edellisissä esimerkeissä).
Tämä oppitunti on ohi, harjoittele taulukoiden luomista ja suunnittelua, tarvitset näitä taitoja seuraavalla oppitunnilla, jossa luomme monimutkaisten rakenteiden taulukoita.
Taulukkotiedot- tiedot, jotka voidaan näyttää taulukossa ja jakaa loogisesti sarakkeisiin ja riveihin. HTML-tunnistetta käytetään taulukkotietojen näyttämiseen verkkosivuilla
, joka on säiliö, jossa on taulukon sisältö. HTML-taulukon sisältö kuvataan rivi riviltä, jokainen rivi alkaa avaustagilla
ja päättyy sulkevaan tagiin
.
Tagin sisällä
tunnisteiden edustamat taulukon solut sijaitsevat
tai
. Solut sisältävät kaiken verkkosivulla näkyvän taulukon sisällön.
Pöydän runko
Oletusarvoisesti Web-sivun HTML-taulukko näytetään ilman reunaa, jotta taulukkoon ja kaikkiin muihin elementteihin voidaan lisätä reunus CSS-ominaisuus rajaa. Mutta kannattaa kiinnittää huomiota siihen, että jos lisäät kehyksen vain elementtiin
, niin se näkyy koko pöydän ympärillä. Jotta taulukon soluissa olisi myös reunus, elementeille on määritettävä border-ominaisuus
Nyt sekä taulukolla että soluilla on reunat, ja jokaisella solulla ja taulukolla on omat reunansa. Tämän seurauksena kehysten väliin ilmestyi tyhjää tilaa. Tämän tilan kokoa voidaan hallita koko taulukolle määritetyllä border-spacing -ominaisuudella. Toisin sanoen et voi ohjata eri solujen välistä etäisyyttä yksitellen.
Vaikka poistaisit solujen väliset välilyönnit käyttämällä reunavälin ominaisuuden arvoa 0, solujen reunat koskettavat toisiaan, mikä kaksinkertaistaa koon. Voit yhdistää solun reunat käyttämällä border-collapse -ominaisuutta. Sillä voi olla kaksi merkitystä:
erillinen: on oletusarvo. Solut näytetään lyhyt matka toisistaan, jokaisella solulla on oma reunansa.
tiivistää: yhdistää viereiset kehykset yhdeksi, kaikki solujen väliset välilyönnit sekä solujen ja taulukkokehyksen välit ohitetaan.
Asiakirjan otsikko
Nimi
Sukunimi
Homer
Simpson
Marge
Simpson
Nimi
Sukunimi
Homer
Simpson
Marge
Simpson
Kokeile »
Pöydän koko
Reunusten lisäämisen jälkeen taulukon soluihin havaittiin, että solujen sisältö oli liian lähellä reunoja. Lisää vapaata tilaa Voit käyttää täyttöominaisuutta solujen reunojen ja niiden sisällön välillä:
Th, td ( täyte: 7px; ) Kokeile »
Pöydän koko riippuu sen sisällöstä, mutta usein tulee tilanteita, kun pöytä on liian kapea ja sitä on tarpeen venyttää. Taulukon leveyttä ja korkeutta voidaan muuttaa leveys- ja korkeusominaisuuksien avulla määrittämällä vaaditut koot tai itse taulukko tai solut:
Oletuksena taulukon otsikkosolujen teksti tasataan keskelle, kun taas tavallisten solujen teksti tasataan vasemmalle käyttämällä tekstin tasausominaisuutta. Voit hallita tekstin vaakasuuntaista tasausta.
Pystytasaus CSS-ominaisuuden avulla voit hallita tekstisisällön pystysuuntaista tasausta. Oletuksena teksti on tasattu pystysuoraan solujen keskelle. Pystysuuntainen tasaus voidaan ohittaa jollakin pystysuoran tasauksen ominaisuuden arvoista:
alkuun: teksti tasataan solun yläreunaan
keskellä: tasaa tekstin keskelle (oletus)
alareuna: teksti tasataan solun alareunaan
Asiakirjan otsikko
Nimi
Sukunimi
Homer
Simpson
Marge
Simpson
Kokeile »
Taulukon rivien taustavärin vaihtaminen
Kun tarkastellaan suuria taulukoita, jotka sisältävät useita rivejä ja paljon tietoa, voi olla vaikeaa seurata, mitä tietoja tietylle riville kuuluu. Voit käyttää kahta eri taustaväriä vuorotellen auttaaksesi käyttäjiä löytämään tiensä. Kuvatun tehosteen luomiseksi voit käyttää luokkavalitsinta lisäämällä sen taulukon joka toiselle riville:
Asiakirjan otsikko
Nimi
Sukunimi
asema
Homer
Simpson
isä
Marge
Simpson
äiti
Bart
Simpson
poika
Lisa
Simpson
tytär
Kokeile »
Luokka-attribuutin lisääminen joka toiselle riville on melko työlästä. Pseudo-class:nth-child lisättiin CSS3:een vaihtoehtoisen ratkaisun tarjoamiseksi tähän ongelmaan. Nyt lomitustehoste voidaan saavuttaa pelkästään CSS:n avulla ilman, että dokumentin HTML-merkintöjä muutetaan. Pseudo-class:nth-child avulla voit valita taulukon kaikki parilliset tai parittomat rivit yhdellä seuraavista avainsanoista: parillinen (parillinen) tai pariton (pariton):
Toinen tapa parantaa taulukkotietojen luettavuutta on muuttaa rivin taustaväriä, kun siirrät hiiren sen päälle. Tämä auttaa korostamaan taulukon haluttua sisältöä ja lisäämään tietojen visuaalista käsitystä.
Tällaisen tehosteen toteuttaminen on erittäin yksinkertaista, lisää pseudoluokka:hover taulukon rivivalitsimeen ja aseta haluamasi taustaväri:
Tr:hover ( taustaväri: #E0E0FF; ) Kokeile »
Pöydän kohdistaminen keskelle
HTML-taulukon keskittäminen on mahdollista vain, jos taulukon leveys on pienempi kuin sen pääelementin leveys. Tasataksesi taulukon keskelle sinun on käytettävä marginaaliominaisuutta ja annettava sille vähintään kaksi arvoa: ensimmäinen arvo on vastuussa marginaali taulukot ylä- ja alapuolella ja toinen automaattista keskikohdistusta varten:
Jos tarvitset erilaisia marginaaleja taulukon ylä- ja alareunaan, voit asettaa marginaaliominaisuuden kolmeen arvoon: ensimmäinen vastaa ylämarginaalista, toinen vaakasuorasta tasauksesta ja kolmas alamarginaalista:
Taulukko ( marginaali: 10px auto 30px;)
pöydän runko sijaitsee. Runko koostuu riveistä ja sarakkeista. Taulukko täytetään rivi riviltä.
Jokainen tagi
luo uuden rivin. Edelleen sisäkkäisissä
sarakkeita luodaan. Voit luoda useita sarakkeita. Tässä tapauksessa sinun on seurattava kunkin rivin sarakkeiden määrää. Jos esimerkiksi ensimmäisellä rivillä oli 5 saraketta, myös seuraavilla riveillä tulisi olla 5 saraketta. Muuten pöytä kelluu. On mahdollista yhdistää soluja.
Kuinka tehdä taulukko html-muodossa
Tässä on esimerkki, html-koodi:
Esimerkkitaulukko
Sarake 1
Sarake 2
Kiinnitä huomiota soluun
. Käytämme erityistä colspan-attribuuttia solujen kattamiseen vaakasuunnassa. Sen numeerinen arvo ilmaisee yhdistettävien sarakkeiden määrän. Tälle määritteelle on myös analogi: tag
(taulukon otsikko), johon sinun on myös syötettävä colspan. Tulos on sama. Mutta usein he käyttävät tavallista td:tä.
Tarkastellaan nyt lähemmin kaikkia tunnisteen attribuutteja
.
Tunnisteen attribuutit ja ominaisuudet
Tagin avaamiseen
Voit määrittää erilaisia attribuutteja.
1. Property align="parameter" - määrittää taulukon tasauksen. Voi ottaa seuraavat arvot:
Yllä olevassa esimerkissä linjasimme taulukon keskelle align="center" .
Tätä määritettä voidaan soveltaa taulukon lisäksi myös yksittäisiin taulukon soluihin
tai viivoja
. Siten kohdistus on erilainen eri soluissa.
Esimerkiksi
...
...
...
2. Property background="URL" - määrittää taustakuvan. URL-osoitteen sijaan tulee kirjoittaa taustakuvan osoite.
Esimerkki
Esimerkkitaulukko
Sarake 1
Sarake 2
Muuntaa sivulla seuraavaksi:
Tarkastetussa esimerkissä meidän taustakuva sijaitsee img-kansiossa (joka on samassa hakemistossa kuin html-sivu), ja kuvan nimi on fon.gif . Huomaa, että lisäsimme tagiin style="color:white;" . Koska tausta on lähes musta, teimme tekstistä valkoisen, jotta teksti ei sulautuisi taustaan.
3. Ominaisuus bgcolor="color" - määrittää taulukon taustavärin. Voit valita minkä tahansa värin koko paletista (katso koodit ja html-värien nimet)
4. Property border="number" - määrittää taulukon reunuksen paksuuden. Aiemmissa esimerkeissä määritimme border="1" , mikä tarkoittaa, että reunan paksuus on 1 pikseli.
5. Property bordercolor="color" - määrittää reunuksen värin. Jos border="0", reunaa ei ole eikä reunavärillä ole merkitystä.
6. Property cellpadding="number" - sisennys kehyksestä solun sisältöön pikseleinä.
7. Property cellspacing="number" - solujen välinen etäisyys pikseleinä.
8. Property cols="number" - sarakkeiden määrä. Jos et aseta sitä, selain määrittää itse sarakkeiden määrän. Ainoa ero on, että tämän parametrin määrittäminen todennäköisesti nopeuttaa taulukon lataamista.
9. Property frame="parameter" - kuinka reunukset näytetään taulukon ympärillä. Voi ottaa seuraavat arvot:
tyhjä - älä piirrä rajoja
reunus - reunus pöydän ympärillä
yläpuolella - reuna taulukon yläreunaa pitkin
alla - reuna taulukon alaosassa
hsides - lisää vain vaakasuuntaiset reunat (taulukon ylä- ja alareunat)
vside - piirrä vain pystyreunat (taulukon vasemmalle ja oikealle puolelle)
10. Property height="number" - määrittää taulukon korkeuden: joko pikseleinä tai prosentteina.
11. Property rules="parameter" - missä solujen väliset rajat näytetään. Voi ottaa seuraavat arvot:
kaikki - jokaisen taulukon solun ympärille piirretään viiva
ryhmät - tunnisteiden muodostamien ryhmien välissä näkyy viiva , , ,
tai
sarakkeet - rivi näkyy sarakkeiden välissä
ei mitään - kaikki reunat on piilotettu
rivit - tunnisteen avulla luotujen taulukon rivien väliin piirretään raja
12. Property width="number" - määrittää taulukon leveyden: joko pikseleinä tai prosentteina.
13. Property class="class_name" - voit määrittää luokan nimen, johon taulukko kuuluu.
14. Property style="styles" - tyylit voidaan asettaa erikseen jokaiselle pöydälle.
Nyt on aika sukeltaa taulukon sisään ja katsoa taulukon solujen attribuutteja. Nämä attribuutit tulee kirjoittaa avaustunnisteeseen
.
Attribuutit ja ominaisuudet
Ja
1. Ominaisuus align="parameter" - määrittää yksittäisen taulukon solun tasauksen. Voi ottaa seuraavat arvot:
vasen - vasen kohdistus
keski - keskilinjaus
oikea - oikea kohdistus
2. Property background="URL" - määrittää solun taustakuvan. URL-osoitteen sijaan tulee kirjoittaa taustakuvan osoite.
3. Ominaisuus bgcolor="color" - määrittää solun taustavärin.
4. Property bordercolor="color" - määrittää solun reunan värin.
5. Ominaisuus char="letter" - määrittää kirjaimen, josta tasaus tehdään. align-attribuutin arvoksi on asetettava char.
6. Ominaisuus colspan="numero" - määrittää yhdistettävien vaakasuuntaisten solujen lukumäärän.
7. Property height="number" - määrittää taulukon korkeuden: joko pikseleinä tai prosentteina.
8. Property width="number" - määrittää taulukon leveyden: joko pikseleinä tai prosentteina.
9. Property rowspan="number" - määrittää yhdistettävien pystysuorien solujen määrän.
10. Property valign="parameter" - solun sisällön pystysuuntainen kohdistus.
alkuun - kohdista solun sisältö rivin yläreunaan
keski - keskitasaus
pohja - kohdistus alareunaan
perusviiva - kohdistus perusviivaan
Huomautus 1
Tagille
Saatavilla ovat samat vaihtoehdot kuin
. Parametrit yhdelle tunnisteelle
sovelletaan hierarkkisesti kaikkiin
hänen sisällään
Kuinka estää taulukon solujen reunoja tarttumasta yhteen
Jos käytät reunusta (solun reunaa) ja nollatäyttöä solujen välillä, ne liimataan silti yhteen ja saat kaksoisreunuksen. Tämän välttämiseksi sinun on määritettävä border-collapse: collapse taulukkotyyleissä:
...
Hyvä lukija, nyt olet oppinut paljon enemmän html-tunniste taulukko. Nyt neuvon sinua siirtymään seuraavaan oppituntiin.
HTML-taulukon reunoja voidaan helposti muuttaa CSS-työkaluilla. Niiden näyttö on määritetty käyttämällä ominaisuuksia: tiivistys ja väli.
Voit muokata taulukkonäkymää käyttämällä rajausominaisuusryhmää. Sen avulla voit mukauttaa leveyttä, väriä, reunusten läsnäoloa/poissaoloa, niiden tyyliä ja muita näytön ominaisuuksia.
Perusasiat
Taulukko ilman tyyliä näkyy jäsenneltynä tekstinä ilman reunuksia. Html-taulukko on rakennettu käyttämällä tageja:
tr jousille;
th otsikoille;
td sarakkeille.
Pää
Pää
Pää
Cell
Cell
Cell
Cell
Cell
Cell
Tekstin koko ja fontti, tausta, sisennykset selainikkunan reunasta määritetään css:ssä body-säiliössä.
Tietylle puolelle se asetetaan käyttämällä mallin border-top(/oikea/alha/vasen)-tyyli(/väri/leveys/säde).
(reunuksen yläväri: tummansininen;)
Täyte määrittää solun sisällä olevan täytön tekstistä kehykseen, tekstin tasaus määrittää tasauksen.
Pöydän ulkoasun suunnittelussa käytetään tyylejä. Reunusominaisuuden avulla voit määrittää reunuksen paksuuden, tyylin ja värin. Padding määrittää sisennyksen tekstistä, tekstin tasaus asettaa tasauksen.
Reunusta ei tarvitse käyttää tai määrittää erikseen border-color, -width ja -style, koska voit tehdä HTML-taulukon ilman reunuksia täydellä suunnittelulla. Esimerkiksi seuraava koodi asettaa taustan, pehmusteen ja pyöristetyt kulmat (jälkimmäinen matriisi ilman sisä- tai ulkoviivoja).
Voit poistaa html-taulukon reunat jättäen sisäiset reunat. Voit tehdä tämän esimerkiksi määrittämällä solujen raja-ominaisuuden (tr), asettamalla yhteiset kehykset vierekkäisille sivuille (kutista) ja kieltämällä viivojen piirtämisen matriisin ympärille (piilotettu). Viimeinen toiminto piilottaa solurivit, jotka, kun tiivistys on käytössä, näkyvät samassa paikassa kuin taulukon ulkoreunat.
Yksi html:n tärkeimmistä taulukon ominaisuuksista, border-collapse, määrittää, kuinka solujen reunat näytetään. Omaisuudella voi olla yksi kolmesta arvosta: tiivistää, erottaa, perii.
taulukko (reunuksen tiivistäminen: tiivistys; )
Oletusasetus on erillinen, joten jokaisella solulla on oma reunansa. Tiivistämisen ansiosta voit yhdistää solurivit niin, että niiden sisältö erotetaan yhdellä kehyksellä. Kuvassa kolme edellä kuvattua rajatilaa: ilman tyylejä; reunuksen tiivistäminen oletusasetukseksi; arvolla border-collapse, jolloin solujen väliin jää yhteinen viiva.
Kaksoiskehykset
Tiivistysominaisuuden avulla voit tehdä html-taulukon solujen reunoista toisistaan riippumattomia ja yhteisiä. Sen kanssa käytetään usein border-spacing ominaisuutta, joka säätelee solukehysten välistä etäisyyttä. Voit määrittää sekä vaaka- että pystyvälit.
Taulukko (reunusväli: 0,5vw 1vw;)
Ensimmäinen arvo osoittaa solujen välisen etäisyyden vaakasuunnassa, toinen - pystysuunnassa. Jos itse taulukolle on määritetty kehys, niin etäisyys siitä soluihin muodostuu myös väliominaisuudesta, mutta siihen voi vaikuttaa myös matriisin täyttö. Tapauksissa, joissa matriisilla on tausta, solujen välinen vapaa tila täytetään sillä.
Jos taulukossa ei ole yhdistettyjä solujen reunoja, tyhjät solut -ominaisuus sallii solurivien ja taustan näyttämisen, jotka katsotaan tyhjiksi (merkitty näkyväksi tai niissä ei ole merkkejä). Jos haluat näyttää kunkin solun reunat ja taustan, aseta ominaisuus näytettäväksi.
taulukko ( tyhjät solut: näytä; )
Piilota-arvo piilottaa tyhjien lohkojen reunat ja taustat. Jos kaikki rivin solut ovat tyhjiä, rivillä on nolla korkeus ja vain yksi pystyviiva.
Rajojen osoittamiseksi elementtiryhmille (solut, sarakkeet, rivit, riviryhmät tai sarakkeet) on attribuutti säännöt. Sen arvo kirjoitetaan suoraan taulukkotunnisteen html:ään.
Sen avulla voit piirtää valikoivasti elementtien kehyksiä. Riittää, kun määrität attribuutin html:ssä, tämä luo sisäisiä viivoja solujen väliin. Html-taulukon reunus on määritettävä manuaalisesti css:ssä.
Joten ensimmäinen kuva näyttää attribuutin puhtaan toiminnan ilman lisäkehyssuunnittelua taulukon kautta. Toisessa kuvassa on piirretty yläviiva, joka asennettiin ohjeiden mukaan.
Pöytä (reunus: 1vw pilkuttu #486743; )
Attribuutilla voi olla useita arvoja. Kaikki luo reunukset solujen välille, joiden reunuksen paksuus on 1px. Cols luo viivoja sarakkeiden väliin, rivit - rivien väliin, mikään ei poista reunoja. Kuvassa on esimerkkejä taulukosta, jossa on arvot kaikki ja rivit.
Voit muuttaa solun reunusten väriä ja kehyksen leveyttä, kun käytät sääntöjä-attribuuttia käyttämällä reuna- ja reunaväriä.
Tyyliristiriidat
Soluille, riveille, sarakkeille ja elementtiryhmille voidaan antaa omat reuna-arvonsa. Ne voivat kuitenkin erota kolmesta parametrista: tyyli, paksuus ja väri.
Tiivistystilassa syntyy tyyliristiriitoja. Koska yksi reunus voi olla kahden eri solun säännön alainen, syntyy ongelma valita tyyli, joka on etusijalla. Kuten E. Malchuk kirjoittaa, "tarttuvin" (paitsi piilotettu) voittaa.
Jos yhden elementin kiistanalaisen reunuksen reunustyylinen ominaisuus on piilotettu, kyseinen tyyli voittaa. Piilotetulla on korkein prioriteetti.
Pienin paino ei ole mikään. Se myös määrää, että riviä ei saa näyttää, mutta jotta käsky voidaan suorittaa, kaikilla kyseisen rivin elementeillä on oltava tämä (ei mitään) -sääntö.
Ohuiden ja paksujen reunojen välissä paksut ovat etusijalla.
Samoilla kehyksillä, mutta eri tyyleillä, tuplakiinteä (double) voittaa aina, jota seuraa kiinteä, katkoviiva (katkoviiva), katkoviiva.
Jos ainoat erot ovat värit, niin pienimmän komponentin ulkonäkö on aina korkeampi (solujen koristelulla on korkeampi prioriteetti kuin riveillä ja rivillä korkeampi kuin taulukoilla).
Konfliktin kuva
Tyylien ristiriitaa on helppo havainnollistaa jo käsitellyn taulukon avulla. Riittää, kun lisäät pari luokkaa soluihin ja määrität niiden suunnittelun. Html saa muotoa:
Reunuksen suunnittelu voidaan asettaa solun kummallekin puolelle erikseen. Tätä varten riittää, että määrität reunatyyliin ei yhtä arvoa, vaan luettelet neljä solun sivuja vastaavasti.
Voit määrittää tiedot yhdelle riville määrittämällä yhdestä neljään eri arvoa. Jokaisesta tulee perinteisesti ohje jollekin osapuolelle.
Jos asetat kaksi arvoa, ensimmäinen on vastuussa ala- ja yläreunasta, toinen - vasemmasta ja oikeasta.
Näistä kolmesta ensimmäinen vastaa ylärivistä, toinen vasemmasta ja oikeasta ja kolmas alimmasta rivistä.
Neljä arvoa määrittelevät yksilöllisesti jokaisen rivin, alkaen ylhäältä myötäpäivään vasemmalle.
Voit myös määrittää solurajojen suunnittelun yksinkertaisesti määrittämällä tiedot kullekin puolelle yllä olevan kuvan mukaisesti.
Kehystyylejä on yhteensä kymmenen. Ne kaikki muuttavat riviä tai poistavat sen:
ei mitään - ei reunaa;
piilotettu - tiukempi ei mitään, estää piirteen esiintymisen (konfliktitilanteessa);
pilkullinen - tehty pisteistä;
katkoviiva - katkoviiva;
kiinteä - kiinteä;
double - kaksinkertainen kiinteä;
ura - kehys näyttää olevan painettu pintaan;
harjanne - kupera viiva;
upotettu - itse asiassa elementin toisella puolella se käyttäytyy harjanteena, jos sitä sovelletaan koko elementtiin, ylä- ja vasen puoli on varjostettu ja ala- ja oikea puoli korostetaan;
alussa - käyttäytyy uran tapaan, kun se asetetaan elementin toiselle puolelle, se peittää ala- ja oikeanpuoleisen osan, mikä tekee ylä- ja vasemmasta yläosasta vaaleampia.
Jokaista tyyleistä käytetään jokaiseen soluun (ylä- ja vasemmalle puolelle). Jotta he eivät kilpaile keskenään, "heikoimmille" annetaan korkeimmat arvot.
Matriisissa esitetyn tiedon luonne vaatii usein taulukon reunojen, solukehysten, rivien tai sarakkeiden muokkaamista. Tätä varten voit käyttää:
nollausrivit (reunuksen leveydelle määritä arvo 0px);
piilotettu.
Piilotuksen etu on sen prioriteetti. Jos kahden elementin sääntö pätee samaan aikaan reunukseen ja yhdellä niistä on rajatyyliin piilotettu arvo, riviä ei näytetä. Eli voit helposti luoda koko taulukon ja poistaa sitten valikoivasti tarpeettomat kehykset.
Käyttämällä piilotettuja soluja tekee mahdottomaksi palauttaa reunuksen muilla menetelmillä (paitsi raskas!tärkeä). Siksi, jos sinun on poistettava joitakin solujen sivuja, on parempi olla käyttämättä mitään.
Oletetaan, että siellä on pöytä. Tavoitteena on poistaa pystyreunukset ensimmäisen rivin sisältä. Se on merkitty erillisellä tunnisteella (otsikko), joten lisäluokkaa ei tarvitse kirjoittaa. Jos käytät piilotettua koko tunnisteeseen ja määrität border-left, niin sisäreunusten ohella yksi osa taulukon sivukehyksestä poistetaan, mitä ehto ei vaatinut. Jos käytät ei mitään ja matriisiviivaa, sisäisillä riveillä on kaksi sääntöä, jotka eivät ole ristiriidassa keskenään, ja ulkoreunalle mikään ei ole ristiriidassa sille taulukossa annetun säännön kanssa ja sivu pysyy paikallaan. .
Yksittäisten solulinjojen poistaminen tehdään vastaaville elementeille määritettyjen luokkien avulla, kuten näytettiin tyylin, leveyden ja värin yksilölliselle asetukselle.
Sen sijaan sivureunuksen poistaminen html-taulukosta on helpompaa viittaamalla matriisin ulompiin kehyksiin, jotka on ilmoitettu taulukossa. Riittää, kun osoittaa tietyn rivin css:ssä.
Taulukko (reunus-vasen-tyyli: piilotettu; )
Reunusten poistaminen riveistä on helppo toteuttaa border-ominaisuuden avulla, jonka arvo on piilotettu tr:iin. Ne eivät vain katoa vaakasuuntaisia viivoja pöytiä, mutta myös sivupöytiä. Matriisi rappeutuu pystysuoraksi sarakkeeksi.
Tr (reunuksen tyyli: piilotettu; )
Viimeisenä keinona käänny!tärkeään. Jos lisäät sen ohjeen jälkeen, se saa ylimääräisen prioriteetin.
HTML-taulukon reunat ovat joustavia ja helppoja muokata. Reunusominaisuusryhmän avulla voit piilottaa elementtejä, muuttaa väriä, leveyttä tai tyyliä. Taulukoiden haittana on, että taulukkoon sovellettavien sääntöjen yhdistelmän tulos ei aina ole selvästi ennustettavissa. yksittäinen elementti. Tämän vuoksi on suositeltavaa joko vähentää mahdollisten reunusten tyylien määrää tai käyttää niitä valikoivasti.
Taulukot itse näyttävät melko huonoilta ja selaimet näyttävät omalla tavallaan joitain taulukkoominaisuuksia, erityisesti kehyksiä. Samalla nämä puutteet voidaan helposti korjata käyttämällä tyylien voimaa. Samalla taulukkojen suunnittelun keinoja laajennetaan huomattavasti, jolloin voit sovittaa taulukot onnistuneesti sivuston suunnitteluun ja esittää taulukkotietoja selkeämmin.
Solun taustaväri
Taulukon kaikkien solujen taustaväri samanaikaisesti asetetaan taustaominaisuuden kautta, jota käytetään TABLE-valitsimessa. Tässä tapauksessa sinun tulee muistaa tyylien käytön säännöt, erityisesti elementin ominaisuuksien periytyminen. Vaikka taustaominaisuus ei ole peritty, solujen taustan oletusarvo on läpinäkyvä, ts. läpinäkyvyyttä, joten taustatäyttövaikutus saadaan myös soluille. Jos asetat TD- tai TH-valitsimelle värin samanaikaisesti TABLE:n kanssa, tämä väri asetetaan solun taustaksi (esimerkki 2.3).
Esimerkki 2.3. Taustaväri
Taulukot
Otsikko 1
Otsikko 2
Solu 3
Solu 4
Tässä esimerkissä saamme soluille sinisen taustavärin (tag
) ja punainen otsikossa (tunniste
). Tämä johtuu siitä, että TH-valitsimen tyyliä ei ole määritelty, joten ylätason tausta "näytetään läpi", tässä tapauksessa, TABLE valitsin.
Ja TD-valitsimen väri on määritetty eksplisiittisesti, joten solut "täytetään" sinisellä.
Tämän esimerkin tulos on esitetty kuvassa. 2.4.
Riisi. 2.4. Taustan värin muuttaminen
Marginaalit solujen sisällä
Marginaali on solun sisällön reunan ja sen reunan välinen etäisyys. Tyypillisesti tagin cellpadding-attribuuttia käytetään tähän tarkoitukseen.
. Se määrittää marginaaliarvon pikseleinä solun kaikilla puolilla. Täytetyylin ominaisuutta on mahdollista käyttää lisäämällä se TD-valitsimeen esimerkin 2.4 mukaisesti.
Esimerkki 2.4. Kentät taulukoissa
Taulukot
Otsikko 1
Otsikko 2
Solu 3
Solu 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Tässä esimerkissä ryhmittelemällä valitsimet kentät asetetaan samanaikaisesti TD- ja TH-valitsimille. Esimerkin tulos näkyy kuvassa. 2.5.
Riisi. 2.5. Kentät soluissa
Jos täyttötyyli-ominaisuutta käytetään taulukon soluissa, tunnisteen cellpadding-attribuutin vaikutus
huomiotta.
Solujen välinen etäisyys
Voit muuttaa solujen välistä etäisyyttä käyttämällä tunnisteen soluvälimääritettä
. Tämän määritteen vaikutus näkyy selvästi, kun käytät reunuksia solujen ympärillä tai kun täytät soluja värillä, joka erottuu sivun taustasta. Tyyliominaisuus border-spacing korvaa soluvälin. Se määrittää solujen reunojen välisen etäisyyden. Yksi arvo määrittää sekä pysty- että vaakaetäisyyden solujen reunojen välillä. Jos tällä ominaisuudella on kaksi arvoa, ensimmäinen määrittää vaakaetäisyyden (eli solun vasemmalla ja oikealla puolella), ja toinen määrittää pystyetäisyyden (ylä- ja alapuolella).
Selain Internet Explorer versiot versioon 7 asti eivät tue border-spacing-ominaisuutta, joten tässä selaimessa taulukoissa käytetään oletusarvoista soluvälin arvoa (yleensä 2px).
Kun TABLE-valitsimeen lisätään border-collapse-ominaisuus, jonka arvo on tiivistys, soluvälimäärite jätetään huomioimatta ja reunavälin arvo nollataan.
Reunukset ja kehykset
Oletusarvoisesti taulukossa ei ole aluksi reunusta, ja sen lisääminen tapahtuu tagin border-attribuutin avulla
. Selaimet näyttävät tällaisen reunuksen eri tavalla, joten on parempi olla määrittämättä tätä attribuuttia ollenkaan ja jättää rajojen piirtäminen tyyleihin. Tarkastellaan kahta menetelmää, jotka liittyvät suoraan tyyleihin.
Soluvälimääritteen käyttäminen
Tiedetään, että tunnisteen cellpacing-attribuutti
määrittää taulukon solujen välisen etäisyyden. Jos käytät eri taustavärejä taulukolle ja soluille, solujen väliin tulee viivojen ruudukko, jonka väri vastaa taulukon väriä ja paksuus on yhtä suuri kuin soluvälimääritteen arvo pikseleinä. Yllä oleva esimerkki 2.3 näyttää tämän vaikutuksen, joten en toista sitä.
Huomaa, että tämä ei ole kovin kätevä tapa luoda rajoja, koska sillä on rajoitettu laajuus. Näin saat vain yksivärisen ruudukon, et pysty- tai vaakasuuntaisia viivoja oikeisiin paikkoihin.
Rajaomaisuuden käyttö
Reunuksen tyyli -ominaisuus määrittää samanaikaisesti reunuksen värin, tyylin ja paksuuden elementin ympärille. Kun haluat luoda erillisiä rivejä eri puolille, on parempi käyttää johdannaisia - border-left , border-right , border-top ja border-bottom , nämä ominaisuudet määrittävät vastaavasti vasemman, oikean, ylä- ja alareunan. .
Soveltamalla border-ominaisuutta TABLE-valitsimeen lisäämme reunuksen taulukon ympärille kokonaisuutena ja TD- tai TH-valitsimeen lisäämme reunuksen solujen ympärille (esimerkki 2.6).
Esimerkki 2.6. Kaksoiskehyksen lisääminen
Esimerkki 2.4. Kentät taulukoissa
Taulukot
Otsikko 1
Otsikko 2
Solu 3
Solu 4
Tässä esimerkissä käytetään mustaa kaksoisreunaa taulukon ympärillä ja yhtenäistä valkoista reunaa jokaisen solun ympärillä. Esimerkin tulos näkyy kuvassa. 2.7.
Riisi. 2.7. Reuna taulukon ja solujen ympärillä
Huomaa, että solujen liitoskohtaan muodostuu kaksoisviivoja. Ne saadaan jälleen tunnisteen cellpacing-attribuutin vaikutuksesta
. Vaikka tämä attribuutti ei näy missään esimerkkikoodissa, selain käyttää sitä oletuksena. Jos asetat
, niin emme saa kaksinkertaisia, vaan yksittäisiä viivoja, mutta kaksinkertaisen paksuisia. Voit muuttaa tätä ominaisuutta käyttämällä border-collapse -tyyliominaisuutta arvolla collapse , joka lisätään TABLE-valitsimeen (esimerkki 2.7).
Esimerkki 2.7. Yhden kehyksen luominen
Esimerkki 2.4. Kentät taulukoissa
Taulukot
Otsikko 1
Otsikko 2
Solu 3
Solu 4
Tämä esimerkki luo kiinteän vihreän viivan solujen väliin ja mustan viivan taulukon ympärille. Kaikki taulukon reunat ovat saman paksuisia. Esimerkin tulos näkyy kuvassa. 2.8.
Riisi. 2.8. Reuna pöydän ympärillä
Solun sisällön kohdistaminen
Oletuksena taulukon solun teksti tasataan vasemmalle. Poikkeus tähän sääntöön on tagi
, se määrittää keskitetyn otsikon. Voit muuttaa tasausmenetelmää käyttämällä text-align style -ominaisuutta (esimerkki 2.8).
Esimerkki 2.8. Kohdista solun sisältö vaakasuoraan
Esimerkki 2.4. Kentät taulukoissa
Taulukot
Otsikko 1
Solu 1
Solu 2
Otsikko 2
Solu 3
Solu 4
Tässä esimerkissä tunnisteen sisältö
on tasattu vasemmalle ja tunnisteen sisältöön
-keskellä. Esimerkin tulos on esitetty alla (Kuva 2.9).
Riisi. 2.9. Tekstin tasaaminen soluissa
Solun pystytasaus on aina keskitetty, ellei toisin mainita. Tämä ei ole aina kätevää, etenkään taulukoissa, joiden solujen sisältö vaihtelee korkeudeltaan. Tässä tapauksessa kohdistus asetetaan solun yläreunaan käyttämällä pystysuuntaista tasausominaisuutta, kuten esimerkissä 2.9 on esitetty.
Esimerkki 2.9. Kohdista solun sisältö pystysuoraan
Esimerkki 2.4. Kentät taulukoissa
Taulukot
Otsikko 1
Otsikko 2
Solu 1
Solu 2
Tämä esimerkki määrittää otsikon korkeuden
kuten 40 pikseliä ja teksti tasataan alareunaan. Esimerkin tulos näkyy kuvassa. 2.10.
Riisi. 2.10. Tekstin tasaaminen soluissa
Tyhjät solut
Selaimet näyttävät solun, jossa ei ole mitään, eri tavalla. "Ei mitään" tarkoittaa tässä tapauksessa, että solun sisään ei ole lisätty kuvaa eikä tekstiä, eikä tilaa oteta huomioon. Luonnollisesti solujen ulkonäkö eroaa vain, jos niiden ympärille on asetettu raja. Käytettäessä näkymätöntä reunaa solujen ulkonäkö on sama riippumatta siitä, onko niissä jotain vai ei.
Vanhemmat selaimet eivät näyttäneet tyhjien näkymäsolujen taustaväriä
, joten kun oli tarpeen jättää solu ilman sisältöä mutta näyttää taustaväri, solun sisään lisättiin erottamaton välilyönti (). Tila ei aina sovi, varsinkin kun solun korkeudeksi on asetettava 1-2 pikseliä, minkä vuoksi yhden pikselin läpinäkyvä muotoilu on yleistynyt. Todellakin, tällainen kuva voidaan skaalata harkintasi mukaan, mutta sitä ei näytetä verkkosivulla millään tavalla.
Onneksi yksipikselisten piirustusten ja kaikenlaisten niihin perustuvien välikappaleiden aikakausi on ohi. Selaimet toimivat melko oikein taulukoiden kanssa myös ilman solujen sisältöä.
Voit hallita tyhjien solujen ulkonäköä käyttämällä tyhjät solut -ominaisuutta, kun se on piilotettu, reunus ja tausta eivät näy tyhjissä soluissa. Jos kaikki rivin solut ovat tyhjiä, koko rivi on piilotettu. Solu katsotaan tyhjäksi seuraavissa tapauksissa:
symboleja ei ole ollenkaan;
solu sisältää vain rivinvaihdon, sarkaimen tai välilyönnin;
näkyvyys on piilotettu.
Katkeamattoman välilyönnin lisääminen koetaan näkyväksi sisällöksi, ts. solu ei ole enää tyhjä (esimerkki 2.10).
Esimerkki 2.10. Tyhjät solut
Esimerkki 2.4. Kentät taulukoissa
Tyhjien solujen käyttö
Leonardo
5
8
Rafael
11
Michelangelo
24
Donatello
13
Taulukkonäkymä sisään Safari selain esitetty kuvassa. 2.11a. Sama taulukko IE7-selaimessa näkyy kuvassa. 2.11b.
A. Safarissa, Firefoxissa, Operassa, IE8:ssa, IE9:ssä
b. IE7 selaimessa
Riisi. 2.11. Näkymä taulukosta, jossa on tyhjiä soluja
On huomattava, että rajat sisään eri selaimet näytetään hieman eri tavalla.
