CSS: stol dizajn. primjeri registracije

Izrada stolova sa CSS - lekcije zanimljiv i odgovoran. Pristup ovom poslu treba da kompetentno, sa znanjem svih mogućih stilova. Osim toga, potrebno je da posjeduje osjećaj ljepote, kako ne bi oterao svoju kreativnost posjetitelja.

Tabele može transformisati gotovo sve. Lijep dizajn uključuje korištenje CSS stolova dizajna granice, stolni pozadine, pozadine ćelije, jaz između njih i još mnogo toga. Uzmite u obzir najosnovnije.

sto granici

CSS dizajn stil sto uvijek uključuje igra s granice (okvir). Svi default tablice nisu konture okvir. To jest, ona je jednaka 0 piksela. Ali to se može ispraviti granice imovine.

Možete navesti vanjski okvir za cijelu tablicu:

sto {granica: 3px solid black; }

Zahvaljujući ovoj liniji na svim stolovima na sajtu koji koristi ovaj stil je crnim okvirom. Imajte na umu da samo granice na rubovima, ali ne u stolu. Za stanične linije i okvir drugačije naznačeno.

th, td {border: 3px solid black;}

Debljina i boja, možete odrediti bilo. Imajte na umu da se granice ne udvostručen kada furnirom ćelija.

Riječ označava solidnu kontinuirano registracije. Možete odrediti druge vrijednosti.

to se najčešće koristi čvrstih okvira, kao što izgleda atraktivnije i ne odvratiti pažnju od glavnog sadržaj sajta.

granica imovina može se odrediti i na brodu. Granica se može podesiti samo za vrh, dno, lijevo ili desno. Jer u nekim slučajevima to nije izvodljiva opcija sa okvirom za cijelu tablicu odjednom.

sto {granica-top: 1px solid crvena; }

Tako da možete postaviti okvir za vrh samo sto. Slično bilo koje druge stranke, a ne samo top pisanja: lijevo, desno ili na dnu.

zaglavlje tabele

Zaglavlje tabele može se navesti pomoću oznake . Ova oznaka može biti u CSS za registraciju mnogo svojstava za fino podešavanje. Dizajn CSS sto je dobro, jer je moguće da se manevarski elemente na način koji želite.

Ovaj naslov je prikazan na isti način kao standard u knjigama (kao što su "Tablica 1").

Možete odrediti lokaciju naslova i imovine natpis strani (gore ili dolje). Poravnanje lijevo ili desno je definisana imovina text-align.

pozadine stolova

Pozadina stola može biti bilo koje boje ili uzorka. Boja postavlja imovine background-color. Imena svojstva potpunosti u skladu sa upotreba u govoru. To olakšava skladištenje mnogo puta.

Boja se može navesti kao ime, i različitih kodiranja. Osim toga, možete navesti sljedeće:

• Transparent - transparentno.
• Naslijediti - boja je ista kao elementa roditelja.
• Inicijalna - defaultu.

Opcija sa transparentnost mogu se koristiti u onim slučajevima u kojima se donose sve tablice u tekst u CSS datoteku u jednoj boji, ali u ovom slučaju nema potrebe.

Osim toga, pozadina može biti slika. Da biste to učinili, u vlasništvu pozadini slike stilu propisano. Put je ovako:

url ( 'URL')

Putanja do datoteke mogu biti relativna ili apsolutna.

Komplikovanije punjenje se može uraditi sa gradijent:

• linearno-gradient ();
• radial-gradient ();
• ponavljajući-linearno-gradient () i ponavlja-radijalni-gradient () - gradijent ponoviti.

pozadine ćelije

Osim pozadinu u cjelini, možete odrediti prugasta pozadina u kolonama ili redove. Za registraciju imovine vrlo često se koristi, jer je optičko razdvajanje linija lakši za čitanje informacija.

Pored alternacije, a možete odrediti broj određenog stupca ili reda. Na primjer ovako:

• tr: nth-dijete (čak i) {...} - navedite interlaced;
• tr: nth-dijete (1) {...} - naznaka svojstva određenog reda;
• td: nth-dijete (čak i) {...} - indikaciju izmjenične kolone;
• td: nth-dijete (1) {...} - naznaku svojstva određene kolone.

Osim toga može se navesti redoslijed i brojeva - prvi (td: first-child) ili zadnji (td: zadnja-dijete).

Jaz između ćelija

U CSS, dizajn sto vam omogućava da uklonite prostora između ćelija. Po defaultu jesu. Na primjer, ako postavite okvir u tabeli bez postavljanja udaljenost između granica, to će biti ovdje ovaj rezultat.

Slažem se, to izgleda nije lepo i nije pogodan za čitanje. Korisnici će imati talasanja u očima zbog ovoga. Uklonite ove praznine mogu biti pisanjem upravo takav red u stilu tabeli:

granice kolapsa: kolapsa

Ali to se dešava da je udaljenost, naprotiv, treba povećati. Osim toga, veličina praznine može se navesti kao između kolona i između redova. Ukazuje da je vrijednost (umjesto kolaps):

granice kolaps: odvojene

Ali takva akcija će pokazati da je neophodno da se razdvoje ćelije. Kao što je bio njihov udio, naznačeno dodatne nekretnine:

granica razmak: 20px.

Ako želite da navedete drugačiji razmak između redova i kolona, to znači dvije stvari:

granica razmak: 10px20px.

Razlika u pretraživačima

Imajte na umu da je u CSS dizajn stolova može izgledati drugačije, ovisno o preglednika. Posebno loše što je slučaj sa starijim verzijama, koji nije podržan inovacije u CSS.

Gore je primjer debljine okvira za digitalne vrijednosti.

Za ovaj primjer, debljina okvira za konstante.

granice stilova također se uvelike razlikuju.

Stoga je razvoj uvijek vidjeti rezultat u različitim pretraživačima.

U CSS dizajn stolova preporučuje se provjeriti vrstu preglednika. Posebno veliki problem nekad korisnicima sa starijim verzijama Internet Explorer.

Veoma napredan programeri mogu, ovisno o pregledniku kako bi se povezali potpuno drugačije CSS datoteke. I neko napravi ček u svakom ili neki poseban stil (klasa).

Većina problemi nastaju iz senke.

CSS: Tablica format Primeri

Registracija se može sasvim različiti. Sve zavisi ceo sajt i njegov dizajn. Sve treba kombinovati i šarolike boje. Također čini veliku ulogu i okus developer. Osjećaj ljepote je sve drugačije.

Mi dati neke primjere različitih stolova. Gornja slika prikazuje korištenje tilt i igrati sa bojom pozadine i granice.

Mnogi će biti zanimljiv primjer lijepe privlačan dizajn koji neće smanjiti korisnika oka. Ovo utjelovljenje je prikladno u gotovo svakoj situaciji.

Rubovi mogu biti zaobljeni. To izgleda prilično dobro.

zaključak

Kao što možete vidjeti, za izgled stolova u CSS postoje mnogi alata. Svaki parametar je i ogroman broj opcija vrijednosti. Ako ga svi koriste odjednom, možete kreirati remek. Pogotovo ako radite adaptivni dizajn za sve pretraživača.

Glavna stvar u dizajnu - ne preterujte sa efektima. Sve bi trebalo biti učinjeno u moderiranje. Isprva, raspored da eksperimentišu i odmah iskoristiti sve svoje znanje. Kao rezultat stola su prezasićenom svojstva. Pokušati izbjeći te greške.

Osim toga, neki parametri mogu ometati jedni druge. Na primjer, nema potrebe da se specificira boju pozadine tabele, dok Ako je i dalje postavljena pozadinsku sliku, koja će se preklapati određenom bojom.