Cara menggunakan table bootstrap

1 years ago

Komentar: 0

Dibaca: 137

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 6 : Cara Membuat Typhography di Bootstrap, selanjutnya kita akan belajar cara membuat tabel di Bootstrap.

Table of Contents Show

Apa itu Tabel
Membuat Tabel Sederhana dengan Bootstrap
Membuat Tabel dengan Baris Bergaris
Membuat Tabel dengan Border di Semua Sisi
Membuat Tabel Tanpa Bingkai
Mengaktifkan Status Hover pada Baris Tabel
Membuat Tabel Kecil atau Ringkas
Mengatur Warna Header Tabel
Class Penekanan Opsional untuk Baris Tabel
Membuat Tabel Responsif dengan Bootstrap
Apa itu Table hover?
Manakah class khusus table yang menyebabkan warna sebuah table menjadi selang seling?
Apa itu Bootstrap 5?

Apa itu Tabel

Tabel HTML digunakan untuk menyajikan data dengan cara grid seperti baris dan kolom. Menggunakan Bootstrap Anda dapat meningkatkan tampilan tabel dengan cepat dan mudah.

Lihat tutorial di Tabel HTML untuk mempelajari lebih lanjut tentang tabel Tutorial Belajar HTML5 Bagian 11 : Fungsi & Atribut Tag Table di HTML.

Membuat Tabel Sederhana dengan Bootstrap

Anda dapat membuat tabel dengan style dasar yang memiliki pembagi horizontal dan padding sel kecil (8px secara default), hanya dengan menambahkan class .table Bootstrap ke elemen <table>.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Sederhana</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Anda juga dapat membuat versi terbalik dari tabel ini, yaitu tabel dengan teks terang pada latar belakang gelap, dengan menambahkan class ekstra .table-dark ke class dasar .table, seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Gelap </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-dark">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Tips: Anda bisa menambahkan class ekstra .table-dark ke elemen .table untuk membuat versi gelap tabel apa pun seperti stripped, hoverable, border, compact table, dan sebagainya.

Membuat Tabel dengan Baris Bergaris

Anda dapat membuat tabel dengan latar belakang alternatif seperti zebra-stripes hanya dengan menambahkan class Bootstrap .table-striped ke class dasar .table.

Ini dibuat dengan menambahkan warna latar belakang ke baris tabel di dalam elemen <tbody> melalui pemilih CSS : nth-child. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Bergaris </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Demikian pula, Anda juga dapat membuat versi terbalik atau gelap dari tabel bergaris dengan menambahkan class ekstra .table-dark ke tabel, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tabel Bergaris Gelap </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Membuat Tabel dengan Border di Semua Sisi

Anda juga dapat menambahkan border ke semua sel tabel dengan menambahkan class Bootstrap ekstra .table-bordering ke class dasar .table, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Berbingkai</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Membuat Tabel Tanpa Bingkai

Anda juga dapat membuat tabel tanpa bingkai menggunakan class .table-borderless pada elemen .table.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Tanpa Bingkai</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-borderless">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Mengaktifkan Status Hover pada Baris Tabel

Anda juga dapat mengaktifkan status hover pada baris tabel dalam elemen <tbody> dengan menambahkan class Bootstrap .table-hover ke class dasar .table. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel dengan Hover</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Membuat Tabel Kecil atau Ringkas

Anda juga dapat membuat tabel Anda lebih ringkas dan menghemat ruang dengan menambahkan class ekstra .table-sm ke class dasar .table. Class .table-sm membuat tabel menjadi padat dengan memotong padding sel menjadi dua. Berikut contoh tabel kecil:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Ringkas</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Mengatur Warna Header Tabel

Anda juga dapat menentukan warna latar belakang yang berbeda untuk kepala tabel menggunakan class pengubah .thead-light atau .thead-dark pada elemen <thead>.

Contoh berikut menggunakan class .thead-light untuk membuat tabel dengan light head.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Judul tabel dengan Latar Terang</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Demikian juga, Anda dapat menggunakan class .thead-dark untuk membuat tabel dengan dark head.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Judul Tabel Dengan Latar Gelap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

CodePen Embed FallbackCodePen Embed Fallback

Class Penekanan Opsional untuk Baris Tabel

Ada beberapa class kontekstual untuk menekankan baris atau data sel individu seperti keberhasilan, peringatan, bahaya, dll.

Dengan mewarnai latar belakangnya.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Gelap </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <table class="table table-dark">
        <thead>
            <tr>
                <th>Baris</th>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Budi</td>
                <td>Santoso</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Johan</td>
                <td>Sirup</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dudi</td>
                <td>Jago</td>
                <td>[email protected]</td>
            </tr>            
        </tbody>
    </table>
</div>
</body>
</html>

0

CodePen Embed FallbackCodePen Embed Fallback

Membuat Tabel Responsif dengan Bootstrap

Anda juga dapat membuat tabel responsif untuk mengaktifkan pengguliran horizontal pada perangkat kecil.

Untuk membuat tabel menjadi responsif, cukup letakkan tabel di dalam elemen

dan terapkan class .table-responsive di dalamnya. Anda juga dapat menentukan kapan tabel harus memiliki scrollbar, berdasarkan lebar layar, menggunakan class .table-responsive {-sm | -md | -lg | -xl}

Apa itu Table hover?

Table hover adalah table yang baris tablenya bisa berubah warna ketika diletakkan cursor mouse di atasnya.

Manakah class khusus table yang menyebabkan warna sebuah table menjadi selang seling?

.table-striped : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk membuat tabel dengan warna yang selang seling (strip)

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.