Bootstrap - Tabele


Šta je tabela?

HTML tebele se koriste za prikaz podataka, poput reda i kolona. Korištenjem Bootstrap-a možete znatno poboljšati izgled tabele na brz i jednostavan način.



Kreiranje jednostavne tabele s Bootstrap-om

Možete stvoriti tabele s osnovnim stilom koji ima vodoravne razmake i male bordere ćelija (prema zadanim postavkama 8px), samo dodavanjem Bootstrap klase .table elementu <table>.

<table class="table">
    <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Jednostavna tabela</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table">
        <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>         
        </tbody>
    </table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com

Takođe možete kreirati obrnutu verziju ove tabele, tj. tabelu sa svijetlim tekstom na tamnoj pozadini, dodavanjem klase .table-dark u osnovnu klasu .table. Pogledajmo primjer:

<table class="table table-dark">
    <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr> 
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tamna tabela</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-dark">
    <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr> 
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Kreiranje tabele s prugastim redovima (Striped Rows)

Možete kreirati tabelmu s alternativnom pozadinom poput zebra-pruga jednostavnim dodavanjem klase .table-striped u osnovnu .table klasu. To se postiže dodavanjem boje pozadine (background-color) u red tabele unutar elementa <tbody> putem CSS selektora: .table. Pogledajmo primjer:

<table class="table table-striped">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>        
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Prugasta tabela (Striped Table)</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-striped">
        <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>                
        </tbody>
    </table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com

Takođe možete kreirati i obrnutu ili tamnu verziju tabele dodavajući dodatnu klasu .table-dark u tabelu, kao što je prikazano u sljedećem primjeru:

<table class="table table-striped table-dark">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Prugasta tamna tabela (Striped Table)</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-striped table-dark">
        <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>              
        </tbody>
    </table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Izrada tabele s borderom sa svih strana

Takođe možete dodati granice svim ćelijama tabele dodavanjem dodatne Bootstrap klase .table-bordered u .table osnovnu klasu, kao što je prikazano u sljedećem primjeru:

<table class="table table-bordered">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tabela s borderima</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-bordered">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Kreiranje tabele bez bordera

Tabele bez bordera možete kreirati i pomoću klase .table-borderless na elementu .table.

<table class="table table-borderless">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>           
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tabela bez bordera</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-borderless">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>           
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Omogućavanje hover stanja na redovima tabele

Takođe možete omogućiti hover stanja na redovima tabele unutar elementa <tbody> dodavanjem Bootstrap klase .table-hover u osnovnu klasu .table. Pogledajmo primjer:

<table class="table table-hover">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>                       
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Table with Hover States</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-hover">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>                       
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Kreiranje male ili kompaktne tabele

Takođe možete učiniti tabele kompaktnijima i uštediti prostor dodavanjem dodatne klase .table-sm osnovnoj klasi .table. Klasa .table-sm čini tabele kompaktnim presijecanjem bordera ćelija na pola. Pogledajmo primjer:

<table class="table table-sm">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Kompaktne tabele</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-sm">
    <thead>
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Postavljanje boja za zaglavlje tabele

Takođe možete odrediti različite boje pozadine za zaglavlje tabele koristeći klase modifikatora .thead-light ili .thead-dark na elementu <thead>. Sljedeći primjer koristi klasu .thead-light za stvaranje tabele sa svijetlijim zaglavljem.

<table class="table">
    <thead class="thead-light">
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>           
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Zaglavlje tabele s svijetlom pozadinom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
    <thead class="thead-light">
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>           
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com

Isto tako, klasu .thead-dark možete koristiti za stvaranje tabele s tamnim zaglavljem.

<table class="table">
    <thead class="thead-dark">
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Zaglavlje tabele s tamnom pozadinom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
    <thead class="thead-dark">
         <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr>            
    </tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com


Opcionalno naglašavanje redova tabele

Postoje neke kontekstualne klase za isticanje podataka redova ili pojedinačnih ćelija poput success, warning, danger, itd. kroz bojenje njegove pozadine.

<table class="table">
<thead>
    <tr>
        <th>Redni broj</th>
        <th>Način plaćanja</th>
        <th>Datum uplate</th>
        <th>Status uplate</th>
    </tr>
</thead>
<tbody>
    <tr class="table-primary">
        <td>1</td>
        <td>Credit Card</td>
        <td>04/07/2019</td>
        <td>Na čekanju</td>
    </tr>
    <tr class="table-secondary">
        <td>2</td>
        <td>Credit Card</td>
        <td>02/07/2019</td>
        <td>Otkazano</td>
    </tr>
    <tr class="table-success">
        <td>3</td>
        <td>Keš</td>
        <td>01/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-info">
        <td>4</td>
        <td>Keš</td>
        <td>05/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-warning">
        <td>5</td>
        <td>Online</td>
        <td>03/07/2019</td>
        <td>Na čekanju</td>
    </tr>
    <tr class="table-danger">
        <td>6</td>
        <td>Online</td>
        <td>06/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-active">
        <td>7</td>
        <td>Credit Card</td>
        <td>04/07/2019</td>
        <td>Dostavljeno</td>
    </tr>            
    <tr class="table-light">
        <td>8</td>
        <td>Credit Card</td>
        <td>08/07/2019</td>
        <td>Čekanje na potvrdu</td>
    </tr>
    <tr class="table-dark">
        <td>9</td>
        <td>Credit Card</td>
        <td>06/07/2019</td>
        <td>Neuspješna uplata</td>
    </tr>
</tbody>
</table>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tabela sa naglašenim redovima</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
    <tr>
        <th>Redni broj</th>
        <th>Način plaćanja</th>
        <th>Datum uplate</th>
        <th>Status uplate</th>
    </tr>
</thead>
<tbody>
    <tr class="table-primary">
        <td>1</td>
        <td>Credit Card</td>
        <td>04/07/2019</td>
        <td>Na čekanju</td>
    </tr>
    <tr class="table-secondary">
        <td>2</td>
        <td>Credit Card</td>
        <td>02/07/2019</td>
        <td>Otkazano</td>
    </tr>
    <tr class="table-success">
        <td>3</td>
        <td>Keš</td>
        <td>01/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-info">
        <td>4</td>
        <td>Keš</td>
        <td>05/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-warning">
        <td>5</td>
        <td>Online</td>
        <td>03/07/2019</td>
        <td>Na čekanju</td>
    </tr>
    <tr class="table-danger">
        <td>6</td>
        <td>Online</td>
        <td>06/07/2019</td>
        <td>Plaćeno</td>
    </tr>
    <tr class="table-active">
        <td>7</td>
        <td>Credit Card</td>
        <td>04/07/2019</td>
        <td>Dostavljeno</td>
    </tr>            
    <tr class="table-light">
        <td>8</td>
        <td>Credit Card</td>
        <td>08/07/2019</td>
        <td>Čekanje na potvrdu</td>
    </tr>
    <tr class="table-dark">
        <td>9</td>
        <td>Credit Card</td>
        <td>06/07/2019</td>
        <td>Neuspješna uplata</td>
    </tr>
</tbody>
</table>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Način plaćanja Datum uplate Status uplate
1 Credit Card 04/07/2019 Na čekanju
2 Credit Card 02/07/2019 Otkazano
3 Keš 01/07/2019 Plaćeno
4 Keš 05/07/2019 Plaćeno
5 Online 03/07/2019 Na čekanju
6 Online 06/07/2019 Plaćeno
7 Credit Card 04/07/2019 Dostavljeno
8 Credit Card 08/07/2019 Čekanje na potvrdu
9 Credit Card 06/07/2019 Neuspješna uplata


Kreiranje responzivnih tabela pomoću Bootstrap-a

Takođee možete stvoriti responzivne tabele kako biste omogućili horizontalno pomicanje na malim uređajima. Da bi bilo koja tabela reagovala, samo stavite tabelu u element <div> i na nju primijenite klasu .table-responsive. Takođe možete odrediti kada tabela treba da ima scrollbar, na osnovu širine ekrana, koristeći klase .table-responsive{-sm|-md |-lg|-xl}.

<div class="table-responsive"> 
    <table class="table">
        <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr> 
        </tbody>
    </table>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responzivne tabele</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<div class="table-responsive"> 
    <table class="table">
        <thead>
        <tr>
            <th>Redni broj</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>Stefan</td>
            <td>Jović</td>
            <td>stefanjovic@mail.com</td>
        </tr> 
        </tbody>
    </table>
</div>    
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Redni broj Ime Prezime Email
1 Miloš Mihaljica milosmihaljica@mail.com
2 Marko Marković markomarkovic@mail.com
3 Stefan Jović stefanjovic@mail.com