Uz veliki broj redova u tabeli, može biti teško međusobno upoređivati podatke iz različitih kolona. Ovo zahtijeva vizualno odvajanje jednog reda tablice od drugog, bilo korištenjem linija ili dodavanjem boje pozadine.
Prvo, pogledajmo opciju korištenja horizontalnih linija. Na sl. 1 pokazuje jedan od mogućih načina za fokusiranje pažnje na redove tabele. Svaka linija na vrhu i dnu je uokvirena linijom, zbog čega pogled posjetitelja klizi po njima i ne preskače na sljedeći red. U ovom slučaju, podaci koji se nalaze u kolonama su također povezani jedni s drugima, ali zbog istovremenog lijevog poravnanja i praznog prostora između kolona.
Podešavanje linija između linija je prilično jednostavno; da biste to učinili, dodajte atribut stila obruba na dnu TD selektoru. Ako postoji ivica oko stola, donja ivica će biti dvostruko deblja. U tom slučaju možete ukloniti donju liniju iz posljednjeg reda ili sakriti donju ivicu iz tablice (primjer 1).
Primjer 1: Odvajanje redova tablice linijama
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubini | 43 | 51 | 79 |
| Emeralds | 28 | 34 | 48 |
| Safiri | 29 | 57 | 36 |
U ovom primjeru, vertikalne linije između ćelija zaglavlja se dodaju pomoću parametra granice, koji se koristi za TH selektor. Ovo stvara prazan prostor od jednog piksela između ivice tabele i područja zaglavlja pozadine.
Upotreba boje proširuje mogućnosti za promjenu izgleda stola. Na primjer, boja pozadine parnih i neparnih redova može biti različita.
Da promijenimo boju pozadine potrebnih redova, uvest ćemo dodatnu klasu, nazvati je čak i početi je dodavati u parne redove tablice, odnosno u oznaku
Boja pozadine neparnih redova se određuje promjenom boje cijele tablice. Ali pošto je pojedinačna boja postavljena za selektivne redove (za koje je dodat parametar class="even"), ona se "preklapa" sa bojom pozadine tabele. Zbog toga se dobivaju naizmjenično obojene linije.
Primjer 2. Isticanje redova tablice bojom
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubini | 43 | 51 | 79 |
| Emeralds | 28 | 34 | 48 |
| Safiri | 29 | 57 | 36 |
| Ametisti | 23 | 64 | 97 |
U ovom primjeru, dvostruka linija na dnu tablice nije rezultat primjene svojstva border-collapse sa vrijednošću kolapsa na TABLE selektor. Ova opcija otkriva pojavu dvostrukih linija gdje se ćelije dodiruju i zamjenjuje ih pojedinačnim linijama. Imajte na umu da u različitim pretraživačima mogu postojati razlike u boji preostalih linija ako se boja ivice oko tabele ne poklapa sa bojom linija ispod redova.
Pozdrav, dragi čitaoci blog stranice. Odlučio sam napisati kratak post na temu korištenja CSS-a za poboljšanje iskustva posjetitelja stranice.
Niotkuda mi je pala na pamet misao da ako stavke u desnom meniju mog bloga oživite ga naizmjeničnim bojama pozadine(napravite različite boje za parne i neparne linije), ovo može poboljšati upotrebljivost. Ovdje polažem svoje nade u lakoću percipiranja velike količine informacija kada su podijeljene u blokove (kao što se događa, na primjer, kada koristite pasuse u tekstu).
Ova praksa se vrlo često koristi pri oblikovanju tabela, kada se želi povećati vidljivost informacija prikazanih u njima. U potrazi za rješenjem, pokazalo se da se ovaj problem može riješiti vrlo jednostavno korištenjem samog CSS-a.
Nema potrebe da se parni i neparni elementi liste označavaju klasama (desni meni radi po meni). Trebate samo dodati par linija koda koristeći pseudo-klasu nth-child u CSS datoteci, koji je odgovoran za stil stranice. Međutim, nth-child ima i puno drugih namjena, koje također neću propustiti spomenuti u postu.
Mogućnosti pseudorazreda n-to dijete i njegovo korištenje na stranici
Zapravo, nakon najave pseudorazreda nth-dijete, mogao bih završiti post, jer i sami možete proguglati dosta informacija o tome. Ali to nije naš put, tako da ćemo nastaviti. Dakle, prvo ću opisati svoje korake da pretvorim desni meni u „prugasti“. Dovoljno je bilo da se pomoću programskih alata ugrađenih u pretraživače (koji se pozivaju iz kontekstnog menija željenog elementa na web stranici odabirom stavke kao što je "Prikaži kod elementa") sazna gdje se u datoteci stila pojavljuju linije ovog lista je postavljena.
Princip rada s alatima za programere sličan je onome što sam opisao u članku o . Kliknite desnim tasterom miša na bilo koju stavku u levom meniju mog bloga i pogledajte rezultujući izveštaj u panelu koji se otvara:
Na lijevoj strani ćete vidjeti Html kod ovog elementa (zanima nas element sa LI tagovima - linija liste), a u desnoj koloni su CSS pravila koja pretraživač koristi da ga stilizira. Možete odmah saznati gdje se nalazi datoteka stila pomicanjem kursora miša na njeno ime.
U mom slučaju, ovo će biti fajl koji se može otvoriti povezivanjem na sajt preko FTP-a i praćenjem sledećeg puta (ne bih preporučio uređivanje fajlova šablona iz WordPress administratorske oblasti, jer ne postoji način da se napravi korak unazad, kao što je moguće, na primjer,).
/wp-content/themes
Zapravo, na alatnoj traci za programere u području CSS stilova, čak ćete pronaći liniju na kojoj je upisano željeno pravilo u datoteci stila. U mom slučaju to je 281 red. Stoga, otvorivši style.css u Notepad-u (dodijeljen mi je kao zadani uređivač za sve datoteke koje se pojavljuju u mašini stranice), odmah sam prešao na ovaj red.
I odmah ispod njega dodao sam još par pravila sa (ovo pravilo je odgovorno za promjenu boje pozadine desne trake menija kada je kursor miša direktno iznad nje - ovo čini meni "življim" ili tako nešto) i sa n-tim -dijete pseudo-klasa pomenuta gore. Ako smo već govorili o hovveru (pogledajte link iznad), onda ćemo sada govoriti o nth-dijeteu. Ako ste primijetili da je parametar 2n napisan u zagradama za ovu pseudo-klasu.
Nth-dijete (2n)
Uglavnom vrijednost ovog n-tog djeteta pseudo-klase se daje pomoću izraza: an+b, gdje su a i b cijeli brojevi, a n brojač koji uzima cjelobrojne vrijednosti od 0 i više: 0,1,2,3... U našem slučaju, kada promijenimo brojač n, dobićemo brojeve 0 , 2, 4, 6, itd. To znači da je svojstvo specificirano za ovu pseudo-klasu (u našem slučaju, ovo je pravilo za postavljanje pozadine linije liste pomoću ) na listi na #E4F2FA.
Ovaj heksadecimalni je najčešći. Da bih pronašao odgovarajuće boje, koristio sam program Contrast Analyzer 2.0 opisan na linku. Omogućava vam da uhvatite boju sa ekrana i uskladite njene svetlije tonove, što sam i uradio.
Za pozadinu trake menija, prilikom prelaska preko nje kursorom miša (hover pseudo-klase), odabrao sam još svjetliju nijansu iz istog reda.
Drugi primjeri korištenja nth-child
Ako želite promijeniti pozadinu ili na neki drugi način utjecati na izgled (na primjer, dodati dopunu, povećati font ili učiniti nešto drugo nepristojnije), upotrijebite izraz. Možete provjeriti da ćete zamjenom cijelih brojeva počevši od nule za n dobiti samo neparne brojeve kao rezultat. Možete koristiti obje opcije odjednom (za parne i neparne redove lista, tabela ili bilo šta drugo).
Više neki primjeri korištenja nth-child za isticanje raznih redova lista, tabela i sličnih elemenata:
- Da biste ismijavali neparne elemente, možete koristiti nth-child (odd) umjesto izraza prikazanog iznad, i nth-child (par) za parne elemente.
- Šta ako želite da promenite samo četvrti red? zatim dodajte u CSS pravilo pseudo-klasu nth-child (4) odvojeno dvotačkom.
- Želite li promijeniti izgled linija počevši od devetog? Nema problema - n-to dijete (n+9).
- Ako želite, naprotiv, da odaberete samo prvih devet elemenata, onda koristite konstrukciju nth-child (-n+9).
- Ako želite da odaberete elemente od devetog do osamnaestog, dodajte složenu pseudo-klasu:n-to-dijete (n+9):n-to-dijete (-n+18). Čista logika.
- Želite li učiniti istu stvar kao u prethodnom pasusu, ali označite samo parne redove u ovom rasponu? Nema problema - :nth-child (n+9):nth-child (-n+18):nth-child (par).
Pa, tu je. Stvar bi se mogla pokazati kao korisna. U svakom slučaju, bilo mi je od koristi.
Sretno ti! Vidimo se uskoro na stranicama blog stranice
Možda ste zainteresovani
Selektori pseudo-klasa i pseudo-elemenata u CSS-u (hover, first-child, first-line i drugi), odnosi između oznaka HTML koda 
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici 
CSS svojstva text-decoration, vertical-align, text-align, text-indent za ukrašavanje teksta u Html-u 
Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu 
Kako pronaći i ukloniti neiskorištene stilske linije (dodatne selektore) u CSS datoteci vaše stranice 
Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja HTML elemenata u CSS-u (pravila lijevo, desno, gore i dolje) Različiti stilovi za interne i eksterne veze putem CSS-a 
Prioriteti u Css-u i njihovo povećanje zbog Važno, kombinacija i grupisanje selektora, korisničkih i autorskih stilova 
Pravila fonta (težina, porodica, veličina, stil) i visina linije za stiliziranje fontova u CSS-u 
Float i clear u CSS - alatima za raspored blokova 
Čemu služi CSS, kako povezati kaskadne stilove sa HTML dokumentom i osnovna sintaksa ovog jezika 
Tag, klasa, Id i univerzalni selektori, kao i selektori atributa u modernom CSS-u
Ne mislite li da crno-bijeli sto izgleda pomalo dosadno? To i mi mislimo! Stoga ćemo u ovom tutorijalu govoriti o tome kako promijeniti boju tablice u HTML-u. Postoje tri opcije za dodavanje boje, svaka sa svojim svojstvom.
- Određivanje boje pozadine ćelija. To se radi korištenjem imovine boja pozadine.
- Određivanje boje teksta u ćelijama. To se radi korištenjem imovine boja.
- Određuje boju ivica ćelija. To se radi korištenjem imovine border-color.
Ranije se za promjenu boje koristio sažetiji oblik opisa okvira. Izgledala je ovako:
Ivica: 1px puna svijetlo siva
I zadnji dio je bio odgovoran za boju ovdje - lightrgay.
Postoje različiti načini za postavljanje značenja boja CSS. Pokazat ćemo vam kako se boja opisuje pomoću atributa.
Kako promijeniti boju ćelije
Pogledajmo kako izgleda kod CSS, koji specificira boju za ćeliju.
Td (boja pozadine: boja pozadine; )
Naravno, možete i promijeniti boje sto, i td, i th. Pokušajmo našoj tablici množenja dati solidniji izgled.
Dodajmo stilove za ćelije zaglavlja s oznakom th, kao i za dijagonalne ćelije koje sadrže kvadrate brojeva:
| * | 2 | 3 |
|---|---|---|
| 2 | 4 | 6 |
| 3 | 6 | 9 |
Rezultat u pretraživaču:
Kako promijeniti boju ivice u tabeli
Kao što ste već primijetili u gornjem primjeru, u tabeli smo promijenili boju ivice. Za ovo smo koristili graničnu imovinu. Postavlja parametre dolje navedenim redoslijedom:
- tip linije, u našem slučaju puna (puna)
- debljina linije, u našem slučaju 1px
- boja linije, u našem slučaju plava
Prisjetimo se još jednom kako izgleda postavljanje boje granice za ćeliju:
Td ( granica: 1px puna plava; )
Kako promijeniti boju reda u tabeli
Dakle, naučili smo kako promijeniti boje ćelija, kao i ćelije zaglavlja, koristeći CSS mogućnosti. Ako specificiramo stilove za oznake kao što je th ili td, onda biste trebali shvatiti da će se stilovi primjenjivati i na druge oznake.
Međutim, postoje situacije kada trebate promijeniti boju određene ćelije, nekoliko ćelija ili cijeli red. Šta učiniti u ovom slučaju? Ovdje trebate koristiti klase, kao i primijeniti njihove stilove. U praksi to izgleda ovako:
Zeleni red (boja pozadine:zelena; )
A da biste promijenili boju određenih linija koristeći ovu klasu, trebate učiniti sljedeće:
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
I rezultat u pretraživaču: 
Kako promijeniti boju teksta u tabeli
Da biste promijenili boju teksta u tabeli, koristite svojstvo boja. Možete ga primijeniti na razne elemente: tablicu, tr, th, td. Ovisno o tome, boja u odabranom elementu će se promijeniti. Na primjer, za cijelu tablicu ćemo postaviti boju fonta na zelenu:
Sto ( boja: zelena; ... )
Slično, možete promijeniti boju za pojedinačne ćelije. I ovim se završava ova lekcija, ne zaboravite da uradite domaći zadatak. Ćao svima!
Postalo je popularno, web dizajneri su uglavnom koristili metodu rasporeda tablica i postigli vrlo dobre rezultate.
Oznake koje se koriste za pravljenje tabele u html-u
sto- obavezna oznaka koja otvara i zatvara tabelu
natpis- opciona oznaka koja označava naslov tabele
th- opcionu oznaku, čije otvaranje i zatvaranje sadrže naziv kolone. Obično se pojavljuje podebljano
tr- obavezna oznaka koja otvara i zatvara liniju
td- obavezna oznaka koja označava otvaranje i zatvaranje ćelije u nizu
Primjer koda za jednostavnu tablicu
| Stobets 1 | Stobets 2 |
|---|---|
| Tekst u prvoj ćeliji | Tekst u drugoj ćeliji |
Prikazaće se pretraživač
Namjena tabela u html-u
Lekcija o stolovima je veoma važna! Zahvaljujući tabelama, možete poredati ne samo tekst, već i slike, linkove i još mnogo toga. U tabeli možete odrediti pozadini(ili njegovu boju), udubljenje, širina, granica I drugi parametri, što će mu dati lijep izgled. Tabela - Vaš prvi korak ka razumijevanju web dizajn! Ranije su mnoge stranice bile u potpunosti postavljene kao tabele, odnosno sve što je korisnik vidio (bočni meni, gornji meni, sadržaj) bio je sadržaj ćelija velike tabele.S tim u vezi, pređimo direktno na atribute koji čine sto lijepim...
Svojstva i parametri html tabela: uvlačenje, širina, boja pozadine, ivica (okvir)
U table tag postoje sljedeći atributi:širina- širina stola. može biti u pikselima ili % širine ekrana.
bgcolor- boja pozadine ćelija tabele
pozadini- ispunjava pozadinu stola uzorkom
granica- okvir i ivice u tabeli. Debljina je prikazana u pikselima
cellpadding- dopuna u pikselima između sadržaja ćelije i njene unutrašnje granice
Kao i prije, vrijednost atributa pišemo u navodnicima.
| Stobets 1 | Stobets 2 |
| |
| Stobets 1 | Stobets 2 |
Tekst u prvoj ćeliji prve kolone | Tekst u drugoj ćeliji druge kolone |
| Stobets 1 | Stobets 2 |
Tekst u prvoj ćeliji prve kolone | Tekst u drugoj ćeliji druge kolone |
| Stobets 1 | Stobets 2 |
| Stobets 1 | Stobets 2 |
Tekst u prvoj ćeliji prve kolone | Tekst u drugoj ćeliji druge kolone |
