Styling tablice s CSS - Lekcijazanimljivo i odgovorno. Ovom poslu morate pristupiti kompetentno, sa poznavanjem svih mogućnosti stilova. Osim toga, morate imati osjećaj za ljepotu kako ne biste svojom kreativnošću uplašili posjetitelje stranice.
Gotovo sve se može transformirati u tablice.Stiliziranje CSS tablica lijepo uključuje oblikovanje obruba, pozadina tablice, pozadine ćelija, razmaka i još mnogo toga. Razmotrimo najosnovnije.
Granica tablice
Stil CSS tablice uvijek podrazumijevaigra s obrubom (okvirom). Sve tablice nisu uokvirene prema zadanim postavkama. To jest, jednako je 0 piksela. Ali to se može popraviti graničnim vlasništvom.
Možete odrediti vanjski obrub za cijelu tablicu:
tablica {obrub: 3px puna crna; }
Zahvaljujući ovoj liniji, sve tablice na stranici imajugdje se koristi ovaj stil imat će crni obrub. Imajte na umu da je obrub samo na rubovima, a ne unutar tablice. Za ćelije i linije okvir se postavlja drugačije.
th, td {bord: 3px puna crna;}
Može se odrediti bilo koja debljina i boja. Imajte na umu da se granice ne udvostručuju kada su ćelije usidrene.
Riječ solid označava čvrstu umjetnost. Druge vrijednosti također se mogu navesti.
Najčešće se koristi čvrsti obrub, jer izgleda privlačnije i ne odvlači pozornost s glavnog sadržaja web-mjesta.
Granično svojstvo također se može odrediti pomoćusmjerovima. Granica se može postaviti samo za gornju, donju, lijevu ili desnu stranu. Budući da u nekim slučajevima opcija s okvirom za cijeli stol odjednom nije prikladna.
tablica {border-top: 1px puna crvena; }
Na ovaj način možete postaviti samo obrub za vrh tablice. Isto tako za sve druge strane, samo umjesto gore pišemo: desno, lijevo ili dolje.
Zaglavlje tablice
Naslov tablice može se odrediti pomoću oznake<naslov>. Ova oznaka može imati mnoga svojstva u CSS-u za bolje podešavanje. Lijepa stvar kod CSS-a je što možete manevrirati elementima onako kako želite.
Ovaj se naslov prikazuje na isti način kao i obično u knjigama (na primjer, "Tablica 1").
Također možete odrediti mjesto ovog natpisa sa svojstvom caption-side (gore ili dolje). Lijevo ili desno poravnanje određeno je svojstvom text-align.
Pozadina stola
Pozadina stola može biti boja ilicrtanje. Boja je postavljena svojstvom background-color. Nazivi svojstava u potpunosti su u skladu s onima koji se koriste u govoru. To olakšava višestruko pamćenje.
Boja se može odrediti i imenom i raznim kodiranjem. Osim toga, možete odrediti sljedeće:
- Transparent - prozirnost elementa.
- Naslijediti - boja je ista kao i roditeljski element.
- Početno je zadano.
Opcija s transparentnošću može se koristiti u slučajevima kada su sve tablice u tekstu u CSS datoteci oblikovane istom bojom, ali u ovom slučaju nema takve potrebe.
Osim toga, pozadina može biti slika. Da biste to učinili, svojstvo background-image je napisano u stilu. Put je označen ovako:
url ("URL")
Put do datoteke može biti relativan ili apsolutan.
Složenije popunjavanje može se izvesti s gradijentom:
- linearni gradijent ();
- radijalni gradijent ();
- ponavljajući-linearni-gradijent () i ponavljajući-radijalni-gradijent () - ponovite gradijent.
Pozadina stanica
Uz pozadinu u cjelini, možete odrediti izmjeničnu pozadinu u stupcima ili recima. Ovo svojstvo se vrlo često koristi za dekoraciju, budući da vizualno razdvajanje linija olakšava čitanje informacija.
Osim preplitanja, možete odrediti i broj određenog stupca ili retka. Na primjer ovako:
- tr: nth-child (parno) {...} - specificiranje preplitanja redaka;
- tr: nth-child (1) {...} - specificiranje svojstva određenog niza;
- td: nth-child (parno) {...} - specificiranje izmjene stupaca;
- td: nth-child (1) {...} - specificiranje svojstva određenog stupca.
Osim izmjene i brojeva, možete odrediti - prvi (td: first-child) ili zadnji (td: last-child).
Razmak između stanica
U CSS-u, stilske tablice omogućuju vam uklanjanje praznina između ćelija. Standardno su tamo. Na primjer, ako postavite obrub u tablici bez postavljanja udaljenosti između granica, dobit ćete sljedeći rezultat.
Slažem se, ne izgleda baš lijepo i nije lako za čitanje. Korisnici će zbog toga dobiti mreškanje u očima. Te praznine možete ukloniti pisanjem sljedećeg retka u stilu tablice:
granica-kolaps: kolaps
Ali također se događa da je udaljenost, naprotiv, potrebnapovećati. Štoviše, veličina praznina može se odrediti i između stupaca i između redaka. Da biste to učinili, navedite sljedeću vrijednost (umjesto sažimanja):
granica-urušavanje: odvojeno
Ali ova radnja će ukazati na to da trebate podijeliti ćelije. Kako ih točno odvojiti naznačeno je dodatnim svojstvom:
razmak obruba: 20px.
Ako trebate navesti različitu udaljenost između redaka i stupaca, tada su navedene dvije vrijednosti:
razmak obruba: 10px20px.
Razlika u preglednicima
Imajte na umu da CSS tablice mogu izgledati drugačije ovisno o pregledniku. Posebno je loša situacija sa starijim verzijama, koje ne podržavaju inovacije u CSS-u.
Gore je primjer debljine obruba za numeričke vrijednosti.
Ispod je primjer širine okvira za konstante.
Stilovi obruba također su vrlo različiti.
Stoga, prilikom razvoja, uvijek gledajte rezultat u različitim preglednicima.
U CSS-u se preporuča dizajnirati tablice s provjerom tipa preglednika. Posebno velik problem je nekada bio kod korisnika sa starijim verzijama Internet Explorera.
Vrlo napredni programeri mogu uključiti potpuno različite CSS datoteke ovisno o pregledniku. I netko provjerava svaki ili bilo koji određeni stil (klasu).
Većina problema nastaje sa sjenama.
CSS: izgled tablice, primjeri
Evo primjera raznih tablica. Gornja slika prikazuje korištenje nagiba i poigravanje bojama pozadine i obruba.
Mnogi će ljudi biti zainteresirani za primjer lijepog, urednog dizajna koji neće povrijediti oči korisnika. Ova je opcija prikladna u gotovo svakoj situaciji.
Rubovi mogu biti zaobljeni. Izgleda prilično lijepo.
zaključak
Kao što vidite, za stiliziranje izgleda stolovaCSS ima ogroman broj alata. Svaki parametar također ima ogroman broj opcija vrijednosti. Ako sve ovo koristite odjednom, možete stvoriti remek-djela. Pogotovo ako napravite responzivni dizajn za sve preglednike.
Glavna stvar pri dizajniranju je ne pretjerivatiučinci. Sve treba raditi umjereno. U početku, dizajneri izgleda vole eksperimentirati i koristiti svo svoje znanje odjednom. Kao rezultat toga, tablice su prezasićene svojstvima. Pokušajte izbjeći ove pogreške.
Štoviše, neki parametri mogu ometati jedni druge. Na primjer, nema potrebe specificirati boju pozadine tablice, ako u isto vrijeme postoji i pozadinska slika koja će se preklapati s navedenom bojom.
