Saznajte kako da kreirate CSS tablicu za samo pet minuta
Možda ste čuli da se CSS i HTML tabele ne mešaju. Ovo jednostavno nije tačno. Da, koristeći HTML tablice za izgled više nije najbolja praksa za web dizajn, već su zamijenjena stilovima rasporeda CSS-a, ali tabele su i dalje ispravna oznaka koja se koristi za dodavanje tabelarnih podataka na web stranicu.
Nažalost, zbog toga što se mnogi stručnjaci weba sklanjaju od tablica koji misle da su otrov, mnogi od tih profesionalaca imaju malo iskustva u radu sa ovim zajedničkim elementom HTML-a i borbom kada moraju da se bave njima na web stranici. Na primjer, ako imate tabelu na stranici i želite dodati interne linije u ćelije tablice.
CSS table tabele
Kada koristite CSS da dodate granice u tabele, on dodaje samo granicu oko spoljne strane tabele. Ako želite dodati interne linije pojedinačnim ćelijama ove tabele, potrebno je dodati granice unutrašnjim CSS elementima. Možete koristiti i HR tag za dodavanje linija unutar pojedinačnih ćelija.
Da biste primenili stilove obuhvaćene u ovom članku, očigledno imate tabelu na vašoj web stranici. Tada biste trebali napraviti stilski stil kao interni stilski stil u glavnom dijelu vašeg dokumenta (verovatno ćete to učiniti samo ako je vaša stranica jedna stranica) ili je priložena dokumentu kao spoljašnji stilski stil (ovo je ono što vi će učiniti ako je vaš sajt više stranica - omogućavajući vam da stišete sve stranice sa jednog spoljnog lista). Postavićete stilove da dodate unutrašnje linije u taj stilski stil.
Pre nego što počnete
Prvo morate odlučiti gdje želite da se linije pojavljuju u vašoj tabeli. Imate nekoliko opcija, uključujući:
- Oko svih ćelija da se formira mreža;
- Postavljanje linija između samo stupaca;
- Između redova; ili
- Između određenih kolona ili redova.
Takođe možete pozicionirati linije oko pojedinačnih ćelija ili unutar pojedinačnih ćelija.
Kako dodati linije oko svih ćelija u tabeli
Da biste dodali linije oko svih ćelija u vašoj tablici, kreirajući takav efekat na mrežu, u svoj stilski stil dodajte sledeće:
td, th {
granica: čvrsta 1px crna;
}
Kako dodati linije između kolona u tabeli
Da biste dodali linije između stupaca (ovo stvara vertikalne linije koje se kreću od vrha do dna na stupcima tablice), u svoj stilski stil dodajte sljedeće:
td, th {
granična leva: čvrsta 1px crna;
}
Zatim, ako ne želite da se pojavljuju u prvoj koloni, potrebno je dodati klasu za te i td ćelije. U ovom primjeru pretpostavljamo da imamo klase bez granica na tim ćelijama i uklanjamo granicu sa ovim specifičnim CSS pravilom. Dakle, ovdje je HTML klasa koju bismo koristili:
class = "bez granica">
A onda ćemo dodati sledeći stil našem listu stilova:
.no-granica {
granica-lijevo: nema;
}
Kako dodati linije između redova u tabeli
Kao i dodavanjem linija između stupaca, možete to učiniti samo jednim jednostavnim stilom koji je dodan u svoj stilni list. Donji CSS bi dodao vertikalne linije između svakog redova naše tabele:
tr {
granična dna: čvrsta 1px crna;
}
I da biste uklonili granicu sa dna tabele, ponovo biste dodali klasu za tu oznaku tr:
class = "bez granica">
Dodajte sledeći stil u svoj stilski stil:
.no-granica {
border-bottom: nema;
}
Kako dodati linije između određenih kolona ili redova u tabeli
Ako želite samo linije između određenih redova ili kolona, morate koristiti te klase na tim ćelijama ili redovima. Dodavanje linije između stupaca je nešto teže nego između redova, jer morate dodati klasu u svaku ćeliju u tom stupcu. Ako se vaša tabela automatski generira iz neke vrste CMS-a , to možda neće biti moguće, ali ako ručno šifrujete stranicu, možete dodati odgovarajuće razrede po potrebi kako biste postigli ovaj efekat.
class = "side-border">
Dodavanje linija između redova je mnogo lakše, jer možete samo dodati klasu u red u koji želite da se linija uključi.
class = "border-bottom">
Zatim dodajte CSS u svoj stilni list:
.border-side {
granična leva: čvrsta 1px crna;
}
.border-bottom {
granična dna: čvrsta 1px crna;
}
Kako dodati linije oko pojedinačnih ćelija u tabeli
Da biste dodali linije oko pojedinačnih ćelija, dodate klase ćelijama kojima želite granicu:
class = "border">
Zatim dodajte sledeće CSS u svoj stilski stil:
.border {
granica: čvrsta 1px crna;
}
Kako dodati linije unutar pojedinačnih ćelija u tabeli
Ako želite dodati linije unutar sadržaja ćelije, najlakši način za to je horizontalna oznaka pravila (
).
Korisni saveti
Ako primetite praznine u vašim granicama, treba da budete sigurni da je stil stajanja granica postavljen na vašu tabelu. Dodajte sledeće u svoj stilski stil:
tabela {
granični kolaps: kolaps;
}
Možete izbjeći sve navedene CSS i koristiti atribut granice u svojoj tablici. Shvatite, međutim, da njegov atribut, iako nije zastario, je znatno manje fleksibilan od CSS-a, jer možete samo definirati širinu granice i to može imati samo oko svih ćelija tabele ili nijedne.