Možda ste čuli da se CSS i HTML tablice ne miješaju. Ovo nije slučaj. Da, upotreba HTML tablica za izgled više nije najbolja praksa za web dizajn jer su zamijenjena stilovima CSS izgleda, ali tablice su i dalje točna oznaka koja se upotrebljava za dodavanje tabličnih podataka na web stranicu.
Budući da se toliko web-stručnjaka sramežljivi od tablica misleći da nisu ništa drugo od problema, mnogi od tih stručnjaka imaju malo iskustva u radu s ovim zajedničkim HTML elementom i oni se bore kada moraju dodati interne linije na ćelije tablice na web stranici.
CSS tablice granica
Kada upotrebljavate CSS za dodavanje granica u tablice, ona samo doda granicu oko vanjske strane tablice. Ako želite dodati interne linije pojedinačnim ćelijama te tablice, trebate dodati granice u unutarnje CSS elemente. HR oznaku možete upotrijebiti za dodavanje linija unutar pojedinačnih ćelija.
Da biste primijenili stilove koji su obuhvaćeni ovim vodičem, trebate imati tablicu na web stranici. Zatim izradite obrazac stila kao interni stilski list na glavi vašeg dokumenta (ako se bavite samo jednom stranicom) ili priloženom dokumentu kao vanjski stilski list (ako web stranica ima više stranica). Stavili ste stilove za dodavanje interijera u stilski list.
Prije nego što počnete
Odlučite gdje želite da se crte pojavljuju u tablici. Imate nekoliko opcija, uključujući:
- Okružujući sve stanice da oblikuju rešetku
- Postavljanje linija između samo stupaca
- Samo između redaka
- Između određenih stupaca ili redaka.
Također možete pozicionirati linije oko pojedinačnih ćelija ili unutar pojedinačnih ćelija.
Kako dodati linije oko svih ćelija u tablici
Da biste dodali linije oko svih ćelija u tablici, stvarajući efekt rešetke, dodajte sljedeće na svoj stilski obrazac:
td, th {granica: krut 1px crna;} Da biste dodali retke između stupaca za stvaranje vertikalnih crta koje se pokreću od vrha prema dnu na stupce tablice, dodajte sljedeće na svoj stilski list: td, th {granična lijeva: čvrsta 1 piksela crna;} Ako ne želite da se prve stupce pojave okomite crte, dodajte klase u th i td Stanice. U ovom primjeru, pretpostavite klasu bez granica na tim ćelijama i ukloniti granicu s pravilom CSS. HTML klasa koju koristite je: class = "ne-granica"> Zatim dodajte sljedeći stil u stilski list: .no-border {granična lijeva: ništa;} Kao i dodavanjem redaka između stupaca, možete dodati vodoravne linije između redaka s jednim jednostavnim stilom dodanim na list stila, kako slijedi: tr {granični dno: čvrsta crna 1px;} Da biste uklonili granicu od dna tablice, ponovno biste dodali razred označiti: class = "ne-granica"> U svoj stilski obrazac dodajte sljedeći stil: .no-border {granični dno: ništa;} Ako želite samo linije između određenih redaka ili stupaca, morate koristiti klasu na tim ćelijama ili redcima. Dodavanje retka između stupaca nešto je teže nego između redaka jer morate dodati klasu u svaku ćeliju tog stupca. Ako se tablica automatski generira iz nekog CMS-a, to možda nije moguće, ali ako ste ručno označili stranicu, možete dodati odgovarajuće klase po potrebi da biste postigli taj efekt. class = „strana granica”> Dodavanje redaka između redaka lakše je jer možete dodati klasu u redak kojim želite liniju. class = "border-bottom"> Zatim dodajte CSS u svoj stilski obrazac: granična strana {granična lijeva: čvrsta 1 piksela crna;}. granični dno {granični dno: čvrsta crna 1px;} Da biste dodali linije oko pojedinačnih ćelija, dodajte klase ćelijama za koje želite obrubiti: class = "border"> Zatim dodajte sljedeći CSS u svoj stilski list: . granica {granica: krut 1px crna;} Ako želite dodati retke unutar sadržaja ćelije, najlakši način da to učinite jest oznaka vodoravnog pravila (). Ako primijetite praznine na vašoj granici, pobrinite se da je stil na rubu kolapsa postavljen na stolu. Dodajte sljedeće na svoj stilski list: tablica {granični kolaps: kolaps;} Možete izbjeći sve i upotrijebiti granični atribut u svojoj tablici. Shvatite, međutim, da je ovaj atribut, iako nije obustavljen, znatno manje fleksibilan od CSS-a, budući da možete definirati samo širinu granice i može ga imati samo oko svih ćelija tablice ili ništa. Kako dodati linije između samo stupaca u tablici
Kako dodati redove između redaka u tablici
Kako dodati linije između određenih stupaca ili redaka u tablici
Kako dodati linije oko pojedinačnih ćelija u tablici
Kako dodati linije unutar pojedinačnih ćelija u tablici
Korisni savjeti
