CSS: oblikovanje tabel. Primeri oblikovanja

Izdelava tabel z uporabo CSS je zanimiva in odgovorna dejavnost. Pristop k temu podjetju mora biti kompetenten, ob poznavanju vseh možnosti slogov. Poleg tega morate imeti občutek lepote, da ne bi prestrašili obiskovalcev s svojo ustvarjalnostjo.

V tabelah lahko skoraj vse pretvorite. Lepa zasnova tabele CSS vključuje uporabo oblikovanja meja, ozadja tabele, ozadja celic, vrzeli med njimi in še veliko več. Menimo, da je najbolj osnovna.

Meja tabele

Stil CSS dizajna vedno pomeni igranje z mejo. Vse tabele ne privzamejo meje. To pomeni, da je 0 slikovnih pik. Toda to je mogoče popraviti z uporabo lastnosti meje.

Za celotno tabelo lahko določite zunanjo mejo:

tabela {border: 3px solid black-}

Zahvaljujoč tej vrstici bodo vse tabele na spletnem mestu, kjer se uporablja ta slog, imele črno obrobo. Upoštevajte, da je meja le na robovih, vendar ne znotraj tabele. Za celice in vrstice je okvir označen drugače.

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

Debelino in barvo lahko določite poljubno. Ne pozabite, da se meje ne poveča, ko se pridružite celicam.

Beseda solid pomeni trden dizajn. Določite lahko tudi druge vrednosti.

Najpogosteje se uporablja trdni okvir, saj izgleda privlačnejši in ne odvrača pozornosti od glavne vsebine spletnega mesta.

Značilnost meje je mogoče določiti tudi v navodilih. Mejo lahko nastavite samo za zgornjo, spodnjo, levo ali desno stran. Ker v nekaterih primerih možnost z okvirjem za celotno tabelo ni primerna hkrati.

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

Torej lahko okvir nastavite samo na vrhu tabele. Podobno, za vse druge stranke, preprosto namesto vrha napišite: desno, levo ali spodaj.

Naslov tabele

Naslov tabele je mogoče označiti z oznako . To oznako lahko nastavite v CSS veliko lastnosti za bolj natančno prilagajanje. V CSS je oblikovanje tabel dobro, ker lahko manevrirate elemente, kot želite.

Ta glava je prikazana enako kot standardna v knjigah (na primer "tabela 1").

Položaj tega glave lahko določite tudi z lastnostmi na strani z napisom (zgoraj ali spodaj). Levo ali desno poravnavo določi lastnost poravnave besedila.

Ozadje tabele

Ozadje tabele je lahko katera koli barva ali vzorec. Barvo nastavi lastnost barve ozadja. Imena lastnosti popolnoma ustrezajo tistim, ki se uporabljajo v govoru. To olajša zapomnitev večkrat.

Barva lahko določi bodisi ime bodisi različno kodiranje. Poleg tega lahko določite naslednje:

• Transparentna - preglednost elementa.
• Dedovanje - barva je enaka kot starševski element.
• Začetna vrednost je privzeta vrednost.

Različica s preglednostjo se lahko uporablja v tistih primerih, ko so vse tabele v besedilu v datoteki CSS v eni barvi, vendar v tem primeru ni potrebe.

Poleg tega je ozadje lahko tudi slika. Če želite to narediti, je lastnost ozadja sloga nastavljena v slogu. Pot je označena takole:

url (»URL«)

Pot do datoteke je lahko relativna ali absolutna.

Zapleteno izpolnjevanje lahko naredimo z gradientom:

• linearni gradient ();
• radialni gradient ();
• ponavljajoči-linearni-gradient () in ponavljajoči-radialni-gradient () - ponovitev gradienta.

Ozadje celice

Poleg ozadja kot celote lahko podate tudi izmenično ozadje v stolpcih ali vrsticah. Za registracijo se ta lastnost uporablja zelo pogosto, saj vidna ločitev vrstic olajša branje informacij.

Poleg rotacije lahko določite tudi številko določenega stolpca ali vrstice. Na primer:

• tr: nth-child (celo) {...} - določi izmenjavo vrstic;
• tr: nth-child (1) {...} - določa lastnost določenega niza;
• td: nth-child (celo) {...} - navedba prepletanja stolpcev;
• td: nth-child (1) {...} - določa lastnost določenega stolpca.

Poleg prepletanja in številk lahko navedete prvi (td: prvi otrok) ali zadnji (td: zadnji otrok).

Razdalja med celicami

V CSS, oblikovanje tabel vam omogoča, da odstranite vrzeli med celicami. Privzeto so. Če na primer nastavite okvir v tabeli brez nastavitve razdalje med robovi, je to rezultat.

Se strinjam, ne izgleda zelo lepo in ni primeren za branje. Uporabniki bodo zaradi tega vznemirili oči. Te vrzeli lahko odstranite s pisanjem v slogu tabele v tej vrstici:

meja-propad: kolaps

Toda tudi to se zgodi, da je treba razdaljo, nasprotno, povečati. Velikost intervalov je mogoče določiti tako med stolpci kot med vrsticami. Če želite to narediti, navedite naslednjo vrednost (namesto strni):

mejni propad: ločen

Vendar to dejstvo kaže, da morate ločiti celice. Kako jih ločite, označuje dodatna lastnost:

mejni razmik: 20px.

Če želite določiti drugačno razdaljo med vrsticami in stolpci, sta določeni dve vrednosti:

mejni razmik: 10px20px.

Razlika v brskalnikih

Upoštevajte, da se lahko pri CSS videz tabel razlikuje, odvisno od brskalnika. Stanje je še posebej slabo pri starejših različicah, ki jih inovacije v CSS ne podpirajo.

Zgoraj je primer debeline okvira za digitalne vrednosti.

Tukaj je primer debeline okvira za konstante.

Slogi okvirja so prav tako zelo različni.

Zato pri razvoju vedno poglejte rezultat v različnih brskalnikih.

V CSS je priporočljivo, da naredite tabelo s preverjanjem tipa brskalnika. Največja težava je bila pri uporabnikih s starejšimi različicami Internet Explorerja.

Zelo napredno razvijalci lahko povezujejo povsem različne CSS datoteke, odvisno od brskalnika. In nekdo preveri v vsakem ali katerem koli posebnem slogu (razred).

Večina težav se pojavlja s sencami.

CSS: oblikovanje tabel, primerov

Oblika je lahko zelo raznolika. Vse je odvisno od mesta na splošno in njegovega oblikovanja. Vse je treba kombinirati in ne barvita. Tudi okus razvijalcev ima tudi veliko vlogo. Občutek lepote je drugačen za vse.

Navajamo primere različnih tabel. Zgornja slika prikazuje uporabo nagiba in igre z barvo ozadja in meja.

Mnogi bodo zainteresirani za primer lepega čudovitega oblikovanja, ki ne bo zmanjšal oči za uporabnike. Ta možnost je primerna v skoraj vseh primerih.

Robovi se lahko zaokrožijo. Izgleda precej lepo.

Zaključek

Kot lahko vidite, za ustvarjanje videza tabel v CSS obstaja veliko orodij. Vsak parameter ima tudi veliko število variant vrednot. Če vse to uporabljate hkrati, lahko ustvarite mojstrovine. Še posebej, če to storite prilagodljiv dizajn pod vsemi brskalniki.

Glavna stvar pri registraciji ni pretiravati z učinki. Vse je treba storiti zmerno. Sprva načrtovalci postavitve radi eksperimentirajo in uporabljajo vse svoje znanje hkrati. Posledično so tabele prenasičene lastnosti. Poskusite se izogniti tem napakam.

Poleg tega lahko nekateri parametri vplivajo drug na drugega. Na primer, ni potrebe po določitvi barva ozadja tabele, če je istočasno nameščena ozadna slika, ki bo prekrivala določeno barvo.