cara membuat table dengan menggunakan class di bootstrap

Pada tutorial kali ini anda akan belajar bagaimana cara membuat table dengan menggunakan class di bootstrap .

Hallo kembali lagi di artikel tutorial dumet school , kali ini saya akan membahas tentang bootstrap yaitu tentang bagaimana cara membuat table dengan menggunakan class di bootstrap .

Dalam bootstrap tersedia beberapa bentuk (style) table yang bisa Anda pergunakan sesuai dengan keperluan dan selera Anda. Cara membuat table dengan bentuk yang berbeda cukup dengan mengganti nama class sesuai dengan bentuk table yang diinginkan

Contoh-contoh class yang bisa di gunakan dalam pembuatan table di bootstrap adalah sebagai berikut:

Class .table merupakan class yang paling mendasar dalam pembuatan tabel pada bootstrap. ada beberapa jenis class lain yang bisa Anda gunakan diantaranya:

.table-striped Untuk membuat tabel dengan gaya Zebra
.table-bordered Untuk membuat tabel dengan border di pinggir table
.table-hover Untuk membuat tabel dengan efek hove

langsung saja saya akan memberikan contoh penggunaanya :

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Dasar Pembuatan Tabel pada Bootstrap</h3>
  <p>Ini adalah Table bootstrap dengan menggunakan class .table Silahkan Anda coba dengan nama class lain untuk mendapatkan style yang diinginkan:</p>            
  <table width="1000px" class="table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

setelah di jalankan maka haislnya akan seperti demo berikut :

DEMO

tinggal kalian ganti-ganti saja classnya sesuai yang di inginkan, oke itu saja dari saya untuk tutorial cara membuat table dengan menggunakan class di bootstrap. Sampai bertemu pada artikel selanjutnya.

Membuat Table Dengan Menggunakan Class Di Bootstrap

Kategori