CSS: dizajn stolova. Primjeri dizajna

Stvaranje tablica pomoću CSS-a je zanimljiva i odgovorna aktivnost. Pristup ovom poslu mora biti kompetentan, uz poznavanje svih mogućnosti stilova. Osim toga, morate posjedovati osjećaj ljepote, tako da ne biste uplašili posjetitelje svojim kreativnošću.

U tablicama možete pretvoriti gotovo sve. Prekrasan dizajn CSS tablica uključuje korištenje granica, pozadinu stola, pozadinu ćelija, jaz između njih i još mnogo toga. Razmotrimo najosnovnije.

Granica tablice

Stil CSS dizajna uvijek znači igranje s granicom. Sve tablice nisu po defaultu okružene granicom. To jest, to je 0 piksela. Ali to se može ispraviti pomoću graničnog entiteta.

Možete odrediti vanjsku granicu za cijelu tablicu:

tablica {border: 3px solid black-}

Zahvaljujući toj liniji, sve tablice na mjestu na kojem se ovaj stil upotrebljava imat će crnu granicu. Imajte na umu da je granica samo na rubovima, ali ne i unutar tablice. Za ćelije i redove okvir je specificiran drugačije.

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

Debljina i boja mogu se navesti bilo koji. Imajte na umu da granice ne udvostručavaju kada se pridružite stanicama.

Čvrsta riječ znači solidan dizajn. Možete navesti druge vrijednosti.

Najčešće se koristi kruti okvir jer izgleda privlačniji i ne skreće pozornost s glavnog sadržaja web sučelja.

Ograničena nekretnina također se može navesti u uputama. Granica se može postaviti samo za gornju, donju, lijevu ili desnu stranu. Budući da u nekim slučajevima opcija s okvirom za cijelu tablicu nije prikladna odjednom.

tablica {border-top: 1px solid red-}

Tako možete postaviti okvir samo za vrh tablice. Slično tome, za bilo koje druge strane, jednostavno umjesto vrh zapisati: desno, lijevo ili dno.

Naslov tablice

Naslov tablice može se navesti pomoću oznake . Ova oznaka može se postaviti u CSS mnogim svojstvima za preciznije podešavanje. U CSS je dizajn stolova dobar jer možete upravljati elementima po želji.

Ovo je zaglavlje prikazano na isti način kao što je standard u knjigama (na primjer "Tablica 1").

Također možete odrediti mjesto ovog zaglavlja s imenom naslova na naslovu (vrh ili dno). Lijevo ili desno poravnanje određeno je svojstvom za podešavanje teksta.

Stolna pozadina

Pozadina stola može biti bilo koja boja ili uzorak. Boja je postavljena zastavom boja. Imena svojstava u potpunosti odgovaraju onima koje se koriste u govoru. To olakšava pamćenje mnogo puta.

Boja se može odrediti nazivom ili različitim kodovima. Osim toga, možete navesti sljedeće:

• Transparentna - transparentnost elementa.
• Nasljeđivanje - boja je ista kao i roditeljski element.
• Početna je zadana vrijednost.

Varijacija s transparentnošću može se koristiti u tim slučajevima kada su sve tablice u tekstu u CSS datoteci izrađene u jednoj boji, ali u ovom slučaju ne postoji takva potreba.

Osim toga, pozadina može biti slika. Da biste to učinili, svojstvo pozadinske slike postavljeno je u stilu. Put je označen ovako:

URL (`URL`)

Put do datoteke može biti relativan ili apsolutan.

Složenije ispunjavanje može se provesti s gradijentom:

• linearni gradijent ();
• radijalno-gradijent ();
• ponavljajući-linearni gradijent () i ponavljanje-radijalni-gradijent () - ponavljanje gradijenta.

Stanična pozadina

Osim pozadine u cjelini, možete navesti izmjenjivu pozadinu u stupcima ili redcima. Za registraciju ovaj je entitet vrlo često korišten jer vizualno razdvajanje linija olakšava čitanje informacija.

Uz rotaciju možete odrediti i broj određenog stupca ili retka. Na primjer, ovako:

• tr: nth-child (even) {...} - odredite izmjenu redaka;
• tr: nth-child (1) {...} - određuje imovinu određenog niza;
• td: nth-child (even) {...} - oznaka isprepletanja stupaca;
• td: nth-child (1) {...} - određuje entitet određenog stupca.

Pored interleavinga i brojeva, možete odrediti prvi (td: first-child) ili zadnji (td: last-child).

Prostor između stanica

U CSS, dizajn tablica omogućuje uklanjanje praznina između stanica. Prema zadanim su postavkama. Na primjer, ako postavite okvir u tablicu bez postavljanja udaljenosti između granica, onda je to rezultat.

Slažem se, ne izgleda jako lijepo i nije prikladno za čitanje. Zbog toga će korisnici biti u očima nabora. Možete ukloniti te praznine ako ovdje pišete u stilu tablice:

granični kolaps: kolaps

Ali također se događa da se udaljenost, naprotiv, treba povećati. A veličina intervala može se odrediti između stupaca i između redaka. Da biste to učinili, navedite sljedeću vrijednost (umjesto kolapsa):

granični kolaps: odvojeno

No, ova radnja će naznačiti da morate razdvojiti ćelije. Kako ih razdvojiti označava dodatni entitet:

granični razmak: 20 piksela.

Ako želite odrediti različitu udaljenost između redaka i stupaca, navedene su dvije vrijednosti:

granični razmak: 10px20px.

Razlika u preglednicima

Imajte na umu da u CSS izgledu tablica može izgledati drugačije, ovisno o pregledniku. Posebno je loša situacija s starijim verzijama, koje inovacije u CSS-u ne podržavaju.

Gore je primjer debljine okvira za digitalne vrijednosti.

Evo primjera debljine okvira za konstante.

Stilovi okvira također su vrlo različiti.

Stoga, prilikom razvoja, uvijek pogledajte rezultat u različitim preglednicima.

U CSS-u preporučujemo izradu tablice s provjerom vrste preglednika. Najveći problem bio je s korisnicima starijih verzija Internet Explorera.

Vrlo napredni programeri mogu povezati potpuno različite CSS datoteke ovisno o pregledniku. I netko provodi provjere u svakom pojedinom stilu (klasi).

Većina problema pojavljuju se sjenama.

CSS: dizajn stolova, primjeri

Dizajn može biti vrlo raznolik. Sve ovisi o mjestu i njegovom dizajnu. Sve bi trebalo biti kombinirano, a ne šareno. Također, ukus developera također igra veliku ulogu. Osjećaj ljepote različit je za sve.

Dajemo primjere različitih tablica. Slika gore prikazuje upotrebu nagiba i igre s bojom pozadine i granica.

Mnogi će biti zainteresirani za primjer lijepog urednog dizajna koji neće oštetiti korisnike. Ova je opcija prikladna u gotovo svakoj situaciji.

Rubovi mogu biti zaobljeni. Izgleda prilično lijepo.

zaključak

Kao što možete vidjeti, za stvaranje izgleda tablica u CSS-u postoji ogroman broj alata. Svaki parametar također ima ogroman broj varijacija vrijednosti. Ako sve to odjednom upotrebljavate, možete stvoriti remek-djela. Pogotovo ako to učinite prilagodljiv dizajn u svim preglednicima.

Glavna stvar u registraciji je da ne pretjerati s efektima. Sve se mora učiniti umjereno. U početku dizajnerski planovi žele eksperimentirati i koristiti sve svoje znanje odjednom. Kao rezultat, tablice su superzasićena svojstva. Pokušajte izbjeći ove pogreške.

Štoviše, neki parametri mogu međusobno utjecati. Na primjer, nema potrebe za određivanjem boja pozadine ako je istodobno instalirana pozadinska slika koja će se preklapati navedene boje.