HTML - Tabele


Kreiranje tabelema u HTML-u

HTML tabele omogućavaju vam slaganje podataka u redove i koline. Obično se koriste za prikaz tabelarnih podataka poput popisa proizvoda, podataka o kupcima, finansijskih izvještaja i tako dalje. Možete stvoriti tabelu pomoću elementa <table>. Unutar <table> elementa možete koristiti <tr> elemente za stvaranje redova, a za izradu kolona unutar reda možete koristiti <td> elemente. Takođe možete definisati ćeliju kao zaglavlje za grupu ćelija tabele koristeći element <th>. Sljedeći primjer prikazuje osnovnu strukturu tabele.

<table>
    <tr>
        <th>No.</th>
        <th>Ime</th>
        <th>Godina</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Miloš Mihaljica</td>
        <td>29</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Marko Marković</td>
        <td>34</td>
    </tr>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kreiranje tabela u HTML</title>
</head>
<body>
<h2>HTML tabela (Default stil)</h2>
<table>
    <tr>
        <th>No.</th>
        <th>Ime</th>
        <th>Godina</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Miloš Mihaljica</td>
        <td>29</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Marko Marković</td>
        <td>34</td>
    </tr>
</table>
</body>
</html>

Tabele prema zadanim postavkama nemaju granice. Možete koristiti CSS svojstvo border za dodavanje granica u tabelama. Takođe su veličine ćelije tabele samo toliko velike da se standardni postavljaju prema sadržaju. Da biste dodali više prostora oko sadržaja u ćelijama tabele, možete koristiti CSS svojstvo padding. Sljedeća pravila stila dodaju granicu (border) od 1px u tabeli i 10px obloga (padding) u njegovim ćelijama.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dodavanje borders i paddings u HTML tabele</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>tabela sa odvojenim Border-ima</h2>
    <table>
        <tr>
            <th>No.</th>
            <th>Ime</th>
            <th>Godine</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš Mihaljica</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Marko Marković</td>
            <td>34</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bojan Bojić</td>
            <td>21</td>
        </tr>
    </table>
</body>
</html

Granice (boreder) oko tabele i njenih ćelije prema zadanom su odvojene jedna od druge. Ali možete ih postaviti u jednu koristeći svojstvo border-drop na <table> elementu. Takođe se tekst unutar <th> elemenata prikazuje podebljanim fontom, poravnat je vodoravno na sredini ćelije. Za promjenu zadanog poravnanja možete koristiti CSS svojstvo text-align poravnanje teksta. Sljedeća pravila stila kreiraju granice sa jednom linijom u tabeli i poravnavaju tekst zaglavlja tabele u lijevo.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Table sa collapsed border-ima</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        th {
            text-align: left;
        }
    </style>
</head>
<body>
    <h2>Tabla sa collapsed border-om</h2>
    <table>
        <tr>
            <th>No.</th>
            <th>Ime</th>
            <th>Godine</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš Mihaljica</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Marko Marković</td>
            <td>34</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Petar Petrović</td>
            <td>21</td>
        </tr>
    </table>
    <p><strong>Napomena:</strong>Pogledajte lekciju o 
    <a href="css3-tabele.php" target="_blank"> CSS tabele </a> da biste
    saznali više o skupljanju granica (boreder-a) tabele.</p>
</body>
</html


Prostiranje tabele na više redova i kolona

Raspon vam omogućava da proširite redove tabele i kolona u više drugih redova i kolona. Normalno, ćelija tabele ne može preći u prostor ispod ili iznad druge ćelije tabele. Ali, atribute rowspan ili colspan možete koristiti da raspoređujete više redova ili kolona u tabeli. Pogledajmo na sljedećem primjeru kako biste shvatili na šta u osnovi djeluje atribut colspan:

<table>
    <tr>
        <th>Ime:</th>
        <th colspan="2">Broj telefona</th>
    </tr>
    <tr>
        <td>Miloš Mihaljica</td>
        <td>+387 123 456</td>
        <td>+387 123 456</td>
    </tr>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Raspon na više kolona u HTML tabelama</title>
    <style>
        table {
            width: 300px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Proširenje kolona</h2>
    <table>
        <tr>
            <th>Ime</th>
            <th colspan="2">Broj telefona</th>
        </tr>
        <tr>
            <td>Miloš Mihaljica</td>
            <td>+387 123 456</td>
            <td>+387 123 456</td>
        </tr>
    </table>
</body>
</html

Slično tome, možete koristiti atribut rowspan da biste stvorili ćeliju koja obuhvata više od jednog reda. Pokušajmo na idućem primjer da razumijemo kako u osnovi djeluje raspon redova:

<table>
    <tr>
        <th>Ime:</th>
        <td>Miloš Mihaljica</td>
    </tr>
    <tr>
        <th rowspan="2">Broj telefona:</th>
        <td>+387 123 456</td>
    </tr>
    <tr>
        <td>+387 123 456</td>
    </tr>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Raspon na više redova u HTML tabelama</title>
    <style>
        table {
            width: 300px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Proširenje redova</h2>
    <table>
        <tr>
            <th>Ime:</th>
            <td>Miloš Mihaljica</td>
        </tr>
        <tr>
            <th rowspan="2">Telefon:</th>
            <td>+387 123 456</td>
        </tr>
        <tr>
            <td>+387 123 456</td>
        </tr>
    </table>
</body>
</html


Dodavanje naslova u tabelu

Možete odrediti naslov za tabelu pomoću elementa <caption>. Element <caption> mora biti postavljen neposredno nakon otvaranja taga <table>. Po zadanom se natpis pojavljuje na vrhu tabele, ali možete promijeniti njegov položaj koristeći CSS svojstvo caption-side. Sljedeći primjer prikazuje kako koristiti ovaj element u tabeli.

<table>
    <caption>Users informacije</caption>
    <tr>
        <th>Rb.</th>
        <th>Ime</th>
        <th>Godine</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Miloš Mihaljica</td>
        <td>29</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Marko Marković</td>
        <td>34</td>
    </tr>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dodavanje naslova u HTML tabele</title>
    <style>
        table {
            width: 300px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        table.secondary caption {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <h2>Tabela s naslovom na vrhu</h2>
    <table>
        <caption>Korisničke informacije</caption>
        <tr>
            <th>No.</th>
            <th>Ime</th>
            <th>Godine</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Miloš Mihaljica</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Marko Marković</td>
            <td>34</td>
        </tr>
    </table>

    <h2>Tabela s naslovom na dnu</h2>
    <table class="secondary">
        <caption>Korisničke informacije</caption>
        <tr>
            <th>No.</th>
            <th>Ime</th>
            <th>Godine</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Petar Petrović</td>
            <td>26</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Maja Majić</td>
            <td>34</td>
        </tr>
    </table>
</body>
</html


Definisanje zaglavlja, tijela i podnožja tabele

HTML pruža niz tagova kao što su: <thead>, <tbody> i <tfoot> koji vam pomažu u stvaranju strukturnih tabela, definisanjem regija zaglavlja, tijela i podnožja. Sljedeći primjer pokazuje upotrebu ovih elemenata.

<table>
    <thead>
        <tr>
            <th>Predmet</th>
            <th>Cijena</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Auto</td>
            <td>50,000</td>
        </tr>
        <tr>
            <td>Kuća</td>
            <td>100,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Ukupno</th>
            <td>150,000</td>
        </tr>
    </tfoot>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML tabele sa zaglavljem, podnožjem i tijelom</title>
    <style>
        table {
            width: 300px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Predmet</th>
                <th>Cijena</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Auto</td>
                <td>50,000</td>
            </tr>
            <tr>
                <td>Kuća</td>
                <td>100,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Ukupno</th>
                <td>150,000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html