Tablica prikazuje udaljenost između ćelija.

Dakle, s vama smo proučili najjednostavnije radnje koje se mogu izvesti s granicama tablice. A sada stol izgleda mnogo estetski ugodnije. Međutim, punjenje ćelija izravno počiva na granicama. To možete lako popraviti samo uvlačenjem ćelija u HTML tablici. Tada će tekst unutar okvira, u ćeliji, biti čitljiviji.

Da biste napravili uvlake u ćeliji, koristite atribut cellpadding za oznaku

... Međutim, postoji još jedna, poželjnija opcija: CSS.

U ovom slučaju uvlake se postavljaju pomoću svojstva padding... Uz njegovu pomoć neće biti teško uvući se gdje je potrebno, to jest gore, desno, dolje ili lijevo, koristeći jedno od ovih svojstava: padding-top, padding-right, padding-bottom i padding-left.

Možete postaviti koliko piksela treba uvući. Evo primjera gdje će biti donja margina 20 piksela, a sve ostalo će biti 10 ... Takav CSS-kod će izgledati ovako:

Td (padding: 10px; padding-bottom: 20px;)

I potpuni kod stilova u ovoj fazi:

Tabela (obrub: puna 1px plava; granica-urušavanje: urušavanje;) td (obrub: puna 1px plava; padding: 10px; padding-bottom: 20px;)

Rezultat u pretraživaču:

Udubljenje između ćelija

Tipično, zadaci povezani sa stvaranjem tablica mogu se riješiti pomoću oznaka, atributa i svojstava koja vam omogućuju stvaranje granica, uvlačenja u ćelijama, a također i postavljanje pozadine u boji samih ćelija.

Uvlake u tablicama nisu samo unutar ćelija. Mogu biti prisutni i između samih ćelija.

Postoje dva načina uvlačenja između ćelija:

  1. koristeći atribut razmak ćelija za oznaku
.
  • koristeći CSS-osobine granični razmak.

    • Mora se naglasiti da granični razmak piše se za tablicu u cjelini, dok je svojstvo padding propisuje direktno za ćelije.

    Pogledajmo primjer:

    Tabela (obrub: puna 1px plava; granica-urušavanje: zasebna; razmak ivica: 5px;) td (obrub: puna 1px plava; padding: 10px; padding-bottom: 20px;)

    I rezultirajući rezultat:

    Odmah odredimo da ne biste trebali pokušavati praviti takve uvlake granica-urušavanje: urušavanje... Zaista, kada koristite ovu opciju, ćelije se "lijepe" jedna za drugu.

    I da biste ih držali odvojene jedna od druge, trebali biste ih koristiti rušenje granice: odvojeno... Važno je shvatiti da je ova vrijednost zadana. I koristi se samo kako bi se jasno pokazalo kako se ovaj problem rješava. Ako izbrišemo ovu liniju, rezultat u obliku ćelija koji se nalaze odvojeno jedna od druge bit će spremljen.

    CSS specifikacija daje neograničene mogućnosti za dizajn stolova. Prema zadanim postavkama, tablica i ćelije tablice nemaju vidljive granice ili pozadine, a ćelije unutar tablice nisu susjedne.

    Širina ćelija tablice određena je širinom njihovog sadržaja, pa širina stupaca tablice može biti različita. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije.

    Formatiranje tabela

    1. Granica tablice

    Tablica i ćelije unutar nje zadano se prikazuju u pregledniku bez vidljivih granica. Granice tablice postavljeno graničnim vlasništvom:

    Tablica (obrub ivice: sužavanje; / * uklonite prazne prostore između ćelija * / obrub: 1px puna siva; / * postavite vanjsku granicu od 1px sivu za tablicu * /)

    Granice ćelija zaglavlja svake kolone postavljene su za th element:

    Th (obrub: 1px puna siva;)

    Granice ćelija tijela tablice postavljena su za td element:

    Td (obrub: 1px puna siva;)

    Debljina ivica susjednih ćelija se ne udvostručuje, pa granice za cijelu tablicu možete postaviti na sljedeći način:

    Th, td (obrub: 1px puna siva;)

    Vanjska ivica tablice može se odabrati dodavanjem povećane širine:

    Tabela (obrub: 3px puna siva;)

    Granice se mogu djelomično postaviti:

    / * postavite sivu vanjsku granicu od 3 piksela za tablicu * / tablicu (gornja ivica: 3 piksela puna siva;) / * postavite sivu granicu od 1 piksela za ćeliju tijela tablice * / td (ivica-granica: 1 piksela puna siva;)

    Možete pročitati više o pograničnoj imovini.

    2. Kako postaviti širinu i visinu stola

    Zadano širina i visina stola određuje se sadržajem njegovih ćelija. Ako širina nije navedena, bit će jednaka širini najšireg reda (linije).

    Širina tabele i kolone postaviti pomoću svojstva width. Ako je tablica (širina: 100%;) navedena za tablicu, tada će širina tablice biti jednaka širini bloka spremnika u kojem se nalazi.

    Širina tablice i stupaca obično se navodi u px ili%, na primjer:

    Tablica (širina: 600px;) th (širina: 20%;) td: prvo dijete (širina: 30%;)

    Visina stola nije postavljeno. Visina redova tablicama se može manipulirati dodavanjem gornjih i donjih obloga elementima

    ... U praksi postoje slučajevi kada vam je potrebno posebno oblikovanje stupaca, što je moguće na sljedeće načine:

    pomoću oznake

    Možete postaviti pozadinu za bilo koji broj stupaca;

    pomoću tabele td: first-child, table td: last-child birač, možete oblikovati prvu ili zadnju kolonu tabele (osim prve ćelije zaglavlja tabele);

    pomoću tablice td: nth-child selektor (pravilo odabira kolone) možete oblikovati sve stupce u tablici.

    Možete pročitati više o CSS biračima.

    5. Kako dodati naslov u tabelu

    Pomoću oznake možete dodati naslov tabeli

    i ... Ne preporučuje se popravljanje visine pomoću svojstva height.

    Th, td (padding: 10px 15px;)

    3. Kako postaviti pozadinu tabele

    Zadano pozadina stola a ćelije su prozirne. Ako stranica ili blok koji sadrži tablicu ima pozadinu, tada će svijetliti kroz tablicu. Ako je pozadina postavljena i za tablicu i za ćelije, tada će samo pozadina ćelija biti vidljiva na mjestima gdje se pozadina tablice i ćelija preklapaju. Pozadina tablice u cjelini i njenih ćelija može biti:
    napuniti,
    ,
    .

    4. Kolone tabele

    Model CSS tablice fokusiran je uglavnom na nizove (redove) formirane pomoću oznake

    , a pomoću svojstva caption side može se postaviti ispred ili ispod stola. Svojstvo text-align koristi se za horizontalno poravnavanje naslova. Nasleđeno.

    ...
    Tabela br. 1
    Company Q1 Q2 Q3 Q4
    titl (strana naslova: dole; poravnavanje teksta: desno; padding: 10px 0; font-size: 14px;) Pirinač. 2. Primjer prikaza zaglavlja ispod tablice

    6. Kako ukloniti jaz između okvira ćelija

    Zadane granice ćelija tablice odvojene su malim razmakom. Ako postavite tablicu-kolaps: sažmi za tablicu, jaz će se ukloniti. Nekretnina je naslijeđena.

    Sintaksa

    Tabela (urušavanje granice: urušavanje;)
    Pirinač. 3. Primjer tablica s objedinjavajućim i podijeljenim granicama ćelija

    7. Kako povećati prostor između granica ćelija

    Koristeći svojstvo razmaka ivica, možete promijeniti udaljenost između granica ćelije. Ovo svojstvo se odnosi na tablicu u cjelini. Nasleđeno.

    Sintaksa

    Tabela (obrub granica: odvojena; razmak ivica: 10px 20px;) tabela (urušavanje granica: odvojeno; razmak ivica: 10px;)
    Pirinač. 4. Primjer tablica s povećanim razmacima između okvira ćelija

    8. Kako sakriti prazne ćelije tablice

    Svojstvo empty-cells skriva ili prikazuje prazne ćelije. Utiče samo na ćelije koje ne sadrže nikakav sadržaj. Ako je za ćeliju navedena pozadina, a za tablicu navedena tablica (border-kolaps: kolaps;), ćelija neće biti skrivena. Nasleđeno.

    Company Q1 Q2 Q3
    Microsoft 20.3 30.5
    Google 50.2 40.63 45.23
    table (border: 1px solid # 69c; border-collaps: odvojeno; empty-cells: hide;) th, td (border: 2px solid # 69c;) Pirinač. 5. Primjer skrivanja prazne ćelije tablice

    9. Izgled izgleda tablice pomoću svojstva raspored tablice

    Izgled rasporeda tablice određen je jednim od dva pristupa: fiksnim ili automatskim. Raspored u ovom slučaju znači kako je širina tablice raspoređena između širine ćelija. Imovina nije naslijeđena.

    Sintaksa

    Tabela (raspored tabela: fiksno;)

    10. Najbolji raspored tabela

    1. Horizontalni minimalizam

    Horizontalne tablice su tablice u kojima se tekst čita vodoravno. Svaki entitet je zasebna linija. Ovakve tablice možete stilizirati u minimalističkom stilu postavljanjem ivice od dva piksela ispod naslova.

    EmployeePlataBonusSupervizor
    Stephen C. Cox$300$50Bob
    Josephin tan$150-Annie
    Joyce ming$200$35Andy
    James A. Pentel$175$25Annie
    tablica (porodica fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; pozadina: bijela; maksimalna širina: 70%; širina: 70%; obrub ruba: urušavanje; tekst -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: # 669; padding: 9px 8px; prijelaz: .3s linear;) tr: hover td (color: # 6699ff;)

    Zbog velikog broja redova, ovaj dizajn tablica otežava njihovo čitanje. Da biste riješili ovaj problem, možete dodati obrub od jednog piksela ispod svih td elemenata.

    Td (rub-dno: 1px solid #ccc; boja: # 669; padding: 9px 8px; prijelaz: .3s linearno;) / * ostatak koda je kao u gornjem primjeru * /

    Dodavanjem: hover efekta elementu tr lakše se čitaju tablice minimalističkog stila. Kad zadržite pokazivač miša iznad ćelije, ostale ćelije u istom retku istovremeno su istaknute, što pojednostavljuje proces praćenja informacija ako tablice imaju više stupaca.

    Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)

    2. Vertikalni minimalizam

    Iako se takve tablice rijetko koriste, okomito orijentirane tablice korisne su za kategoriziranje ili upoređivanje opisa objekata predstavljenih kolonom. Možete ih stilizirati u minimalističkom stilu dodavanjem razmaka koji razdvaja stupce.

    Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- desno: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px;)

    3. "Box" stil

    Najpouzdaniji stil za ukrašavanje stolova svih vrsta je takozvani "box" stil. Dovoljno je odabrati dobru shemu boja, a zatim postaviti boju pozadine za sve ćelije. Ne zaboravite naglasiti razliku između linija postavljanjem granica kao separatora.

    Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)

    Najteži dio je pronaći shemu boja koja će se skladno uklopiti s vašom web lokacijom. Ako je web stranica puna grafike i dizajna, bit će vam prilično teško koristiti ovaj stil.

    Tabela (porodica fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maksimalna širina: 70%; širina: 70%; poravnavanje teksta: centar; granica-urušavanje: sužavanje ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- lijevo: 1px solid # 9baff1; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px ;)

    4. Horizontalna zebra

    Zebra stol izgleda prilično atraktivno i zgodno. Komplementarna boja pozadine može poslužiti kao vizualni znak ljudima da pročitaju tablicu.

    Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( pozadina: # e8edff;)

    5. Stil novina

    Da biste postigli takozvani novinski efekt, možete primijeniti obrube na elemente tablice i igrati se s ćelijama unutar. Lagani, minimalistički novinski stil mogao bi izgledati ovako: poigrajte se shemom boja, dodajte obrube, podstavu, različite pozadine i efekt: hover pri prelasku iznad linije.

    Tabela (obrub: 1px solid # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px isprekidano # 69c; padding: 12px 17px;) td (color: # 669; padding: 7px 17px; ) tr: hover td (background: #ccddff;)

    Tabela (ivica: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px isprekidano #fff; padding: 10px; background: #ccddff;) tr: hover td (pozadina: # 99bcff;)

    Tabela (obrub: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: uppercase; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px crtica # 6cf; padding: 10px 20px;)

    6. Pozadina tabele

    Ako tražite brz i jedinstven način stiliziranja stola, odaberite atraktivnu sliku ili fotografiju vezanu uz temu stola i postavite je kao pozadinu stola.

    Png ") 98% 86% no-repeat;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- odozgo: 1px puna bijela; padding: 10px 12px; background: rgba (51, 51, 153, .2); prijelaz: .3s;) tr: hover td (background: rgba (51, 51, 153, .1); ))

    Zdravo svima! Dakle, sada znate stvoriti elementarne tablice, koje se sastoje od onoliko redova i stupaca koliko vam je potrebno. Nije loše, nije loše. Hajde sada razgovarati o dizajnu ovih tablica.

    U posljednjoj lekciji tabele su prikazane bez ivica. I, vidite, izgleda tako-tako, ne možete to ni nazvati znakom. Dodajte granice tablice u HTML -u, dodajte oznaci

    atribut granica, dajući mu vrijednost različitu od nule.

    Napravimo ivice za stol. Na primjer, za onu koju već imamo:

    Gornja lijeva ćelijaGornja desna ćelija
    Donja lijeva ćelijaDonja desna ćelija

    Rezultat u pretraživaču:

    Kako ukloniti obrube tablice

    Zauzvrat, da biste uklonili granice HTML tablice ili možete reći da ih učinite nevidljivima, potreban vam je atribut granica podešena vrednost 0 ... Nakon ovih jednostavnih radnji, okvir će biti uklonjen.

    Atribut vam omogućuje stvaranje, ali ne i upravljanje granicama. Omogućuje samo promjenu njihove debljine.

    Stoga ćemo sada govoriti o CSSčija svojstva to omogućuju sa granica stvoriti različite ivice, unutar svake ćelije i izvan nje, oko stola u cjelini.

    Pogledajmo kako primijeniti CSS za stvaranje vanjskih i unutarnjih granica tablice.
    Da biste to učinili, uklonite rubni atribut iz naše tablice i dodajte stilove:

    Tablica primjera

    Gornja lijeva ćelija Gornja desna ćelija
    Donja lijeva ćelija Donja desna ćelija

    Rezultat u pretraživaču:

    Sada dodajmo ivice za svaku ćeliju. Da biste to učinili, samo dodajte stilove:

    Rezultat u pretraživaču:

    Kako ukloniti razmak između ćelija u HTML tablici

    Slažete se da granica definirana CSS -om nema isti izgled kao što biste željeli. Bez sumnje, sa stanovišta estetike, ima posla. Na stranici preglednika možete vidjeti da prema zadanim postavkama zasebno prikazuje granice tablica i ćelija. Primjer to jasno dokazuje.

    Međutim, sasvim je moguće riješiti se takvih granica, koje se nazivaju dvostruke, ako koristimo CSS svojstvo za urušavanje granica. U praksi to izgleda ovako:

    Tabela (obrub: puna 1px plava; granica-urušavanje: urušavanje;) ...

    Kao rezultat toga, udaljenost između ćelija se uklanja:

    Vrijednost skupljanja dodijeljena graničnom atributu uklanja dvostruke granice. Kao što vidite, rezultat je kolaps susjednih granica ćelija, kao i granica ćelija i vanjske ivice tablice. Što se tiče potonjeg, može se potpuno ukloniti. A ako postoji potreba za prikazom, morate povećati njegovu širinu. Tako smo se riješili separatora u tablici. U sljedećoj lekciji ćemo govoriti o tome kako možete postaviti okomite i vodoravne granice. Sretno svima!

    Tabelarni podaci- informacije koje se mogu prikazati u obliku tablice i logički podijeliti u stupce i redove. HTML oznaka se koristi za prikaz tabelarnih podataka na web stranicama

    , koji je kontejner sa sadržajem tabele. Sadržaj HTML tablice opisuje se redak po redak, svaki redak počinje uvodnom oznakom i završava završnom oznakom .

    Unutar oznake

    ćelije tablice se nalaze, predstavljene oznakama možete primijeniti samo jedno svojstvo CSS-a, boju pozadine, ali ne možete izravno postaviti boju pozadine pri hover-u (pseudo-klasa: hover) na ovom elementu. U ovom primjeru ćemo pogledati kako označiti stupac tablice koristeći samo CSS.

    Primjer isticanja stupaca i redova tablice pri lebdenju
    ili ... Ćelije sadrže sav sadržaj tablice prikazan na web stranici.

    Okvir stola

    Prema zadanim postavkama, HTML tablica na web stranici prikazuje se bez obruba; za dodavanje obruba u tablicu, kao i svi drugi elementi, koristi se svojstvo CSS granice. Ali treba napomenuti da ako dodate rub samo elementu

    , tada će se prikazati oko cijele tablice. Da bi ćelije tablice također imale obrub, morat ćete postaviti svojstvo obruba za elemente i i njihov stil.

    Primjer isticanja stupaca tablice
    i .

    Tablica, th, td (obrub: 1px jednobojna crna;) Isprobajte "

    Sada i tablica i ćelije imaju granice, dok svaka ćelija i tablica imaju svoje granice. Kao rezultat toga, između okvira se pojavio prazan prostor; svojstvo border-spacing vam omogućuje da kontrolirate veličinu ovog prostora, koja je postavljena za cijelu tablicu. Drugim riječima, ne možete kontrolirati praznine između različitih ćelija pojedinačno.

    Čak i ako uklonimo praznine između ćelija pomoću vrijednosti 0 svojstva graničnog razmaka, tada će se granice ćelija dodirivati, udvostručujući. Svojstvo border-crash koristi se za spajanje granica ćelija. Može imati dvije vrijednosti:

    • zasebno: zadana je vrijednost. Ćelije su prikazane na kratkoj udaljenosti jedna od druge, svaka ćelija ima svoju granicu.
    • kolaps: povezuje susjedne okvire u jedan, zanemaruju se svi praznine između ćelija, kao i između ćelija i okvira tablice.
    Naziv dokumenta
    ImePrezime
    HomerSimpson
    MargeSimpson

    ImePrezime
    HomerSimpson
    MargeSimpson
    Pokušajte "

    Veličina stola

    Nakon dodavanja okvira ćelijama tablice, postalo je primjetno da je sadržaj ćelija preblizu rubovima. Svojstvo odstupanja možete koristiti za dodavanje razmaka između rubova ćelija i njihovog sadržaja:

    Th, td (padding: 7px;) Probajte "

    Veličina tablice ovisi o njenom sadržaju, ali često se javljaju situacije kada je stol preuzak i potrebno ga je rastegnuti. Širina i visina tablice mogu se promijeniti korištenjem svojstava širine i visine, postavljanjem željenih dimenzija ili prema samoj tablici ili prema ćelijama:

    Tablica (širina: 70%;) th (visina: 50px;) Isprobajte "

    Poravnanje teksta

    Prema zadanim postavkama, tekst u ćelijama zaglavlja tablice je poravnat po sredini, a tekst u normalnim ćelijama poravnat ulijevo, koristeći svojstvo poravnanja teksta možete kontrolirati vodoravno poravnavanje teksta.

    CSS svojstvo okomitog poravnanja omogućuje vam kontrolu okomitog poravnanja tekstualnog sadržaja. Prema zadanim postavkama, tekst je okomito poravnat u središte ćelija. Okomito poravnanje može se nadjačati jednom od vrijednosti za svojstvo okomito poravnanje:

    • gore: tekst je poravnat prema vrhu ćelije
    • sredina: poravnava tekst prema sredini (zadano)
    • odozdo: tekst je poravnat prema dnu ćelije
    Naziv dokumenta
    ImePrezime
    HomerSimpson
    MargeSimpson
    Pokušajte "

    Naizmjenična boja pozadine redova tablice

    Kada gledate velike tablice koje sadrže mnogo redova s ​​puno informacija, može biti teško pratiti koji podaci pripadaju određenom retku. Da biste pomogli korisnicima u navigaciji, možete naizmjenično koristiti dvije različite boje pozadine. Da biste stvorili opisani efekt, možete koristiti birač klasa dodajući ga u svaki drugi red tablice:

    Naziv dokumenta

    ImePrezimePozicija
    HomerSimpsonotac
    MargeSimpsonmajka
    BartSimpsonsin
    LisaSimpsonkćerka
    Pokušajte "

    Dodavanje atributa klase u svaki drugi redak je dosadan zadatak. Pseudo-klasa: nth-child dodana je u CSS3 za rješavanje ovog problema na alternativan način. Sada se učinak isprepletanja može postići isključivo pomoću CSS -a, bez pribjegavanja promjeni HTML oznaka dokumenta. Pomoću pseudo-klase: nth-child možete odabrati sve parne ili neparne redove u tablici koristeći jednu od ključnih riječi parno (parno) ili neparno (neparno):

    Tr: nth-child (neparno) (boja pozadine: # EAF2D3;) Isprobajte "

    Promijenite pozadinu linije pri prelasku kursorom

    Drugi način da poboljšate čitljivost tabelarnih podataka je promjena boje pozadine retka kada zadržite pokazivač miša iznad njega. To će pomoći u isticanju željenog sadržaja tablice i poboljšati vizualnu percepciju podataka.

    Implementacija ovog efekta je vrlo jednostavna, za to morate dodati: hover pseudo-klasu u birač redova tablice i postaviti željenu boju pozadine:

    Tr: hover (background-color: # E0E0FF;) Isprobajte "

    Poravnanje stola po sredini

    Poravnavanje HTML tabele sa središtem moguće je samo ako je širina tabele manja od širine njenog roditeljskog elementa. Da biste poravnali tablicu u sredini, morate koristiti svojstvo margine, postavivši joj najmanje dvije vrijednosti: prva vrijednost bit će odgovorna za vanjsku marginu tablice na vrhu i dnu, a druga - za automatsko poravnavanje središta :

    Tablica (margina: 10px auto;) Isprobajte "

    Ako su vam potrebne različite margine pri vrhu i dnu tablice, možete postaviti svojstvo margine na tri vrijednosti: prva će biti odgovorna za gornju marginu, druga za vodoravno poravnanje, a treća za donju marginu:

    Tabela (margina: 10px auto 30px;)

    Razmotrili smo mnoge metode stiliziranja elemenata na stranici, poput tekstualnih podataka, veza, slika, naslova, ali sve to još nije dovoljno. U svojim člancima često koristim HTML elemente poput tablica, jer u većini slučajeva jesu pomoći organizirati važne informacije i olakšati njihovo predstavljanje.

    U ovom članku upoznat ću vas sa zamršenim stilovima oblikovanja HTML tablica i naučit ćete nova CSS svojstva dizajnirana za postizanje ovih ciljeva.

    HTML jezik za označavanje hiperteksta pružio nam je veliki broj mogućnosti za povezivanje CSS stilova s ​​deset jedinstvenih oznaka dizajniranih za rad s tablicama, predlažem da ih ponovite prije daljnjeg proučavanja:

    ("Podnožje" tablice) boja pozadine - coral, za element ("Zaglavlje" tablice) postavite boju pozadine srebrna.
  • Za artikle
    • koji se nalaze unutar elementa (tijelo tablice) postavljanje promjene boje pozadine pri lebdenju (pseudo klasa: hover) c bijela po boji kaki(cijeli red je označen).

    Rezultat našeg primjera:

    Pirinač. 153 Primjer stiliziranja redova u tablicama

    Sljedeći primjer pokazuje kako primijeniti zaokruživanje ugla na ćelije tablice (svojstvo).

    Primjer zaokruživanja uglova ćelije
    TagOpis
    .
    Definira sadržaj tablice.
    Određuje naziv tablice.
    Definira ćeliju zaglavlja tablice.
    Definira red u tablici.
    Definira ćeliju podataka tablice.
    Koristi se za zadržavanje naslova grupe u tablici (naslov tablice).
    Koristi se za "tijelo" tablice.
    Koristi se za "podnožje" tablice (podnožje).
    Definira navedena svojstva stupaca za svaku kolonu unutar oznake
    Definira grupu stupaca u tablici.

    Rad s uvlačenjem tablice

    Upotreba zaglavlja u tablici
    Uvlačenje tabele
    1 2 3 4
    2
    3
    4

    U ovom primjeru mi:

    • Tablica je postavljena u središte, koristeći tehniku ​​horizontalnog centriranja s vanjskim marginama (margina: 0 automatski).
    • Za naziv tablice (oznaka
    ) postavili smo donji padding na 19 piksela. Nadam se da vas ne zbunjuju neujednačeni brojevi :)

    Rezultat našeg primjera:

    Razmak između ćelija

    Nakon gornjeg primjera, možda ste primijetili da imamo jaz između svih ćelija u tablici. Pogledajmo kako ukloniti jaz između ćelija tablice ili ga povećati.

    Da biste postavili udaljenost između granica susjednih ćelija, morate koristiti CSS svojstvo - razmak između granica.

    Promijenite razmak između tablica
    razmak između granica: 30px 10px;
    1 2 3
    2
    3
    razmak između granica: 0;
    1 2 3
    2
    3
    razmak između granica: 0,2em;
    1 2 3
    2
    3

    U ovom primjeru mi:

    • pluta: lijevo). Ako ste propustili temu plutajućih elemenata, uvijek se možete vratiti na nju u ovom vodiču - "".
    • Osim toga, postavili smo tablični padding s desne strane na 30px i postavili okomito poravnanje tablica (vrh elementa poravnat je s vrhom najvišeg elementa). U ovom ćemo se članku detaljno vratiti ovoj nekretnini.
    ) - podebljano.
  • Za ćelije tablice (zaglavlje i ćelije podataka) postavili smo čvrstu granicu od 1 piksela sa # F50 šesterokutnom i postavili razmak na 19 piksela za sve strane.
  • Za prvu tablicu s klasom .prvo postavili smo razmak između ćelija tablice (svojstvo razmaka granica) na 30px 10px, za drugu tablicu s klasom .sekunda jednaka nuli, za treću tabelu sa klasom .treće jednako 0,2em.

    • Skrećem vam pažnju na činjenicu da ako je samo jedna vrijednost dužine navedena u svojstvu razmaka ivica, onda ona označava razmak, vodoravno i okomito, a ako su navedene dvije vrijednosti duljine, tada prva određuje vodoravnu udaljenost , a druga vertikala. Udaljenost između granica susjednih ćelija može se navesti u CSS jedinicama (px, cm, em itd.). Negativne vrijednosti nisu dopuštene.

    Rezultat našeg primjera:

    Prikaz ivica oko ćelija tablice

    Ti možeš reći: - dakle, uklonili smo razmak između ćelija pomoću svojstva border-spacing s vrijednošću 0, ali zašto sada imamo granice ćelija koje se sijeku?

    Dvostruke granice nastaju zbog činjenice da se donja granica jedne ćelije dodaje gornjoj granici ćelije koja se nalazi ispod nje, slična situacija se javlja na stranama ćelija i to je logično sa stajališta prikaza tablicu, ali na sreću postoji način da kažemo pregledniku da jesmo da ne želimo vidjeti takvo drsko ponašanje granica ćelija.

    Da biste to učinili, morate koristiti CSS svojstvo urušavanja granica. Čudno je da je korištenje svojstva border-collaption sa vrijednošću skupljanja najbolji način za uklanjanje jaza između ćelija bez dobivanja dvostrukih granica između njih.

    Razmotrite usporedbu ponašanja granice kada koristite svojstvo graničnog razmaka s vrijednošću 0 i svojstvo graničnog urušavanja sa vrijednošću urušavanja:

    Primjer prikaza ivica oko ćelija tablice
    razmak između granica: 0;
    1 2 3
    2
    3
    rušenje granice: urušavanje;
    1 2 3
    2
    3

    U ovom primjeru mi:

    • Naše tablice su plutale i poravnane ulijevo (plutajuće: lijevo), postavili njihov desni padding na 30px.
    • Postavljeno za naziv tablice (oznaka
    ) - podebljano.
  • Za ćelije tablice (zaglavlje i ćelije podataka) postavili smo čvrstu granicu od 5 piksela sa # F50 šesterokutnom i postavili fiksnu širinu od 50 piksela i visinu od 75 piksela.
  • Za prvu tablicu s klasom .prvo razmak između ćelija tablice postavili smo na nulu (razmak granica: 0;), a za drugu tablicu s klasom .sekunda postavite svojstvo border -rupt na kolaps, koje spaja granice ćelija u jednu kad je to moguće.

    • Rezultat našeg primjera:

    Ponašanje praznih ćelija

    Pomoću CSS -a možete postaviti želite li prikazivati ​​granice i pozadinu praznih ćelija u tablici ili ne. Svojstvo empty-cells odgovorno je za ovo ponašanje, koje prema zadanim postavkama, kao što ste možda primijetili iz prethodnih primjera, prikazuje prazne ćelije.

    Prijeđimo na primjer:

    Primjer prikaza praznih ćelija tablice
    prazne ćelije: show;
    1 2 3
    2 ☺
    3 ☺
    prazne ćelije: sakrij;
    1 2 3
    2 ☺
    3 ☺

    Da biste razumjeli kako svojstvo praznih ćelija funkcionira iz ovog primjera vrlo je jednostavno, ako je postavljeno za skrivanje, prazne ćelije i pozadina u njima bit će skrivene, ako su postavljene na prikaz (zadano), tada će biti prikazane.

    Lokacija zaglavlja tablice

    Pogledajmo još jedno jednostavno svojstvo za oblikovanje tablica - caption -side, koje postavlja položaj naslova tablice (iznad ili ispod tablice). Prema zadanim postavkama, svojstvo strane naslova postavljeno je na vrh, što postavlja naslov iznad tablice. Da biste postavili naslov ispod tablice, morate koristiti svojstvo s najnižom vrijednošću.

    Pogledajmo primjer korištenja ove osobine:

    Primjer korištenja svojstva caption-side
    Zaglavlje iznad stola
    ImeCijena
    Riba350 rubalja
    Meso250 rubalja

    Naslov ispod tabele
    ImeCijena
    Riba350 rubalja
    Meso250 rubalja

    U ovom primjeru smo stvorili dva razreda koji kontroliraju položaj zaglavlja tablice. Prvi razred ( .topCaption) stavlja naslov tablice iznad njega, primijenili smo ga na prvu tablicu, a drugu klasu ( .bottomCaption) stavlja naslov tablice ispod njega, primijenili smo ga na drugu tablicu. Class .topCaption ima zadano svojstvo caption-side i kreiran je u svrhu demonstracije.

    Rezultat našeg primjera:

    Vodoravno i okomito poravnanje

    U većini slučajeva, pri radu s tablicama morat ćete prilagoditi poravnanje sadržaja unutar zaglavlja i ćelija podataka. Svojstvo text-align koristi se za horizontalno poravnanje slično svim tekstualnim informacijama. Ranije smo u članku "" raspravljali o upotrebi ovog svojstva za tekst.

    Da biste postavili poravnanje za sadržaj u ćelijama, morate koristiti posebne ključne riječi sa svojstvom poravnati tekst. Razmotrimo primjenu ključnih riječi ove nekretnine u sljedećem primjeru.

    Primjer horizontalnog poravnanja u tablici
    ZnačenjeOpis
    lijevoPoravnava tekst ćelije ulijevo. Ovo je zadana postavka (ako je smjer teksta slijeva nadesno).
    desnoPoravnava tekst ćelije udesno. Ovo je zadana postavka (ako je smjer teksta zdesna nalijevo).
    centarPoravnava tekst ćelije prema sredini.
    opravdatiIsteže linije tako da svaka linija ima istu širinu (rasteže tekst ćelije tako da odgovara širini).

    U ovom primjeru smo stvorili četiri razreda, koji je postavio različito horizontalno poravnanje u ćelijama i primijenio ih u redove tablice. Vrijednost u ćeliji odgovara vrijednosti svojstva poravnanja teksta

    Rezultat našeg primjera:

    Osim vodoravnog poravnanja, možete definirati i okomito poravnanje u ćelijama tablice pomoću svojstva okomito poravnanje.

    Imajte na umu da se pri radu s ćelijama tablice koriste samo sljedeće vrijednosti* ovog svojstva:

    * -Sub, super, text-top, text-bottom, length i% vrijednosti primijenjene na ćeliju tablice ponašat će se kao da koristite osnovnu vrijednost.

    Pogledajmo primjer upotrebe:

    Primjer okomitog poravnanja u tablici
    ZnačenjeOpis
    osnovicaPoravnava osnovnu ćeliju s osnovnom linijom roditelja. Ovo je zadana postavka.
    vrhPoravnava sadržaj ćelije okomito prema vrhu.
    srednjiPoravnava sadržaj ćelije okomito u sredini.
    dnoPoravnava sadržaj ćelije okomito prema dnu.

    U ovom primjeru smo stvorili četiri razreda, koji je postavio različito okomito poravnanje u ćelijama i primijenio ih u redovima tablice. Vrijednost u ćeliji odgovara vrijednosti svojstva okomitog poravnanja koja je primijenjena na taj red.

    Algoritam za postavljanje izgleda tabele pomoću pretraživača

    CSS prema zadanim postavkama koristi algoritam preglednika za automatski izgled tablice. U ovom slučaju širina stupca postavljena je najširim neprekidnim sadržajem ćelije... Ovaj algoritam u nekim slučajevima može biti spor, jer preglednik mora pročitati sav sadržaj u tablici prije nego što odredi njegov konačni izgled.

    Za promjenu vrste izgleda tablice pomoću preglednika pomoću automatski uključeno fiksno, morate koristiti CSS svojstvo rasporeda tablice s fiksnom vrijednošću.

    U tom slučaju vodoravno postavljanje ovisi samo o iz širine tablice i širine stupaca, a ne iz sadržaja ćelija. Preglednik počinje prikazivati ​​tablicu odmah nakon primitka prvog reda. Kao posljedica toga, fiksni algoritam vam omogućuje da kreirate izgled takve tablice brže nego pomoću automatske verzije. Kada radite s velikim tablicama, možete koristiti fiksni algoritam za poboljšanje performansi.

    Pogledajmo primjenu ovog svojstva na sljedećem primjeru:

    Primjer korištenja svojstva table-layout
    raspored stolova: auto;
    Ime 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenica 125 215 2540 33287 695878 1222222 125840000 125
    raspored stolova: fiksno;
    Ime 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenica 125 215 2540 33287 695878 1222222 125840000 125

    U ovom primjeru mi:

    Stiliziranje redova i stupaca u tablici

    Već smo djelomično dotakli metode oblikovanja redova i stupaca tablice u članku "". U ovom smo članku pogledali upotrebu grupne pseudo-klase koja vam omogućuje izmjenu stilova redaka u tablicama koristeći vrijednosti čak (iskren) i čudno (čudno), ili po osnovnom matematička formula.

    Ponovimo prethodne tehnike i istražimo nove načine stiliziranja redova i stupaca u tablicama. Prijeđimo na primjere.

    Primjer korištenja: nth-child pseudo-klase s tablicama
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

    U ovom primjeru mi:

    Rezultat našeg primjera:

    Prijeđimo na sljedeći primjer u kojem ćemo pogledati opcije za oblikovanje redova tablice.

    Primjer stiliziranja redova u tablicama
    ServiceCijena
    Suma 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

    U ovom primjeru mi:

    • Postavite širinu tablice na 100% širine nadređenog elementa, postavite zaglavlje i ćelije podataka na 1 px čvrstu granicu.
    • Instalirano za stavku
    1 2 3 4 5

    U ovom primjeru mi:

    • Tablicu centrirajte s razmacima, postavite širinu i visinu ćelija zaglavlja na 50 piksela, navedite transparentno obrub 5 piksela.
    • Utvrđeno je da prilikom prelaska kursorom (pseudo-klasa: hover) preko ćelije zaglavlja dobiva pozadinu plava boje, Narandžasta boja teksta, obrub narandžasta boje 5 piksela i radijus od 100%.
    • Prozirna ivica je potrebno kako bi se rezervirao prostor za granicu, koji će biti prikazan pri lebdenju, ako se to ne učini, tablica će "skočiti".

    Rezultat našeg primjera:

    Sljedeći primjer dotiče upotrebu HTML elemenata

    Broj prijaveServicecijena, rub.Ukupno
    1Pjevati 6 000 6 000
    2pranje suđa 2 000 2 000
    3Čišćenje 1 000 1 000
    4Prigovaranje 1 500 1 500
    5Čitanje 3 000 3 000

    U ovom primjeru mi:

    Rezultat našeg primjera:

    Pa, i posljednji primjer, koji je prilično teško razumljiv i zahtijeva napredno znanje u CSS -u, jer se dotiče budućih tema planiranih za detaljno proučavanje u okviru ovog kursa.

    U prethodnom primjeru smo shvatili da HTML element

    Broj prijaveServicecijena, rub.Ukupno
    1Pjevati 6 000 6 000
    2pranje suđa 2 000 2 000
    3Čišćenje 1 000 1 000
    4Prigovaranje 1 500 1 500
    5Čitanje 3 000 3 000

    U ovom primjeru mi:

    • Našu tablicu smo postavili tako da zauzima 100% nadređenog elementa, ćelije tablice zauzimaju 25% roditeljskog elementa i imaju punu ivicu zelene boje od 1 piksela, zaglavlja i ćelije podataka su visoke 45px. Uklonili smo jaz između ćelija pomoću svojstva border -rupt s vrijednošću
    .
  • I tako, koristeći pseudo-element :: ::, dodajte sadržaj nakon svakog elementa.
    		• pri lebdenju. Pseudo-element :: after nužno se koristi zajedno sa svojstvom content, zahvaljujući kojem ubacujemo blok element koji ima boju pozadine forestgreen i ima apsolutno pozicioniranje.
  • Apsolutno pozicioniranje ovdje je potrebno za pomak elementa u odnosu na navedenu ivicu njegovog pretka, dok predak mora imati vrijednost pozicije različitu od zadane statičke vrijednosti, inače će iz tog razloga broj biti u odnosu na navedenu ivicu prozora preglednika postavili smo za sto relativno pozicioniranje(relativno).
  • Za naš generirani blok postavili smo gornje svojstvo, koje označava smjer pomaka pozicioniranog elementa od gornje ivice, i donje svojstvo, koje označava smjer pomaka pozicioniranog elementa od donjeg ruba. Za oba svojstva navedena je vrijednost 0, pa će blok u potpunosti zauzeti element s dna i vrha tablice, širina ovog bloka je postavljena na 25%, ova vrijednost odgovara vrijednosti širine ćelije samog sebe.
  • I konačno svojstvo koje smo postavili za ovaj blok: z-index s vrijednošću "-1" određuje redoslijed pozicioniranih elemenata prema Z osa... Ovo svojstvo je potrebno kako bi se tekst nalazio ispred ovog bloka, a ne iza njega, ako ne postavite vrijednost manju od nule, tada će blok zatvoriti tekst.

    • Rezultat našeg primjera:

    Ako u ovoj fazi studije ne razumijete proces pozicioniranja elemenata, nemojte se obeshrabriti, ovo je teško razumljiva tema koju također nismo razmatrali, ali definitivno ćemo je razmotriti u sljedećem članku vodič "Elementi pozicioniranja u CSS -u".

    Pitanja i zadaci na tu temu

    Dovršite vježbu prije nego prijeđete na sljedeću temu:


    Ako imate poteškoća pri dovršavanju vježbe, uvijek možete otvoriti primjer u zasebnom prozoru i pregledati stranicu kako biste vidjeli koji je CSS korišten.


    2016-2020 Denis Bolshakov, svoje komentare i prijedloge o radu web stranice možete poslati na web [email protected]

    SLIČNI ČLANCI

    Preporučeno

    Autorska prava 2021 - Popravka računara i laptopa. Video kartice, tvrdi diskovi, internet, monitori.