CSS - Tabele


Uređivanje tabela uz pomoć CSS-a

Tabele se obično koriste za prikaz tabelarnih podataka, kao što su finansijski izvještaji. Kada stvorite HTML tabelu bez ikakvih stilova ili atributa, pretraživači ih prikazuju bez ikakvih stilskog izgleda. Pomoću CSS-a možete značajno poboljšati izgled vaših tabela. CSS nudi nekoliko svojstava koja vam omogućuju kontrolu izgleda i prezentacije elemenata tabele. U sledećem dijelu vidjećete kako pomoću CSS-a možete stvoriti elegantne i konzistentne tabele.



Dodavanje boredera tabelama

CSS svojstvo boredera je najbolji način definisanja granica za tabele. Sljedeći primjer će postaviti crni border za elemente <table>, <th> i <td>.

table, th, td {
    border: 1px solid black;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja granica (bordera) na tabele</title>
<style>
    table, th, td {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Petrović</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Marko</td>
            <td>Marković</td>
            <td>markomarkovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Janko</td>
            <td>Janković</td>
            <td>jankojankovic@mail.com</td>
        </tr>
    </table>
</body>
</html>

Pretraživač prema zadanom crta linije oko tabele, kao i oko svih ćelija, sa nešto prostora između, što rezultuje dvostrukim linijama. Da biste se riješili ovog problema s dvostrukom granicom, jednostavno možete srušiti granice susjedne tabele i stvoriti čiste granice sa jednom linije. Pogledajmo sljedeću ilustraciju da bismo shvatili kako se granica primjenjuje na tabelu.



Granice tabele (Borders)

Postoje dva različita modela za postavljanje granica (boredera) na ćelijama tabele u CSS-u: separate i collapse. U separate modelu linija, koji je zadani svaka ćelija tabele ima svoje zasebne granice, dok u collapse modelu linija, susjedne ćelije tabela imaju zajedničku granicu. Model linija za HTML tabele možete postaviti pomoću CSS svojstva border-collapse. Sljedeća pravila stila će srušiti granice (collapse) ćelije tabele i primijeniti crnu liniju debljine jednog piksela (1px).

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer spajanja granica (borders) zasebnih tabela</title>
<style>
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Petrović</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Marko</td>
            <td>Marković</td>
            <td>markomarkovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Janko</td>
            <td>Janković</td>
            <td>jankojankovic@mail.com</td>
        </tr>
    </table>
</body>
</html>


Prilagođavanje prostora unutar tabela

Pretraživač po zadanom stvara ćelije tabele dovoljno velike da sadrže podatke u ćelijama. Da biste dodali više prostora između sadržaja ćelije tabele i granica ćelije jednostavno možete koristiti svojstvo CSS padding. Pogledajmo sljedeći primjer da biste vidjeli kako to funkcioniše:

th, td {
    padding: 15px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja paddinga ćelija tabele</title>
<style>
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 15px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Petrović</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Marko</td>
            <td>Marković</td>
            <td>markomarkovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Janko</td>
            <td>Janković</td>
            <td>jankojankovic@mail.com</td>
        </tr>
    </table>
</body>
</html>

Možete prilagoditi razmak između granica ćelija pomoću CSS svojstva proreda granice (border-spacing), ako su granice vaše tabele odvojene (što je zadano). Sljedeća pravila stila primjenjuju razmak od 10px između svih granica unutar tabele:

table {
    border-spacing: 10px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja razmaka ćelija u tabeli</title>
<style>
    table {
        border-spacing: 10px;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 10px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Petrović</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Marko</td>
            <td>Marković</td>
            <td>markomarkovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Janko</td>
            <td>Janković</td>
            <td>jankojankovic@mail.com</td>
        </tr>
    </table>
</body>
</html>


Podešavanje širine i visine tabele

Tabela će po zadanom biti dovoljno širok i visok da sadrži sav njegov sadržaj. Međutim, takođe možete postaviti širinu i visinu tabele kao i njene ćelije izričito koristeći CSS svojstvo width i height. Pravila stila u sljedećem primjeru postaviće širinu tabele na 100%, a visina ćelija zaglavlja tabele na 40px.

table {
    width: 100%;
}
th {
    height: 40px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja širine i visine tabele</title>
<style>
  table {
        width: 100%;        
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        border: 1px solid #dee2e6;
    }
    th {
        height: 40px;
        text-align: left;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Petrović</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Marko</td>
            <td>Marković</td>
            <td>markomarkovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Janko</td>
            <td>Janković</td>
            <td>jankojankovic@mail.com</td>
        </tr>
    </table>
</body>
</html>


Kontrola izgleda tabele

Tabela se proširuje i prilagođava da primi podatke sadržane u njoj. Ovo je zadano ponašanje. Kako se podaci popunjavaju unutar tabele, nastavlja se širiti sve dok ima prostora. Međutim, ponekad je potrebno postaviti fiksnu širinu tabele kako biste upravljali izgledom. To možete učiniti pomoću CSS svojstva table-layout. Ovo svojstvo definiše algoritam koji će se koristiti za raspored ćelija tabele, redova i kolona tabele. Ovo svojstvo uzima jednu od dvije vrijednosti:

  • auto (auto)- Koristi algoritam automatskog izgleda tabele. Ovim algoritmom prilagođava se širina tabele i njenih ćelija. Ovo je zadana vrijednost.
  • fiksno (fixed)- Koristi algoritam postavljanja fiksne tabele. Ovim algoritmom horizontalni raspored tabele ne zavisi o sadržaju ćelija. Zavisi samo od širine tabele, širine kolona i granica ili razmaka ćelija. Obično je brži od automatskog.

Pravila stila u sljedećem primjeru određuju da se HTML tabela postavlja pomoću algoritma fiksnog izgleda i ima fiksnu širinu od 300px. Isprobajmo ga i pogledajte kako funkcioniše:

table {
    width: 300px;
    table-layout: fixed;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS table-layout svojstva</title>
<style>             
    table {
        width: 250px;
        border-collapse: separate;            
    }
    table, tr, th, td{
        border: 1px solid #000000;
    }
    .auto {
        table-layout: auto;
    }
    .fixed {
        table-layout: fixed;
    }
    td{
        width: 50%;
    }
</style>
</head>
<body>
    <table class="auto">
        <caption>Primjer 1. Auto</caption>
        <tr>
            <th>Ime</th>
            <td>Miloš Mihaljica</td>
        </tr>
        <tr>
            <th>Email</th>
            <td>milosmihaljica@mail.com</td>
        </tr>
    </table>
    <br>
    <table class="fixed">
        <caption>Primjer 2. Fixed</caption>
        <tr>
            <th>Ime</th>
            <td>Petar Petrović</td>
        </tr>
        <tr>
            <th>Email</th>
            <td>petarpetrovic@mail.com</td>
        </tr>
    </table>
  <p><strong>Napomena:</strong> Možete vidjeti da se širina
  ćelije tabele ne mijenja kako bi se sadržaj prilagodio table-layout.</p>
</body>
</html>


Poravnavanje teksta unutar ćelija tabele

Tekstualni sadržaj možete poravnati unutar ćelija tabele bilo vodoravno ili horizontalno.



Horizontalno poravnanje sadržaja ćelija

Za horizontalno poravnavanje teksta unutar ćelija tabele možete koristiti svojstvo poravnanja teksta (text-align) na isti način kao što koristite s drugim elementima. Poravnajte tekst bilo u lijevo, u desno, u sredini ili u kompletnu širinu elemenata. Sljedeća pravila stila će poravnati tekst lijevo unutar <th> elemenata.

th {
    text-align: left;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer vodoravnog poravnanja teksta u ćelijama tabele</title>
<style>
    table {
        width: 100%;        
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        border: 1px solid #dee2e6;
    }
    th {
        text-align: left;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Redni br.</th>
                <th>Ime</th>
                <th>Prezime</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Miloš</td>
                <td>Mihaljica</td>
                <td>milosmihaljica@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Petar</td>
                <td>Petrović</td>
                <td>petarpetrovic@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Janko</td>
                <td>Janković</td>
                <td>jankojankovic@mail.com</td>
            </tr>            
        </tbody>
    </table>
</body>
</html>


Vertikalno poravnanje sadržaja ćelija

Slično tome, možete vertikalno poravnati sadržaj unutar <th> i <td> elemenata prema vrhu, dnu ili sredini koristeći CSS svojstvo vertical-align. Početna vertikalna poravnanja su sredina. Sljedeća pravila stila će vertikalno poravnati tekst prema elementima <th>.

th {
    height: 40px;
    vertical-align: bottom;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer vertikalnog poravnanja teksta u ćelijama tablice</title>
<style>
    table {
        width: 100%;        
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        border: 1px solid #dee2e6;
    }
    th {
        height: 40px;
        vertical-align: bottom;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Redni br.</th>
                <th>Ime</th>
                <th>Prezime</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Miloš</td>
                <td>Mihaljica</td>
                <td>milosmihaljica@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Petar</td>
                <td>Petrović</td>
                <td>petarpetrovic@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Janko</td>
                <td>Janković</td>
                <td>jankojankovic@mail.com</td>
            </tr>            
        </tbody>
    </table>
</body>
</html>


Kontrola položaja naslova tabele

Možete postaviti vertikalni položaj naslova tabele koristeći CSS svojstvo caption-side. Natpis može biti postavljen na vrhu ili na dnu tabele. Zadana pozicija je gornja.

caption {
    caption-side: bottom;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS caption-side svojstva</title>
<style>
    table, td, th {
        border: 1px solid gray;
    }
    caption {
    caption-side: bottom;
  }
</style>
</head>
<body>
    <table>
        <caption>Tabela 1.0 - Detalji o korisnicima</caption>
        <thead>
            <tr>
                <th>Br.</th>
                <th>Ime</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Miloš Mihaljica</td>
                <td>milosmihaljica@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Petar Petrović</td>
                <td>petarpetrovic@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Marko Marković</td>
                <td>markomarkovic@mail.com</td>
            </tr>
        </tbody>
    </table>
  <p><strong>Napomena:</strong> Internet Explorer 8 podržava
  svojstvo stranice sa natpisom samo ako je naveden <code>!DOCTYPE</code>.</p>
</body>
</html>


Rukovanje praznim ćelijama

U tabelama koje koriste zasebni model boredera koji je zadan, možete kontrolisati i prikaz ćelija koje nemaju vidljivi sadržaj koristeći CSS svojstvo empty-cells. Ovo svojstvo prihvata vrijednost prikazivanja ili skrivanja. Zadana vrijednost je prikaži (show), koja prazne ćelije prikazuje kao normalne ćelije, ali ako je specifikovano skrivanje vrijednosti, oko praznih ćelija se ne crtaju granice ili pozadine. Pogledajmo primjer da biste shvatili kako to zapravo djeluje:

table {
    border-collapse: separate;
    empty-cells: hide;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS empty-cells svojstva</title>
<style>
    table {
        width: 300px;
        border-collapse: separate;
    }
    table, th, td{
        border: 1px solid #000000;
    }
    table.empty-show {
        empty-cells: show;                        
    }
    table.empty-hide {
        empty-cells: hide;           
    }        
</style>
</head>
<body>
    <h2>Tabela sa Empty-cells</h2>
    <table class="empty-show">
        <tr>
            <th>Ime</th>
            <td>Miloš Mihaljica</td>
        </tr>
        <tr>
            <th>Email</th>
            <td></td>
        </tr>
    </table>
    <br>
    <h2>Tabela sa skrivenim Empty-cells</h2>
    <table class="empty-hide">
        <tr>
            <th>Ime</th>
            <td>Petar Petrović</td>
        </tr>
        <tr>
            <th>Email</th>
            <td></td>
        </tr>
    </table>
    <p><strong>Napomena:</strong> Možete vidjeti da je prazna 
    ćelija, a u drugoj tabeli primjera potpuno skrivena. Prostor (tj. 
    &amp;nbsp;) koji se ne lomi smatra se sadržajem.</p>
</body>
</html>


Izrada isprekidanih linija granica tabele

Postavljanje različitih boja pozadine za alternativne redove popularna je tehnika za poboljšanje čitljivosti tabele sa velikom količinom podataka. To se obično naziva tabela za crtanje zebre (zebra-striping). Možete jednostavno postići ovaj efekt upotrebom CSS :nth-child() pseudo-klase selektora. Sljedeća pravila stila istaknuće sve neparne redove unutar tijela tabele.

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer kreiranja Zebra-striped tabele</title>
<style>
    table {
        width: 100%;        
        font-family: arial, sans-serif;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-top: 1px solid #dee2e6;
    }
    tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Redni br.</th>
                <th>Ime</th>
                <th>Prezime</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Miloš</td>
                <td>Mihaljica</td>
                <td>milosmihaljica@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Marko</td>
                <td>Marković</td>
                <td>markomarkovic@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Petar</td>
                <td>Petrović</td>
                <td>petarpetrovic@mail.com</td>
            </tr>            
        </tbody>
    </table>
</body>
</html>

Tabela s isprekidanom linijom granice u obliku zebre obično izgleda poput sljedeće slike.





Kreiranje responzivnih tabela

Tabele ne reaguju po prirodi. Međutim, za podršku mobilnim uređajima možete dodati reakciju u svoje tabele omogućavanjem horizontalnog pomicanja na malim ekranima. Da biste to učinili, jednostavno ubacite svoju tabelu u elementom <div> i primijenite stil Yoverflow-x: auto; kao što je prikazano u sljedećem primjeru:

<div style="overflow-x: auto;"> 
    <table>
        ... vaša tabela treba da se nalazi ovde ...
    </table>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer kreiranja responzivne tabele</title>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border: 1px solid #dee2e6;
        white-space: nowrap; /* Spriječavanje umotavanja teksta */
    }
    .responsive-table {
        overflow-x: auto;
    }
</style>
</head>
<body>
    <div class="responsive-table">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Dobavljač</th>
                    <th>Ime</th>
                    <th>Adresa</th>
                    <th>Grad</th>
                    <th>Poštanski kod</th>
                    <th>Država</th>
                    <th>Broj telefona</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>IT TUTORIJALI</td>
                    <td>Miloš Mihaljica</td>
                    <td>Kralja Petra I Karađorševića 5a</td>
                    <td>Banja Luka</td>
                    <td>78000</td>
                    <td>Bosna i Hercegovina</td>
                    <td>(+387) 111-222</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Apple</td>
                    <td>Marko Marković</td>
                    <td>Kralja Petra I Karađorđevića 99a</td>
                    <td>Banja Luka</td>
                    <td>78000</td>
                    <td>Bosna i Hercegovina</td>
                    <td>(+387) 222-333</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Microsoft</td>
                    <td>Petar Petrović</td>
                    <td>Fra Anđela Zvizdovića 1</td>
                    <td>Sarajevo</td>
                    <td>71000</td>
                    <td>Bosna i Hercegovina</td>
                    <td>(+387) 555-666</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>NSoft</td>
                    <td>Janko Janković</td>
                    <td>Bleiburških žrtava bb</td>
                    <td>Mostar</td>
                    <td>88000</td>
                    <td>Bosna i HErcegovina</td>
                    <td>(+387) 666-969</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p><strong>Napomena:</strong> Uključite ili isključite izgled 
    uređivača ili otvorite izlaz u praznom prozoru i promijenite mu 
    veličinu da biste razumjeli kako tabela reaguje.</p>
</body>
</html>