Kada radite sa HTML-om (Hypertext Markup Language) i drugim jezicima za označavanje, kao što je XML, naići ćete na razne atribute i oznake. Tabele su jedan od ključnih atributa koje treba koristiti kako bi se korisnicima olakšalo pregledanje, poređenje i analiza većih količina podataka.
Upotrebom tabela, korisnici mogu brzo da uoče najvažnije tačke, zaključke ili rezultate, bez potrebe da čitaju ceo sadržaj. Za stilizovanje i prilagođavanje izgleda tabela, možete koristiti CSS.
Postoji nekoliko razloga zašto biste želeli da stilizujete tabelu u vašoj aplikaciji:
- Poboljšanje vizuelnog izgleda: Osnovne tabele mogu izgledati monotono i jednostavno. Stilizovanjem se poboljšava njihov izgled i čine se privlačnijim korisnicima.
- Povećanje pristupačnosti: Stilizovane tabele mogu biti prilagođene i osobama sa invaliditetom.
- Unapređenje čitljivosti: Različitim tehnikama stilizovanja olakšava se korisnicima da brzo pregledaju podatke predstavljene u tabelama.
- Brendiranje: Dosledna upotreba fontova i boja u tabelama kroz celu aplikaciju jača identitet brenda.
- SEO optimizacija: Organizovanje podataka u tabelarnom formatu može poboljšati rangiranje vaše web stranice na pretraživačima.
Kreiranje osnovne tabele sa HTML-om
Da bismo prikazali kako tabela funkcioniše u HTML-u, kreiraćemo projektni folder. U njemu ćemo napraviti dve datoteke: `index.html`, koja će sadržati naš HTML kod, i `styles.css`, u kojoj će biti CSS kod za stilizovanje.
Ako želite da pratite korake, koristite sledeće komande za početak:
mkdir Stilizovanje-HTML-Tabela
cd Stilizovanje-HTML-Tabela
touch index.html styles.css
Sada imamo osnovni projektni folder spreman za kreiranje HTML tabela. Prikazaćemo različite programske jezike, njihove tipične upotrebe i primere kompanija koje ih koriste.
Za kreiranje HTML tabele, svi podaci moraju biti unutar oznake `
`.
U vašoj HTML datoteci, kreirajte osnovnu strukturu HTML dokumenta. Dodajte sledeći kod unutar oznake „:
| Jezik | Uobičajena upotreba | Kompanije koje koriste |
|---|---|---|
| Java | Web aplikacije, Android aplikacije, poslovne aplikacije | Google, Amazon, LinkedIn |
| Python | Nauka o podacima, web razvoj, automatizacija | Google, Dropbox, Spotify |
| JavaScript | Web razvoj, front-end razvoj, skriptovanje u pretraživaču | PayPal, Facebook, Netflix |
| C++ | Razvoj igara, sistemsko programiranje, ugrađeni sistemi | Tesla, Microsoft, Adobe |
| Swift | iOS razvoj, macOS razvoj | Apple |
| PHP | Web razvoj, skriptovanje na serverskoj strani, CMS-ovi | WordPress, Wikipedia, Yahoo |
Ako pažljivo pogledate ovu tabelu, primetićete nekoliko dodatnih oznaka unutar `
| ` i ` | `. |
|---|
Ove oznake imaju sledeće funkcije:
- `
` (red tabele) je uvek unutar elementa ` `. Oznaka `
` može sadržati jedan ili više elemenata ` ` i ` `. - `
` (zaglavlje tabele) se nalazi unutar oznake ` `. Njegov sadržaj je po defaultu podebljan. - `
` (podaci tabele) opisuje sadržaj podataka u ćelijama tabele.
Kada prikažete gornji kod u pretraživaču, dobićete osnovnu tabelu bez stilizovanja.
CSS svojstva koja se koriste za stilizovanje tabela
Tabela koju smo napravili je funkcionalna, ali joj nedostaje stilizacija. Za postizanje željenih vizuelnih efekata, koristićemo CSS.
Sećate se `styles.css` datoteke koju smo kreirali? Sada ćemo je koristiti. Prvo je potrebno uvesti CSS datoteku u HTML datoteku. To se postiže dodavanjem sledećeg reda u odeljak `
Sada smo spremni za stilizovanje tabele. Možemo je stilizovati na sledeći način:
#1. Granica
Možemo dodati granicu oko svih ćelija u tabeli. To se postiže definisanjem svojstva `border` na elementima `
th, td {
border: 2px solid orange;
}
Vrednost granice je postavljena na 2 piksela, a boja je narandžasta.
Nakon osvežavanja stranice, granice će biti vidljive.
#2. `border-collapse`
Na prethodnom snimku ekrana, primetno je da postoji razmak između granica svake ćelije. Svojstvo `border-collapse` definiše da li susedne ćelije u tabeli treba da dele ivicu.
Ako želite da ćelije dele ivicu, dodajte sledeći kod u CSS datoteku:
table {
border-collapse: collapse;
}
Kada osvežite stranicu, videćete da ćelije dele ivice.
Ako želite da ćelije imaju odvojene ivice, dodajte sledeći kod u CSS datoteku:
table {
border-collapse: separate;
}
Izgled će se promeniti i ćelije će imati odvojene ivice.
#3. `border-spacing`
Svojstvom `border-spacing` se može dodati mali prostor između ćelija u tabeli. Definišemo ovo pravilo unutar klase `table` u CSS datoteci.
Da bi ovo svojstvo funkcionisalo, potrebno je koristiti `border-collapse: separate;`.
Klase `table` može izgledati ovako:
table {
border-collapse: separate;
border-spacing: 3px;
}
Granice ćelija će imati razmak od 3 piksela.
Tabela će izgledati sa razmakom između ćelija.
#4. `table-layout`
Svojstvo `table-layout` određuje način prikazivanja tabele. Možete imati tabele koje uvek imaju istu širinu, ili tabele koje se menjaju na osnovu sadržaja.
Ako želimo da ćelije budu slične veličine, svojstvo `table-layout` postavljamo na `fixed`.
table-layout: fixed;
Naš konačni kod u klasi `table` će biti:
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Ako želimo ćelije čija se veličina menja na osnovu sadržaja, svojstvo `table-layout` postavljamo na `auto`.
table-layout: auto;
Konačna klasa `table` u CSS kodu će biti:
Obratite pažnju na poslednju ćeliju u tabeli, gde sam dodao reči „MailChimp i još mnogo toga“.
Sada se vidi da su ćelije u poslednjem redu veće od ostalih, jer je izgled tabele fleksibilan i zavisi od sadržaja.
Stilizovanje koje smo do sada primenili odnosilo se na celu tabelu. Sada se možemo fokusirati na pojedinačne klase, menjajući boju pozadine, font i poravnanje teksta za redove, ćelije ili zaglavlja.
Ova svojstva možemo stilizovati na sledeći način:
#5. Boja pozadine
Možemo promeniti boju pozadine prvog reda u žuto-zelenu. Koristićemo selektor pseudo-klase `:first-child` za postizanje ovog cilja.
Dodajte sledeći kod u svoj CSS kod:
tr:first-child {
background-color: yellowgreen;
}
Krajnji rezultat će izgledati ovako:
#6. Font
Možemo promeniti stil ili veličinu fonta određenih redova, kolona ili ćelija u tabeli.
Promenićemo stil fonta u poslednjoj koloni na stranici (Kompanije koje koriste).
Sadržaj u ovoj koloni će biti ispisan kurzivom, ciljajući selektor klase `td:last-child`. Dodajte sledeći kod u CSS datoteku:
td:last-child {
font-style: italic;
}
Rezultat će biti ovakav kada osvežite stranicu:
Takođe, možemo promeniti boju i veličinu fonta prve kolone, kako bismo je istakli.
Dodajte sledeći kod u CSS datoteku:
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Kada osvežite stranicu, primetićete da sadržaj prve kolone (Jezik) ima veću veličinu fonta, crvene je boje i podebljan.
Kako učiniti tabelu responzivnom
Tabela koju smo napravili možda neće biti responzivna na malim ekranima. Možete koristiti Chrome-ove alatke za programere, ili neki spoljni alat za testiranje responsivnosti koda.
Postoji nekoliko pristupa, ali pokrićemo samo jedan.
Pratite sledeće korake:
- Podesite širinu elementa `
` u kodu:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- Postavite prelom reči (word-break) na `td` i `th`, kako bi se duge reči prikazale unutar ćelije:
th, td {
border: 2px solid orange;
word-break: break-word;
}
Najbolje prakse za stilizovanje tabela
CSS može biti zabavan, posebno kada znate kako se koristi. Ovo su neke od najboljih praksi koje obezbeđuju da dobijete najbolje rezultate kada stilizujete tabele:
- Koristite eksterni stilski list: Imali smo opciju korišćenja ugrađenog stila, ali smo odabrali eksterni list. Na taj način, stil se može ponovo koristiti u različitim tabelama, što skraćuje vreme razvoja.
- Neka bude jednostavno: Možete se zaneti i previše stilizovati tabele. Uvek održavajte jednostavan dizajn i učinite tabele preglednim i čitljivim.
- Dodajte granice tabelama: Granica čini tabelu lakšom za čitanje i pregledanje.
- Koristite dosledne boje: Ako imate nekoliko tabela na web stranicama, koristite dosledne boje i fontove. Korišćenjem boja brenda, može se poboljšati vidljivost istog.
- Učinite tabele responzivnim: Možda nikada nećete znati veličinu ekrana uređaja krajnjih korisnika.
- Koristite natpise da opišete tabele: Natpis kratko opisuje o čemu se radi u tabeli.
- Koristite razmak da odvojite tabele: Ako više tabela sledi jedna drugu, dodajte razmak između njih i navedite ih u skladu s tim.
Zaključak
Verujem da sada možete kreirati i stilizovati osnovnu HTML tabelu. Moguće je da nismo sve pokrili, s obzirom da su HTML i CSS obimni. Možete kreirati manje ili veće tabele, u zavisnosti od podataka koje želite da prikažete.
Pogledajte CSS varalice ako želite da saznate više o CSS-u i kako ga možete koristiti za poboljšanje korisničkog interfejsa.