Html udaljenost između stupaca tablice

Pregledali smo mnoge metode stiliziranja elemenata na stranici kao što su tekstualne informacije, veze, slike, naslovi, ali sve to još nije dovoljno. U svojim člancima često koristim HTML elemente kao što su tablice, jer u većini slučajeva oni pomoći u sistematizaciji važna informacija i učiniti njegovu prezentaciju jednostavnijom.

U ovom članku uvest ću vas u zamršenost oblikovanja HTML tablica i naučit ćete nova svojstva CSS-a dizajnirana za postizanje ovih ciljeva.

Hipertekstualni označni jezik HTML pružio nam je veliki broj prilika 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 – koraljni, za element (“zaglavlje tablice”) postavite boju pozadine srebro.

Za elemente

, koji se nalaze unutar elementa (tijelo tablice) postavite boju pozadine da se mijenja pri lebdenju (pseudo klasa :hover) c bijela po boji kaki(cijela linija je označena).

Rezultat našeg primjera:

Riža. 153 Primjer stiliziranja redaka u tablicama

Sljedeći primjer razmatra primjenu zaokruživanja kutova na ćelije tablice (svojstvo).

) postavili smo donji dio na 19 piksela. Nadam se da vam neparni brojevi ne smetaju :)

Rezultat našeg primjera:

Razmak između ćelija

Nakon gore navedenog primjera, možda ste primijetili da još uvijek imamo razmak između svih ćelija tablice. Pogledajmo kako ukloniti razmak između ćelija tablice ili ga povećati.

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

rubni razmak: 30px 10px;

1	2	3
2
3

granični razmak: 0;

1	2	3
2
3

border-spacing:0.2em;

1	2	3
2
3

U ovom primjeru mi:

• plovak: lijevo). Ako ste propustili temu plutajućih elemenata, uvijek joj se možete vratiti u ovom vodiču - "".
• Osim toga, postavili smo desnu marginu za tablice na 30px i postavili okomito poravnanje tablica (vrh elementa je poravnat s vrhom najvišeg elementa). Vratit ćemo se detaljnom razmatranju ovog svojstva u ovom članku.

) – odvažan stil.

Za ćelije tablice(ćelije zaglavlja i podataka) postavili smo čvrsti obrub od 1px s #F50 heksadecimalnom bojom i postavili ispunu od 19px sa svih strana.

Za prvim stolom s razredom .prvi postavili smo razmak između ćelija tablice (svojstvo bord-spacing) na 30px 10px za drugu tablicu s klasom .drugi jednako nuli, za treće tablice s klasom .treći jednako 0.2em .

Imajte na umu da ako je navedena samo jedna vrijednost duljine u svojstvu border-spacing, tada ona označava intervale, vodoravno i okomito, a ako su navedene dvije vrijednosti duljine, tada prva određuje vodoravnu udaljenost, a druga okomitu . Udaljenost između obruba susjednih ćelija može se odrediti u CSS jedinicama (px, cm, em itd.). Negativne vrijednosti nisu dopuštene.

Rezultat našeg primjera:

Prikaži obrube oko ćelija tablice

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

Dvostruki obrubi su uzrokovani činjenicom da se donji obrub jedne ćelije dodaje gornjem obrubu ćelije koja je ispod nje, slična situacija se događa na stranama ćelija i to je logično sa stajališta prikaza tablice, ali srećom postoji način da kažete pregledniku da ne želimo vidjeti tako labavo ponašanje granica ćelija.

Da biste to učinili, morate koristiti CSS svojstvo granica-kolaps. Možda nije čudno, ali korištenje svojstva border-collapse s vrijednošću kolapsa jest najbolji način Kako možete ukloniti razmak između ćelija bez dvostrukih obruba između njih?

Usporedimo ponašanje granica kada se koristi svojstvo border-spacing s vrijednošću 0 i svojstvo border-collapse s vrijednošću collapse:

granični razmak: 0;

1	2	3
2
3

border-collapse: kolaps;

1	2	3
2
3

U ovom primjeru mi:

• Učinili smo naše tablice plutajućima i pomaknuli ih ulijevo (float: lijevo), postavili njihovu vanjsku marginu s desne strane na 30px.
• Postavite naziv tablice (tag

) – odvažan stil.

Za ćelije tablice (ćelije zaglavlja i podataka), postavili smo čvrsti obrub od 5 px s heksadecimalnom bojom #F50 i postavili fiksnu širinu od 50 px i visinu od 75 px.

Za prvim stolom s razredom .prvi razmak između ćelija tablice postavljamo na nulu (border-spacing : 0 ;), a za drugu tablicu s klasom .drugi postavite svojstvo border-collapse na collapse, što sažima granice ćelija u jednu kada je to moguće.

Rezultat našeg primjera:

Ponašanje praznih ćelija

Pomoću CSS-a možete postaviti hoće li se rubovi i pozadine praznih ćelija u tablici prikazivati ​​ili ne. Ovo ponašanje kontrolira svojstvo praznih ćelija, koje prema zadanim postavkama, kao što ste mogli primijetiti iz prethodnih primjera, prikazuje prazne ćelije.

Prijeđimo na primjer:

prazne ćelije: pokazati;

1	2	3
2		☺
3	☺

prazne ćelije: sakriti;

1	2	3
2		☺
3	☺

Vrlo je jednostavno razumjeti kako svojstvo praznih ćelija funkcionira iz ovog primjera, ako je postavljeno na hide, tada će prazne ćelije i pozadina u njima biti skrivene, ako je postavljeno na show (zadano), tada će biti prikazane.

Lokacija zaglavlja tablice

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

Pogledajmo primjer korištenja ovog svojstva:

Zaglavlje iznad tablice

Ime	Cijena
Riba	350 rubalja
Meso	250 rubalja

Naslov ispod tablice

Ime	Cijena
Riba	350 rubalja
Meso	250 rubalja

U ovom smo primjeru stvorili dva razreda, koji kontroliraju položaj zaglavlja tablice. Prvi razred ( .topCaption) stavlja naslov tablice iznad sebe, primijenili smo ga na prvu tablicu, a drugu klasu ( .bottomCaption) postavlja naslov tablice ispod sebe, primijenili smo ga na drugu tablicu. Klasa .topCaption ima zadanu vrijednost svojstva na strani naslova i stvoren je u svrhu demonstracije.

Rezultat našeg primjera:

Horizontalno i okomito poravnanje

U većini slučajeva, kada radite s tablicama, morat ćete prilagoditi poravnanje sadržaja unutar zaglavlja i podatkovnih ćelija. Svojstvo text-align koristi se za horizontalno poravnanje, slično kao i bilo koje drugo tekstualne informacije. O korištenju ovog svojstva za tekst raspravljali smo ranije u članku “”.

Da biste postavili poravnanje za sadržaj u ćelijama, morate koristiti posebne ključne riječi sa svojstvom text-align. Razmotrimo aplikaciju ključne riječi ovo svojstvo u sljedećem primjeru.

Značenje	Opis
lijevo	Poravnava tekst ćelije ulijevo. Ovo je zadana vrijednost (ako je smjer teksta slijeva nadesno).
pravo	Poravnava tekst ćelije udesno. Ovo je zadana vrijednost (ako je smjer teksta zdesna nalijevo).
centar	Poravnava tekst ćelije prema sredini.
opravdati	Razvlači retke tako da svaki redak bude iste širine (razvlači tekst ćelije kako bi odgovarao njezinoj širini).

U ovom smo primjeru stvorili četiri razreda, koji određuju različita vodoravna poravnanja u ćelijama i primjenjuju ih redom na retke tablice. Vrijednost u ćeliji odgovara vrijednosti svojstva poravnanja teksta

Rezultat našeg primjera:

Osim horizontalnog poravnanja, također možete definirati okomito poravnanje u ćelijama tablice pomoću svojstva vertical-align.

Imajte na umu da kada radite s ćelijama tablice, samo sljedeće vrijednosti* ove nekretnine:

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

Pogledajmo primjer korištenja:

Značenje	Opis
Osnovna linija	Poravnava osnovnu liniju ćelije s osnovnom linijom roditelja. Ovo je zadana vrijednost.
vrh	Poravnava sadržaj ćelije okomito na gornji rub.
sredini	Poravnava sadržaj ćelije okomito u sredini.
dno	Poravnava sadržaj ćelije okomito uz donji rub.

U ovom smo primjeru stvorili četiri razreda, koji određuju različita okomita poravnanja u ćelijama i primjenjuju ih redoslijedom na retke tablice. Vrijednost u ćeliji odgovara vrijednosti svojstva vertikalnog poravnanja koje je primijenjeno na taj redak.

Algoritam za postavljanje tablice u preglednik

CSS prema zadanim postavkama koristi algoritam za preglednik za automatsko uređivanje izgleda tablice. U ovom slučaju širina stupca postavljena je najširim neprekinutim sadržajem ćelije. Ovaj algoritam može biti spor u nekim slučajevima budući da preglednik mora pročitati sav sadržaj u tablici prije nego što odredi njezin konačni izgled.

Za promjenu vrste izgleda tablice preglednika pomoću automatski na fiksni, morate koristiti CSS izgled tablice svojstava s fiksnom vrijednošću.

U ovom slučaju, horizontalni položaj ovisi samo na širinu tablice i širinu stupaca, a ne na sadržaj ćelija. Preglednik počinje prikazivati ​​tablicu odmah nakon što primi prvi red. Kao rezultat toga, fiksni algoritam omogućuje vam izradu izgleda za takvu tablicu brže od korištenja automatske opcije. Kada radite s velikim tablicama, možete koristiti fiksni algoritam za poboljšanje performansi.

Pogledajmo korištenje ovog svojstva koristeći sljedeći primjer:

raspored tablice: auto;

Ime	2009	2010	2011	2012	2013	2014	2015	2016
Pšenica	125	215	2540	33287	695878	1222222	125840000	125

raspored tablice: fiksni;

Ime	2009	2010	2011	2012	2013	2014	2015	2016
Pšenica	125	215	2540	33287	695878	1222222	125840000	125

U ovom primjeru mi:

Oblikovanje redaka i stupaca tablice

Već smo se djelomično dotakli metoda stiliziranja redaka i stupaca tablice u članku "". U ovom smo članku pogledali korištenje grupne pseudo-klase koja vam omogućuje izmjenu stilova redaka u tablicama pomoću vrijednosti čak (pošten, čestit) I neparan (neparan), ili osnovnom matematička formula.

Pregledajmo tehnike koje smo ranije obradili i istražimo nove načine stiliziranja redaka i stupaca u tablicama. Prijeđimo na primjere.

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 stiliziranje redaka tablice.

Servis	Cijena
Iznos	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

U ovom primjeru mi:

• Postavili smo širinu tablice na 100% širine nadređenog elementa i postavili čvrstu granicu širine 1px za zaglavlje i podatkovne ćelije.
• Set za element

Označiti	Opis
. Definira sadržaj tablice. Definira naziv tablice. Definira ćeliju zaglavlja tablice. Definira red tablice. Definira podatkovnu ćeliju tablice. Koristi se za sadržavanje zaglavlja grupe u tablici (zaglavlje tablice). Koristi se za sadržavanje "tijela" tablice. Koristi se za sadržavanje "podnožja" tablice. Definira određena svojstva stupca za svaki stupac unutar oznake Definira grupu stupaca u tablici. Rad s uvlakama u tablici Uvlačenje tablice 1 2 3 4 2 3 4 U u ovom primjeru Mi: Tablicu smo postavili u središte tehnikom horizontalnog centriranja s vanjskim uvlakama (margina: 0 auto). Za naziv tablice (tag

1	2	3	4	5

U ovom primjeru mi:

• Centrirali smo tablicu s vanjskim marginama, postavili širinu i visinu ćelija zaglavlja na 50 px i specificirali transparentan obrub 5 piksela.
• Ustanovili smo da kada lebdi (pseudoklasa :hover) na ćeliji zaglavlja, prima pozadina plava boje, naranča boja teksta, okvir naranča boje 5 piksela i radijus zaokruživanja 100%.
• prozirna granica je potrebno kako bi se rezervirao prostor za obrub koji će se prikazati prilikom lebdenja; ako to ne učinite, tablica će "skočiti".

Rezultat našeg primjera:

Sljedeći primjer pokriva korištenje HTML elemenata I i njihovu stilizaciju.

Primjena br.	Servis	cijena, utrljati.	Ukupno
1	Pjevanje	6 000	6 000
2	pranje	2 000	2 000
3	Čišćenje	1 000	1 000
4	Zakeranje	1 500	1 500
5	Čitanje	3 000	3 000

U ovom primjeru mi:

Rezultat našeg primjera:

Pa, posljednji primjer, koji je prilično težak za razumjeti i zahtijeva napredno poznavanje CSS-a, jer se dotiče budućih tema planiranih za detaljno proučavanje u ovom tečaju.

U prethodnom primjeru smo to shvatili HTML element Možete primijeniti samo jedno CSS svojstvo - boju pozadine (background-color), ali ne možete izravno postaviti boju pozadine kada lebdite (pseudoklasa :hover) na ovom elementu. U ovom primjeru ćemo pogledati kako istaknuti stupac tablice koristeći samo CSS.

Primjena br.	Servis	cijena, utrljati.	Ukupno
1	Pjevanje	6 000	6 000
2	pranje	2 000	2 000
3	Čišćenje	1 000	1 000
4	Zakeranje	1 500	1 500
5	Čitanje	3 000	3 000

U ovom primjeru mi:

• Postavili smo tablicu da zauzima 100% nadređenog elementa, ćelije tablice da zauzimaju 25% nadređenog elementa i imaju čvrsti zeleni obrub od 1 piksela, visina zaglavlja i podatkovnih ćelija je 45 px. Uklonili smo razmak između ćelija pomoću svojstva border-collapse s vrijednošću .
• I tako, korištenjem pseudo-elementa ::after dodajemo sadržaj nakon svakog elementa pri lebdjenju. Pseudoelement ::after potrebno je koristiti zajedno sa svojstvom content, zahvaljujući kojem umećemo blok element koji ima boju pozadine šumskozelena i ima apsolutno pozicioniranje.
• Apsolutno pozicioniranje ovdje je neophodno za pomak elementa u odnosu na navedeni rub njegovog prethodnika, a prethodnik mora imati vrijednost položaja različitu od zadane - static , inače će brojanje biti relativno prema navedenom rubu prozora preglednika, za ovo razlog što postavljamo za stol relativno pozicioniranje(relativna).
• Postavljamo svojstvo top za naš generirani blok, koje specificira smjer u kojem je pozicionirani element odmaknut od gornjeg ruba, i svojstvo bottom, koje specificira smjer u kojem je pozicionirani element odmaknut od donjeg ruba. Za oba svojstva navedena je vrijednost 0, tako da će blok u potpunosti zauzeti element s dna i vrha tablice, širina ovog bloka postavljena je na 25%, ova vrijednost odgovara širini same ćelije.
• I konačno svojstvo koje postavljamo za ovaj blok: z-index s vrijednošću "-1" određuje redoslijed pozicioniranih elemenata prema Z os. Ovo svojstvo je neophodno da bi tekst bio ispred ovog bloka, a ne iza njega; ako ne postavite vrijednost manju od nule, blok će prekriti tekst.

Rezultat našeg primjera:

Ako u ovoj fazi vašeg proučavanja ne razumijete proces pozicioniranja elemenata, nemojte se obeshrabriti; ovo je tema koju je teško razumjeti, koju također nismo razmatrali, ali ćemo je svakako razmotriti u sljedećem članku udžbenik “Pozicioniranje elemenata u CSS-u”.

Pitanja i zadaci na temu

Prije nego prijeđete na sljedeću temu, dovršite zadatak za vježbanje:

Ako imate poteškoća s dovršavanjem zadatka za vježbanje, uvijek možete otvoriti primjer u zasebnom prozoru i pregledati stranicu kako biste shvatili koji je CSS kod korišten.

2016-2020 Denis Bolshakov, komentare i prijedloge na web mjestu možete poslati na [email protected]

Već smo saznali da HTML tablice imaju okvir, iako ih preglednici ne prikazuju prema zadanim postavkama. Ali to nije sve, svaka ćelija tablice ima i okvir tzv granica ćelije. Ali to nije sve, korištenje posebnih atributa oznake

Možete promijeniti udaljenosti između ćelija i od ćelija do okvira tablice, kao i unutarnje ispune od granica ćelija do njihovog sadržaja.

Okvir HTML tablice, granice ćelija, udaljenosti između njih i padding.

Dakle za stvaranje okvira HTML tablice i granice njegovih stanica koristi se samo jedan atribut oznake

- granica. Vrijednost atributa je nenegativan cijeli broj (nula prema zadanim postavkama) koji predstavlja veličinu u pikselima. No, obratite pozornost, veličina se mijenja samo na okviru tablice, na rubovima ćelija uvijek je nepromijenjena.

...

Za promjenu udaljenosti između stanica(njihove granice) i od ćelija do okvira tablice u tag

Primijenjen je atribut cellpacing. Njegove vrijednosti također mogu biti samo brojevi koji mjere udaljenosti u pikselima.

...

Za ugradnju unutarnjeg ispuna od obruba ćelija do njihovog sadržaja potrebno u oznaci

koristite atribut cellpadding. A njegove vrijednosti su brojevi koji označavaju dimenzije piksela.

...

Imajte na umu da preglednici prema zadanim postavkama postavljaju male (dva piksela) vrijednosti za cellpacing i cellpadding, tako da za potpuno uklanjanje razmaka postavite atribute na nulu (0).

Primjer obruba, okvira i ispuna HTML tablice

Ćelija 1.1	Ćelija 1.2	Ćelija 1.3
Ćelija 2.1	Ćelija 2.2	Ćelija 2.3
Ćelija 3.1	Ćelija 3.2	Ćelija 3.3

Tablica sa postavljenim samo obrubima ćelija i obrubima:

Ćelija 1.1	Ćelija 1.2	Ćelija 1.3
Ćelija 2.1	Ćelija 2.2	Ćelija 2.3
Ćelija 3.1	Ćelija 3.2	Ćelija 3.3

Rezultat u pregledniku

Tablica s izmijenjenim uvlakama i udaljenostima:

Naravno, nije potrebno crtati okvir i granice ćelija na tablici kako bi se promijenile unutarnje uvlake i udaljenosti između ćelija.

Prema HTML sintaksa, preglednici dodaju vrijednosti cellpacing i cellpadding veličini tablice i njenih ćelija. Na primjer, ako postavite širinu ćelije na 100 piksela i cellpadding="10" - preglednici će širini dodati 20 piksela (po 10 s lijeve i desne strane) i ona će postati 120 piksela. Općenito, shvatit ćete to u hodu.

Digresija s teme ili kako ukloniti uvlake uz rubove stranice

U početku svi preglednici instaliraju male margine uz rubove HTML stranice, koje su često nepotrebne, pa ćete sada naučiti kako ih ukloniti. Općenito, ovu informaciju treba staviti na početak udžbenika, ali teško da bi vam tamo koristila.

U dogledno vrijeme na oznaci Postojala su četiri atributa koji postavljaju veličinu ovih margina za svaku stranu stranice: topmargin (gore), rightmargin (desno), bottommargin (dolje) i leftmargin (lijevo). Sada su ti atributi zastarjeli, pa ćemo koristiti stilove (CSS). Dakle, udaljenost margina duž rubova stranice možete mijenjati na nekoliko načina, ja ću vam pokazati dva, a o trećem ćete naučiti ako odlučite naučiti CSS.

Prva metoda. U oznaci naznačiti atribut stila sa sljedećim vrijednostima:

style="margin:0" >...

- uklanja uvlake sa svih strana HTML stranice odjednom.

stil= "margina:gore desno dolje lijevo">...

- prilagođava veličinu uvlaka za svaku stranu u smjeru kazaljke na satu. U pravilu se koriste veličine u pikselima, na primjer: style= "margin:5px 3px 4px 5px" >...

Drugi i prikladniji način. U oznaci

Domaća zadaća.

U ovoj lekciji neću opisati sve u detalje - samo općenite točke. Za cjelovitost pogledajte primjer rezultata.

1. Napravite tri tablice od kojih se svaka sastoji od jednog retka i tri stupca (stupca).
2. U prvoj tablici postavite zaglavlje ili "zaglavlje" stranice (ne smije se brkati sa "zaglavljem" HTML dokumenta), u drugu - lijevi i desni izbornik, kao i glavni sadržaj (sadržaj) , u trećem - podnožje ili "podnožje" stranice.
3. Neka širina prvog i zadnjeg stupca svake tablice bude fiksna.
4. Važno. Koristi oznaku samo za stvaranje četiri gumba horizontalni izbornik u zaglavlju stranice. U ostalim slučajevima neka slike idu u pozadinu, au drugim ćelijama tablica koriste se samo boje, au prvoj i posljednjoj tablici #99FF99.
5. Neka tekst sadržaja stranice bude poravnat s obje strane ćelije tablice, a naslov centriran.
6. Što se tiče udaljenosti između ćelija tablice, kao i uvlaka ćelija, razmislite sami gdje ih treba potpuno ukloniti, a gdje povećati.

Dakle, najviše smo učili s vama jednostavnih koraka, što se može učiniti s granicama tablice. A sada stol izgleda mnogo estetski ugodnije. Međutim, punjenje stanica izravno počiva na granicama. To se lako može popraviti, samo trebate uvući ćelije HTML tablica. I tada će tekst unutar okvira, u ćeliji, biti čitljiviji.

Za uvlačenje ćelije upotrijebite atribut cellpadding za oznaku

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

U ovom slučaju, uvlačenje se postavlja pomoću svojstva podstava. Uz njegovu pomoć, neće biti teško uvući gdje je to potrebno, to jest, na vrhu, desno, dolje ili lijevo, koristeći jedno od ovih svojstava: padding-top, padding-desno, padding-bottom I padding-lijevo.

Možete točno odrediti koliko piksela treba biti udubljenje. Navedimo primjer u kojem će biti donja uvlaka 20 piksela, a sve ostalo će biti 10 . Takav CSS- kod će izgledati ovako:

Td ( ispuna: 10px; ispuna-dno: 20px; )

I kompletan kod stila u ovoj fazi:

Tablica ( obrub: puni 1px plavi; border-collapse: kolaps; ) td ( obrub: puni 1px plavi; padding: 10px; padding-bottom: 20px; )

Rezultat u pregledniku:

Razmaci između ćelija

U pravilu se problemi povezani sa stvaranjem tablica mogu riješiti korištenjem oznaka, atributa i svojstava koji vam omogućuju stvaranje okvira, uvlake u ćelijama, kao i postavljanje pozadine boje samih ćelija.

Uvlake u tablicama ne nalaze se samo unutar ćelija. Također mogu biti prisutni između samih stanica.

Postoje dvije mogućnosti za pravljenje uvlaka između ćelija:

1. koristeći atribut razmak stanica za oznaku

.

korištenjem CSS-Svojstva granični razmak.

Mora se naglasiti da granični razmak specificiran je za tablicu kao cjelinu, dok je svojstvo podstava piše se izravno za ćelije.

Pogledajmo primjer:

Tablica ( obrub: jednobojni 1 px plavi; sažimanje obruba: odvojeno; razmak obruba: 5 px; ) td ( obrub: jednobojni 1 piksel plavi; ispuna: 10 px; dopuna na dnu: 20 px; )

I rezultirajući rezultat:

Odmah naznačimo da ne biste trebali pokušavati napraviti takva udubljenja pomoću border-collapse: kolaps. Uostalom, kada koristite ovu opciju, stanice se "lijepe" jedna za drugu.

A kako biste ih držali odvojene jedna od druge, trebali biste koristiti border-collapse: odvojeno. Važno je to razumjeti dana vrijednost je zadana vrijednost. I koristi se samo da jasno pokaže kako se ovaj problem rješava. Ako izbrišemo ovaj redak, rezultat će biti spremljen u obliku ćelija koje se nalaze odvojeno jedna od druge.

Same tablice izgledaju prilično loše, a preglednici prikazuju neke karakteristike tablica, posebice okvire, na svoj način. U isto vrijeme, ti se nedostaci mogu lako ispraviti korištenjem snage stilova. Istodobno, sredstva za dizajniranje tablica su znatno proširena, što vam omogućuje da uspješno uklopite tablice u dizajn web mjesta i jasnije predstavite tablične podatke.

Boja pozadine ćelije

Boja pozadine svih ćelija tablice u isto vrijeme postavlja se kroz svojstvo pozadine, koje se primjenjuje na selektor TABLE. U ovom slučaju, trebali biste zapamtiti pravila za korištenje stilova, posebno nasljeđivanje svojstava elementa. Iako svojstvo pozadine nije naslijeđeno, zadana vrijednost pozadine za ćelije je transparentna, tj. prozirnost, tako da se učinak pozadinske ispune također dobiva za ćelije. Ako istovremeno s TABLE postavite boju selektora TD ili TH, tada će ta boja biti postavljena kao pozadina ćelije (primjer 2.3).

Primjer 2.3. Boja pozadine

Naslov 1	Naslov 2
Ćelija 3	Ćelija 4

U ovom primjeru dobivamo plavu boju pozadine za ćelije (tag ) i crveno u naslovu (tag ). To je zato što stil za TH selektor nije definiran, tako da je pozadina roditelja, u ovom slučaju TABLE selektora, "prikazana". I boja za TD selektor je specificirana eksplicitno, tako da su ćelije "ispunjene" plavom bojom.

Rezultat ovog primjera prikazan je na sl. 2.4.

Riža. 2.4. Promjena boje pozadine

Margine unutar ćelija

Margina je udaljenost između ruba sadržaja ćelije i njezine granice. U tu se svrhu obično koristi atribut cellpadding oznake.

. Definira vrijednost margine u pikselima na svim stranama ćelije. Moguće je koristiti svojstvo padding style dodavanjem u TD selektor, kao što je prikazano u primjeru 2.4.

Primjer 2.4. Polja u tablicama

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Naslov 1	Naslov 2
Ćelija 3	Ćelija 4

U ovom primjeru, grupiranjem selektora, polja se postavljaju istovremeno za selektore TD i TH. Rezultat primjera prikazan je na sl. 2.5.

Riža. 2.5. Polja u ćelijama

Ako se svojstvo stila padding primjenjuje na ćelije tablice, onda je učinak atributa cellpadding oznake

ignorirani.

Udaljenost između ćelija

Da biste promijenili udaljenost između ćelija, upotrijebite atribut cellpacing oznake

. Učinak ovog atributa jasno je vidljiv kada koristite obrube oko ćelija ili kada ispunjavate ćelije bojom koja se ističe od pozadine stranice. Svojstvo stila border-spacing služi kao zamjena za cellpacing; ono postavlja udaljenost između granica ćelija. Jedna vrijednost postavlja okomitu i vodoravnu udaljenost između granica ćelija. Ako ovo svojstvo ima dvije vrijednosti, tada prva određuje horizontalnu udaljenost (to jest, lijevo i desno od ćelije), a druga određuje okomitu udaljenost (iznad i ispod).

Svojstvo border-spacing ima učinak samo ako selektor TABLE nema svojstvo border-collapse postavljeno na kolaps (Primjer 2.5).

Primjer 2.5. Udaljenost između granica ćelija

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

Rezultat ovog primjera prikazan je na sl. 2.6.

Riža. 2.6. Prikaz tablice kada se koristi razmak između obruba

preglednik Internet Explorer verzije do i uključujući verziju 7 ne podržavaju svojstvo border-spacing, tako da će se u ovom pregledniku zadana vrijednost cellpacing (obično 2px) koristiti za tablice.

Prilikom dodavanja svojstva rubnog kolapsa s vrijednošću kolapsa selektoru TABLE, atribut cellpacing se zanemaruje, a vrijednost graničnog razmaka vraća se na nulu.

Obrubi i okviri

Prema zadanim postavkama, u tablici u početku nema obruba, a njegovo se dodavanje događa pomoću atributa obruba oznake

. Preglednici različito prikazuju takav obrub, pa je bolje uopće ne navoditi ovaj atribut, a crtanje obruba prepustiti stilovima. Pogledajmo dvije metode izravno povezane sa stilovima.

Korištenje atributa cellpacing

Poznato je da atribut cellpacing oznake

postavlja udaljenost između ćelija tablice. Ako koristite različite boje pozadine za tablicu i ćelije, tada će se između ćelija pojaviti mreža linija čija boja odgovara boji tablice, a debljina je jednaka vrijednosti atributa cellpacing u pikselima. Primjer 2.3 iznad pokazuje ovaj učinak, pa ga neću ponavljati.

Imajte na umu da ovo nije baš zgodan način za stvaranje granica, budući da ima ograničen opseg. Na ovaj način možete dobiti samo jednobojnu mrežu, a ne vertikalnu ili horizontalne linije na pravim mjestima.

Korištenje graničnog svojstva

Svojstvo stila obruba istovremeno postavlja boju, stil i debljinu obruba oko elementa. Kada trebate stvoriti odvojene linije na različitim stranama, bolje je koristiti izvedenice - border-left, border-desno, border-top i border-bottom, ta svojstva redom definiraju granicu lijevo, desno, gore i dolje .

Primjenom svojstva border na selektor TABLE dodajemo obrub oko cijele tablice, a selektoru TD ili TH dodajemo obrub oko ćelija (Primjer 2.6).

Primjer 2.6. Dodavanje dvostrukog okvira

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Naslov 1	Naslov 2
Ćelija 3	Ćelija 4

Ovaj primjer koristi dupli okvir crno oko same tablice i čvrsti bijeli rub oko svake ćelije. Rezultat primjera prikazan je na sl. 2.7.

Riža. 2.7. Rub oko tablice i ćelija

Imajte na umu da se na mjestima spajanja ćelija formiraju dvostruke linije. Ponovno se dobivaju djelovanjem atributa cellpacing oznake

. Iako se ovaj atribut ne pojavljuje nigdje u primjeru koda, preglednik ga koristi prema zadanim postavkama. Ako postavite , tada ne dobivamo dvostruke, već jednostruke linije, ali dvostruke debljine. Da biste promijenili ovu značajku, upotrijebite svojstvo stila border-collapse s vrijednošću collapse , koja je dodana selektoru TABLE (primjer 2.7).

Primjer 2.7. Stvaranje jednog okvira

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Naslov 1	Naslov 2
Ćelija 3	Ćelija 4

Ovaj primjer stvara punu zelenu crtu između ćelija i crnu crtu oko tablice. Sve granice unutar tablice imaju istu debljinu. Rezultat primjera prikazan je na sl. 2.8.

Riža. 2.8. Obrub oko stola

Poravnavanje sadržaja ćelije

Prema zadanim postavkama, tekst u ćeliji tablice poravnat je lijevo. Iznimka od ovog pravila je oznaka , definira zaglavlje koje je centrirano. Za promjenu metode poravnanja upotrijebite svojstvo stila poravnanja teksta (primjer 2.8).

Primjer 2.8. Poravnajte sadržaj ćelije vodoravno

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Naslov 1	Ćelija 1	Ćelija 2
Naslov 2	Ćelija 3	Ćelija 4

U ovom primjeru, sadržaj oznake je poravnat ulijevo, a sadržaj oznake - u središtu. Rezultat primjera prikazan je u nastavku (slika 2.9).

Riža. 2.9. Poravnavanje teksta u ćelijama

Okomito poravnanje u ćeliji uvijek je centrirano osim ako nije drugačije navedeno. Ovo nije uvijek zgodno, posebno za tablice čiji sadržaj ćelija varira u visini. U ovom slučaju, poravnanje je postavljeno na gornji rub ćelije pomoću svojstva vertikalnog poravnanja, kao što je prikazano u primjeru 2.9.

Primjer 2.9. Okomito poravnajte sadržaj ćelije

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Naslov 1	Naslov 2
Ćelija 1	Ćelija 2

Ovaj primjer postavlja visinu zaglavlja poput 40 piksela, a tekst je poravnat na donji rub. Rezultat primjera prikazan je na sl. 2.10.

Riža. 2.10. Poravnavanje teksta u ćelijama

Prazne ćelije

Preglednici drugačije prikazuju ćeliju u kojoj nema ničega. “Ništa” u ovom slučaju znači da unutar ćelije nije dodana ni slika ni tekst, a razmak se ne uzima u obzir. Naravno, izgled stanica se razlikuje samo ako se oko njih postavi obrub. Pri korištenju nevidljivog obruba izgled ćelija, bez obzira na to ima li nečega u njima, je isti.

Stariji preglednici nisu prikazivali boju pozadine praznih ćelija prikaza , pa kada je bilo potrebno ostaviti ćeliju bez sadržaja, ali prikazati boju pozadine, unutar ćelije je dodan neodvojeni razmak (). Prostor nije uvijek prikladan, pogotovo kada trebate postaviti visinu ćelije na 1-2 piksela, zbog čega je transparentni dizajn od jednog piksela postao široko rasprostranjen. Doduše, takvu sliku možete skalirati po vlastitom nahođenju, ali se ni na koji način ne prikazuje na web stranici.

Srećom, era jednopikselnih crteža i svih vrsta odstojnika temeljenih na njima je prošla. Preglednici sasvim ispravno rade s tablicama čak i bez prisutnosti sadržaja ćelija.

Za kontrolu izgleda praznih ćelija upotrijebite svojstvo praznih ćelija; kada je postavljeno na skrivanje, obrub i pozadina ne prikazuju se u praznim ćelijama. Ako su sve ćelije u nizu prazne, tada je cijeli redak skriven. Ćelija se smatra praznom u sljedećim slučajevima:

• uopće nema simbola;
• ćelija sadrži samo novi red, tabulator ili razmak;
• vidljivost je postavljena na skriveno.

Dodatak neprekinuti prostor se doživljava kao vidljivi sadržaj, tj. ćelija više neće biti prazna (primjer 2.10).

Primjer 2.10. Prazne ćelije

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Prikaz tablice u pregledniku Safari prikazan je na sl. 2.11a. Ista tablica u pregledniku IE7 prikazana je na sl. 2.11b.

A. U pregledniku Safari, Firefox, Opera, IE8, IE9

b. U pregledniku IE7

Riža. 2.11. Pogled na tablicu s praznim ćelijama