Cara Membuat Tabel Dengan Bootstrap - Bootstrap adalah sebuah framework yang paling banyak digunakan webmaster untuk membuat dan mengembangkan website, terutama untuk membuat tampilan laman web. Dengan menggunakan bootstrap anda dapat mendesain berbagai bentuk web, salah satunya adalah dengan membuat tabel.
Membuat tabel dengan bootstrap sangat mudah, karena sudah banyak dukungan tanpa anda harus membuat dari awal. Pada postingan saya sebelumnya pernah menyinggung Cara Menggunakan Bootstrap, nah yang perlu Anda lakukan adalah dengan memasukkan berbagai macam class yang telah disediakan oleh bootstrap untuk mendesain tabel yang akan anda buat. Berikut class yang dapat anda jadikan untuk mendesain tabel dengan bootstrap.
Untuk dapat mendesain tampilan tabel menjadi terlihat menarik anda hanya tinggal menambahkan class tabel pada bagian kode "<table class="table">" ganti "tabel" dengan class lainnya,
Jika anda ingin membuat tabel dengan menampakkan garis secara utuh maka tambahkan seperti berikut ini.
Sekian Cara membuat tabel dengan bootstrap, mulai dari yang sederhana sampai dengan yang bersifat responsive, semoga dapat berguna dan membantu dalam mendesain tampilan web aplikasi anda.
Membuat tabel dengan bootstrap sangat mudah, karena sudah banyak dukungan tanpa anda harus membuat dari awal. Pada postingan saya sebelumnya pernah menyinggung Cara Menggunakan Bootstrap, nah yang perlu Anda lakukan adalah dengan memasukkan berbagai macam class yang telah disediakan oleh bootstrap untuk mendesain tabel yang akan anda buat. Berikut class yang dapat anda jadikan untuk mendesain tabel dengan bootstrap.
- Class (.Table): class ini digunakan untuk membuat tabel standar.
- Class (.Table-Striped): class table ini digunakan untuk membuat tabel dengan baris strip.
- Class (.Table-Bordered): class table bootstrap ini digunakan untuk membuat desain tabel dengan memiliki garis.
- Class (.Table-Hover): class ini digunakan untuk membuat tabel jika salah satu baris atau row disentuh oleh kursor akan memiliki efek.
Itulah beberapa class table bootstrap yang dapat anda gunakan untuk mendesain tabel di php melalui bootstrap. Class tersebut dapat anda kombinasikan dengan class table lain sehingga dapat menghasilkan tampilan tabel yang menarik dan terlihat profesional.
Untuk lebih jelasnya bagaimana cara membuat tabel dengan bootstrap, simak dibawah ini.
Cara Membuat Tabel Dengan Bootstrap
Sebelumnya anda membuat tabel dengan bootstrap pastikan telah memilki CSS bootstrap (bootstrap.cssatau bootstrap.min.css), seperti yang saya contohkan dibawah ini.
Cara Membuat Tabel Standar dengan Bootstrap
Untuk membuat tabel dengan bootstrap, buatlah file PHP atau HTML, kemudian simpan dengan index.php. berikut contoh membuat tabel standar php dengan bootstrap.
<!DOCTYPE html>Dan hasilnya adalah seperti yang terlihat dibawah ini.
<html>
<head>
<title>Tutorial PHP Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h4>Cara Membuat Table Standar dengan Bootstrap | www.maxandro.com</h4>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Jl. Blogger No. 1, Semarang</td>
</tr>
<tr>
<td>2</td>
<td>Max Andro</td>
<td>Jl. Google Indonesia No. 1, Semarang</td>
</tr>
<tr>
<td>3</td>
<td>Andro Tekno</td>
<td>Jl. Blogspot No. 1 Semarang</td>
</tr> </tbody>
</table>
</body>
</html>
Untuk dapat mendesain tampilan tabel menjadi terlihat menarik anda hanya tinggal menambahkan class tabel pada bagian kode "<table class="table">" ganti "tabel" dengan class lainnya,
Jika anda ingin membuat tabel dengan menampakkan garis secara utuh maka tambahkan seperti berikut ini.
<table class="table table-bordered">Untuk menambahkan efek hover tambahkan class pada kode tabel menjadi seperti dibawah ini.
<table class="table table-bordered table-hover">
Cara Membuat Tabel Responsive dengan Bootstrap
Selanjutnya jika anda ingin tampilan tabel anda mengikuti tampilan layar alias responsive anda dapat menambahkan class table-responsive, seperti contoh dibawah ini.<!DOCTYPE html>Maka hasilnya akan terlihat seperti dibawah ini.
<html>
<head>
<title>Tutorial PHP Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h4>Cara Membuat Table Responsive dengan Bootstrap | www.maxandro.com</h4>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Jl. Blogger No. 1, Semarang</td>
</tr>
<tr>
<td>2</td>
<td>Max Andro</td>
<td>Jl. Google Indonesia No. 1, Semarang</td>
</tr>
<tr>
<td>3</td>
<td>Andro Tekno</td>
<td>Jl. Blogspot No. 1 Semarang</td>
</tr> </tbody>
</table>
</div>
</body>
</html>
Sekian Cara membuat tabel dengan bootstrap, mulai dari yang sederhana sampai dengan yang bersifat responsive, semoga dapat berguna dan membantu dalam mendesain tampilan web aplikasi anda.
Silahkan berkomentar dengan baik, asal tidak melanggar peraturan dibawah ini.
1. NO SPAM
2. NO SARA
3. NO LINK AKTIVE
Terimakasih
EmoticonEmoticon