Belajar Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
BELAJAR BOOTSTRAP
Setelah sebelumnya kita mempelajari pengertian Bootstrap kini kita akan mempraktekanya secara langsung bagaimana cara menggunakan Bootstrap dan pada tutorial kali ini kita akan membuat sebuah Tabel Responsive dengan Bootstrap. Untuk membuat tabel sangatlah mudah sobat hanya memasukkan class - class bootstrap yang berfungsi untuk mendesign tabel. Adapun beberapa class Bootstrap yang berguna untuk mendesign tabel.
- .table
Class ini berfungsi untuk mendefinisikan atau membuat tabel sederhana / standar - .table-strip
Merupakan class tambahan untuk membuat tabel dengan Bootstrap. Berfungsi untuk membuat baris tabel yang bergaya belang - belang ( strip ) - .table-bordered
Berfungsi untuk membuat tabel yang memiliki garis dan ketebalan garisnya dapat kita atur dan merupakan class tambahan untuk membuat tabel - .table-hover
Berfungsi untuk memberikan evek hover, yaitu ketika kursor kita arahkan pada tabel maka garis tabel akan mengeluarkan gaya tersendiri seperti bercahaya dan merupakan class tambahan untuk membuat tabel bootstrap
- .success
class ini digunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data - .danger
class ini digunakan untuk memberi warna merah pada table row atau table data - .info
class ini digunakan untuk memberi warna biru pada table row atau table data - .warning
class ini digunakan untuk memberi warna kuning pada table row atau table data
Untuk membuat atau mendesign table dengan Bootstrap buat sebuah file php atau html. Disini saya membuat file belajar2.html. Untuk cara Penggunaanya telah dibahas pada tutorial sebelumnya
belajar2.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>membuat Table Dengan Bootstrap | SCRIPT_KIDDIES</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Perhatikan pada contoh diatas, kita hanya perlu menambahkam class "table" tag <table> pembuka dan hasilnya tampilan table akan seperti diatas
MEMBUAT TABLE BORDER DENGAN BOOTSTRAP
Untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table_bordered" bersamaan dengan class "table". Contohnya
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Membuat Table Dengan Bootstrap : Script_Kiddies</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
MEMBUAT TABLE STRIP DENGAN BOOTSTRAP
Membuat table dengan warna belang - belang kita dapat meggunakan class " table-striped"
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Membuat Table Dengan Bootstrap : Script_Kiddies</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
MEMBUAT TABLE HOVER DENGAN BOOTSTRAP
Seperti tutorial diatas untuk membuat table hover caranya sangat mudah, sobat tinggal memanggil class " table-hover " pada tag pembuka " <table> "
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Membuat Table Dengan Bootstrap : Script_Kiddies</h1>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>MENGGANTI WARNA TABLE DENGAN BOOTSTRAP
Untuk mengganti warna table dengan Bootstrap adalah dengan memberikan class pada tag <td> atau <tr> untuk classnya sudah saya jelaskan diatas dan berikut adalah cara penggunaanya
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Membuat Table Dengan Bootstrap : Script_Kiddies</h1>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="success">
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td class="warning">2</td>
<td class="info">Mie Goreng</td>
<td class="danger">7.000</td>
</tr>
<tr class="info">
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr class="warning">
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Dapat kita simpulkan jika kita menaruh classnya pada tag <tr> maka satu baris kolom akan ganti warnanya, jika kita menaruh pada tag <td> maka hanya 1 kolom yang berganti warnanya, setiap class memiliki warna tersendiri yang sudah saya jelaskan diatas
KESIMPULAN
Sekian cara Membuat Table Dengan bootstrap. Sobat hanya perlu menambahkan class-class table pada Bootstrap untuk membuat table sesuai keinginan. Dan tentu setelah sobat mempelajari Cara Membuat Table Dengan Bootstrap ini pasti sobat telah menemukan sendiri apa kelebihan Bootstrap dalam hal design interface website.
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar