CSS: dizajn stolova. Primjeri dizajna

Stvaranje tablica pomoću CSS-a je zanimljiva i važna aktivnost. Pristup ovom pitanju 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 znači korištenje dizajna granica, pozadine stola, pozadine ćelija, jaz između njih i još mnogo toga. Razmotrimo najosnovnije.

Granica tablice

Stil CSS dizajna uvijek znači igranje s granicom. Prema zadanim postavkama sve tablice nisu obrubljene. To jest, to je 0 piksela. Ali to se može riješiti pomoću graničnih svojstava.

Možete odrediti vanjsku granicu za cijelu tablicu:

Tablica {border: 3px solid black; }

Zahvaljujući toj liniji, svi stolovi na web 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 drugačije određen.

Th, td {border: 3px kruto crno;}

Možete odrediti bilo koju debljinu i boju. Imajte na umu da granice ne udvostručuju kada stanice pristaju.

Čvrsta riječ znači čvrst 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.

Granična svojstva mogu se također navesti u uputama. Granica se može postaviti samo za gornju, donju, lijevu ili desnu stranu. Budući da u nekim slučajevima mogućnost s okvirom za cijelu tablicu ne odgovara odmah.

Tablica {border-top: 1px solid crvena; }

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

Naslov tablice

Naziv tablice može se odrediti pomoću oznake . U toj oznaci možete pisati u CSS mnogo svojstava za preciznije podešavanje. U CSS je dizajn stolova dobar jer možete upravljati elementima po želji.

Ovo se zaglavlje prikazuje 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 tablice može biti bilo koja boja ili uzorak. Boja je postavljena zastavom boja. Imena svojstava u potpunosti odgovaraju onima koji se koriste u govoru. To olakšava pamćenje mnogo puta.

Boja se može odrediti i po imenu i različitim kodovima. Osim toga, možete odrediti sljedeće:

• Transparentna - transparentnost elementa.
• Naslijeđe - 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 takva potreba ne postoji.

Osim toga, pozadina može biti slika. Da biste to učinili, stil propisuje sliku pozadinske slike. 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 ();
• Radijalni gradijent ();
• Ponavljanje-linearni-gradijent () i ponavljanje-radijalni-gradijent () - Ponavljanje gradijenta.

Pozadina ćelije

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

Osim preklapanja, možete odrediti 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 izmjene stupaca;
• Td: nth-child (1) {...} - određuje entitet određenog stupca.

Pored interleavinga i broja, možete odrediti prvi (td: first-child) ili posljednji (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, tada će biti takav rezultat.

Slažem se, ne izgleda jako lijepo i nije prikladno za čitanje. Zbog toga će korisnici biti u očima. Ove praznine možete ukloniti tako da u stilu tablice zapišete sljedeće:

Granični kolaps: kolaps

No, 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: odvojen

No, ova će akcija pokazivati da morate razdvojiti ćelije. Kako ih razdvojiti označava se 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: 10x20px.

Razlika u preglednicima

Imajte na umu da izgled CSS-a izgleda 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čuje se oblikovanje tablice provjerom vrste preglednika. Najveći problem imali su korisnici starijih verzija preglednika Internet Explorer.

Vrlo napredni programeri mogu povezati potpuno različite CSS datoteke ovisno o pregledniku. I netko provodi provjeru u svakom ili određenom stilu (klasi).

Većina problema javlja se sjenama.

CSS: dizajn stolova, primjeri

Dizajn može biti vrlo raznolik. Sve ovisi o mjestu i njegovom dizajnu. Sve treba biti kombinirano, a ne šareno. Također, okus programera ima veliku ulogu. Osjećaj ljepote je različit za svakoga.

Dajemo primjere različitih tablica. Slika iznad 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 vidite, stvaranje izgleda tablica u CSS-u ima ogroman broj alata. Svaki parametar također ima veliki broj varijacija vrijednosti. Ako sve to odjednom upotrebljavate, možete stvoriti remek-djela. Pogotovo ako napravite adaptivni dizajn za sve preglednike.

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 navođenjem pozadinske boje tablice, ako istodobno postoji pozadinska slika koja će preklapati navedenu boju.