Saznajte kako stvoriti granicu stola CSS u samo pet minuta
Možda ste čuli da se CSS i HTML tablice ne miješaju. To jednostavno nije točno. Da, upotreba HTML tablica za izgled više nije najbolja web-dizajnna praksa, jer je zamijenjena CSS stilovima izgleda, ali tablice su i dalje točne oznake za dodavanje tabličnih podataka na web stranicu.
Nažalost, jer se toliko web-stručnjaka oslobađa od tablica misleći da su to otrov, mnogi od tih stručnjaka imaju malo iskustva u radu s ovim zajedničkim HTML elementom i borbom kada ih moraju nositi na web stranici. Na primjer, ako imate tablicu na stranici i želite dodati interne retke na ćelije tablice.
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. Također možete koristiti HR oznaku za dodavanje redaka unutar pojedinačnih ćelija.
Da biste primijenili stilove navedene u ovom članku, očito biste trebali imati tablicu na svojoj web stranici. Tada biste trebali izraditi stilski stil kao unutarnji stilski list na glavi vašeg dokumenta (vjerojatno ćete to učiniti samo ako je vaša "stranica" jedinstvena stranica) ili je priložena kao dokument vanjskog stila (to je ono što vi učinit će ako web-lokacija sadrži više stranica - omogućavajući vam da stilizirate sve stranice s jednog vanjskog lista). Stavit ćete stilove za dodavanje interijera u stilski list.
Prije nego što počnete
Prvo morate odlučiti gdje želite da se linije pojavljuju u vašoj 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; ili
- 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, izradite taj efekt sličan rešetki, dodajte sljedeće u svoj stilski obrazac:
td, th {
granica: krut 1px crna;
}
Kako dodati linije između samo stupaca u tablici
Da biste dodali retke između stupaca (to stvara okomite crte koje se pokreću od vrha do dna na stupovima tablice), dodajte sljedeće u svoj stilski obrazac:
td, th {
granična lijeva: čvrsta 1 piksela crna;
}
Zatim, ako ne želite da se prikažu u prvom stupcu, morat ćete dodati klasu na te i td stanice. U ovom primjeru pretpostavljamo da imamo klasu bez granica na tim ćelijama i uklonimo granicu pomoću ovog specifičnijeg CSS pravila. Dakle ovdje je HTML klasa koju koristimo:
class = "ne-granica">
A onda možemo dodati sljedeći stil u naš stilski obrazac:
.no-border {
granična lijeva: ništa;
}
Kako dodati redove između redaka u tablici
Kao i dodavanjem redaka između stupaca to možete učiniti samo s jednim jednostavnim stilom dodanim na svoj stilski list. Donji CSS dodaje okomite crte između svakog retka naše tablice:
tr {
granični dno: čvrsta crna 1px;
}
Da biste uklonili granicu od dna tablice, ponovno biste dodali klase u tu oznaku tr:
class = "ne-granica">
U svoj stilski obrazac dodajte sljedeći stil:
.no-border {
granični dno: ništa;
}
Kako dodati linije između određenih stupaca ili redaka u tablici
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 mnogo je jednostavnije jer možete jednostavno dodati klasu u redak na koji ž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;
}
Kako dodati linije oko pojedinačnih ćelija u tablici
Da biste dodali linije oko pojedinačnih ćelija, dodajte klase ćelijama za koje želite obrubiti:
class = "border">
A zatim dodajte sljedeći CSS u svoj stilski obrazac:
. granica {
granica: krut 1px crna;
}
Kako dodati linije unutar pojedinačnih ćelija u tablici
Ako želite dodati retke unutar sadržaja ćelije, najlakši način da to učinite jest oznaka vodoravnog pravila (
).
Korisni savjeti
Ako primijetite praznine na vašoj granici, trebali biste provjeriti je li stil graničnog kolapsa postavljen na vašoj tablici. U tablicu stila dodajte sljedeće:
tablica {
granični kolaps: kolaps;
}
Možete izbjeći sve gore navedene CSS i upotrebljavati graničnu atribut u svojoj tablici. Shvatite, međutim, da je njegov atribut, iako ne obeshrabren, 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.