Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO

Pada tutorial bootstrap kali ini saya akan membahas cara membuat table dengan bootstrap – sebelumnya kita sudah membahas tentang pengertian dan cara menggunakan boostrap. Untuk membuat table dengan bootstrap ini sangatlah mudah, Anda hanya perlu memasukkan class-class bootstrap untuk membuat table.

Berikut ini beberapa class bootstrap yang sering di gunakan untuk membuat table di antaranya :

.table
class ini di gunakan untuk mendefinisikan atau membuat table standar/ table biasa.
.table-striped
table-striped merupakan class tambahan untuk membuat table dengan menggunakan bootstrap. class ini berfungsi untuk membuat baris table yang bergaya belang-beling (strip).
.table- bordered
table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.
.table- hover
table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.

Sedangkan untuk membuat pewarnaan pada row atau table data Anda dapat menggunakan class-class berikut ini,

Tag <tr> ini untuk memberikan warna pada table row
Tag <td> ini untuk memberikan warna pada table data

Pewarnaan class pada table yang sering digunakan di antaranya :

.success
class ini di gunakan untuk memberikan tanda sukses atau warna hijau pata table row atau table data.
.danger
class ini berfungsi untuk memberi warna merah pada table row atau teble data.
.info
class ini berfungsi untuk memberi warna biru pada table row atau teble data.table.
.warning
class ini berfungsi untuk memberi warna kuning pada table row atau teble data.table.

Daftar Isi

Cara membuat table dengan bootstrap

untuk membuat atau mendesign table dengan bootstrap buat sebuah file php atau html. di sini saya membuat file index.php. untuk cara menghubungkan bootstrap telah kita bahasa sebelumnya, tapi bagi anda yang belum mendownload bootstrap silahkan klik disini untuk mendownload.

<!DOCTYPE html>

<html>

<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>

<body>
<h1>Membuat table Bootstrap | www.pemulungkode.com</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kacamata</td>
<td>30.000</td>
</tr>
<tr>
<td>2</td>
<td>Sepatu</td>
<td>200.000</td>
</tr>
<tr>
<td>3</td>
<td>Tas</td>
<td>150.000</td>
</tr>
</tbody>
</table>
</body>
</html>

Anda hanya perlu menambahkan class “table” pada element tag <table> pembuka.

<table class="table">

Membuat table border dengan bootstrap

Untuk membuat table border Anda hanya perlu menambahkan class “table-bordered” langsung saja lihat contohnya :

<!DOCTYPE html>

<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>

<body>
<h1>Membuat table Bootstrap | www.pemulungkode.com</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kacamata</td>
<td>30.000</td>
</tr>
<tr>
<td>2</td>
<td>Sepatu</td>
<td>200.000</td>
</tr>
<tr>
<td>3</td>
<td>Tas</td>
<td>150.000</td>
</tr>
</tbody>
</table>
</body>
</html>

Anda hanya perlu menambahkan class “table table-bordered” pada element tag <table> pembuka.

<table class="table table-bordered">

Membuat table striped dengan bootstrap

Untuk membuat table striped Anda hanya perlu menambahkan class “table-striped” langsung saja lihat contohnya :

<!DOCTYPE html>

<html>
<head>
    <title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<body>
    <h1>Membuat table bordered Bootstrap | www.pemulungkode.com</h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Produk</th>
                <th>Harga</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kacamata</td>
                <td>30.000</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Sepatu</td>
                <td>200.000</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Tas</td>
                <td>150.000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Anda hanya perlu menambahkan class “table table-bordered table-striped” pada element tag <table> pembuka.

<table class="table table-bordered table-striped">

Membuat table hover dengan bootstrap

Anda hanya perlu mengganti classnya saja, seperti pada contoh-contoh yang di atas.

<table class="table table-hover">

Membuat table responsive dengan bootstrap

untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakkan element table di dalam element <div> yang di beri class “table-responsive”. <div class=’table-responsive’>. kelebihan dari class table-responsive ini akan membuat table anda tidak akan berantakan walaupun di buka melalui smartphone yang memiliki resolusi layar yang lebih kecil. akan muncul scrol secara otomatis untuk membuat menjaga table tetap utuh. berikut ini adalah contoh

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<body>
    <h1>Membuat table responsive Bootstrap | www.pemulungkode.com</h1>
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Produk</th>
                    <th>Harga</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Kacamata</td>
                    <td>30.000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sepatu</td>
                    <td>200.000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Tas</td>
                    <td>150.000</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Pewarnaan class pada table

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

<body>
    <h1>Membuat table Warna Bootstrap | www.pemulungkode.com</h1>
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td class="table-success">No</td>
                    <td class="table-danger">Produk</td>
                    <td class="table-warning">Harga</td>
                </tr>
                <tr>
                    <td class="table-success">1</td>
                    <td class="table-danger">Kacamata</td>
                    <td class="table-warning">30.000</td>
                </tr>
                <tr>
                    <td class="table-success">2</td>
                    <td class="table-danger">Sepatu</td>
                    <td class="table-warning">200.000</td>
                </tr>
                </tbody>
        </table>
    </div>
</body>
</html>

Sekian lah cara tutorial bootstrap membuat dan mendesign table dengan bootstrap, Anda hanya perlu menambahkan class-class table untuk membuat table sesuai dengan keinginan anda.

Tutorial Bootstrap Dasar Lainnya :

3 thoughts on “Tutorial Bootstrap Part 2 – Cara Membuat Tabel”

Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO
Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO
Pingback: Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO

Link Lainnya	Hubungi Kami
Tentang Kami	Des/Kec Astanajapura Kab. Cirebon, Jawa barat.
Hubungi Kami	infopemulungkode@gmail.com
Kebijakan Layanan	whatsapp : 08170090597