Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.46

Tutorial Bootstrap Table

TrikSonic -Tabel HTML digunakan sebagai element yang mewakili Data Tabular, yang berisi informasi data yang terdiri dari kolom dan baris.

Lihat tutorial Tabel HTML untuk mempelajari lebih lanjut tentang tabel.

Dengan bootstrap untuk menampilkan sebuah table sangat mudah untuk dilakukan, efisien, serta memiliki tampilan yang modern.

Default Table

Secara default bootstrap table menggunakan class .table sebagai class dasarnya, yang dituliskan pada element HTML <table>

Contoh :

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>    
  </tbody>
</table>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table</h2>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>    
  </tbody>
</table>

</body>
</html>

Striped Table

Untuk menciptakan warna latar yang berbeda secara bergantian pada setiap baris pada table seperti garis zebra, gunakan class .table-striped pada class dasar .table

Catatan : Table Striped diatur melalui CSS selector nth-child, jadi tidak berlaku untuk browser lama, seperti Internet Explorer 8 kebawah.

Contoh :

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Monica</td>
      <td>7 Tahun</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Rossa</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table Striped</h2>

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Monica</td>
      <td>7 Tahun</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Rossa</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Bordered table

Untuk menampilkan border pada setiap cell yang ada pada table tambahkan class .table-bordered setelah class dasar .table

Contoh :

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table Border</h2>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Hover rows

Table hover digunakan untuk menambahkan warna latar pada setiap baris table, ketika baris table dilewati oleh pointer mouse atau ketika disentuh pada perangkat none mouse.

Untuk menerapkannya cukup menambahkan class .table-hover pada class dasar .table

Contoh :

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table Hover</h2>

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Table Condensed

Table Condensed digunakan untuk membuat table dengan sedikit ketebalan (padding) pada setiap cell yang ada pada table. Biasanya digunakan pada table yang memerlukan banyak ruang seperti mempunyai banyak konten didalamnya ataupun memiliki banyak cell

Untuk menerapkannya tambahkan class .table-condensed setelah class dasar .table

Contoh :

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table Condensed</h2>

<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Contextual class

Beberapa class tambahan yang dapat digunakan, terkait dengan penggunaan table adalah : .active, .success, .info, .warning, .danger

Nama class diatas dapat dituliskan pada element <tr>, <th>, atau <td>

Contoh pada element `<tr>` :

<table class="table">
  <thead>
    <tr>
      <th>Head</th>
      <th>Head</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="success">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="info">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="warning">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="danger">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table</h2>

<table class="table">
  <thead>
    <tr>
      <th>Head</th>
      <th>Head</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="success">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="info">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="warning">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="danger">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Contoh pada element `<th>` dan `<td>` :

<table class="table">
  <thead>
    <tr>
      <th class="warning">Head</th>
      <th class="info">Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">Cell</td>
      <td class="success">Cell</td>
    </tr>
    <tr>
      <td class="success">Cell</td>
      <td class="active">Cell</td>
    </tr>
    <tr>
      <td class="danger">Cell</td>
      <td class="info">Cell</td>
    </tr>
    <tr>
      <td class="warning">Cell</td>
      <td class="danger">Cell</td>
    </tr>
    <tr>
      <td class="info">Cell</td>
      <td class="success">Cell</td>
    </tr>
  </tbody>
</table>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table</h2>

<table class="table">
  <thead>
    <tr>
      <th class="warning">Head</th>
      <th class="info">Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">Cell</td>
      <td class="success">Cell</td>
    </tr>
    <tr>
      <td class="success">Cell</td>
      <td class="active">Cell</td>
    </tr>
    <tr>
      <td class="danger">Cell</td>
      <td class="info">Cell</td>
    </tr>
    <tr>
      <td class="warning">Cell</td>
      <td class="danger">Cell</td>
    </tr>
    <tr>
      <td class="info">Cell</td>
      <td class="success">Cell</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Responsive table

Table Responsive pada bootstrap digunakan untuk mengaktifkan pengguliran secara horizontal.

Pengguliran akan aktif jika konten yang ada pada cell mencapai batas maksimal lebar.

Pengguliran akan aktif dan berlaku pada lebar layar dibawah 768px, dan akan memiliki tampilan seperti biasa jika lebar layar diatas 768px.

Untuk menerapkannya bungkus table dengan element <div> dan berikan nama class .table-responsive

Contoh :

<div class="table-responsive">
  <table class="table">
   ...
  </table>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Table</h2>

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>Lorem ipsum dolor sit amet, feugiat oportere partiendo eu sit, alii eloquentiam cu pri. Ut pri adipiscing definitionem, nulla dolorem reprimique in nec, mei ne iudico splendide. Ei porro persius voluptatibus nam, ponderum patrioque moderatius vis id. Est ei assum singulis.</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>Lorem ipsum dolor sit amet, feugiat oportere partiendo eu sit, alii eloquentiam cu pri. Ut pri adipiscing definitionem, nulla dolorem reprimique in nec, mei ne iudico splendide. Ei porro persius voluptatibus nam, ponderum patrioque moderatius vis id. Est ei assum singulis.</td>
    </tr>    
  </tbody>
</table>
</div>


<!--note-->
<p>
 Rubah ukuran area preview dari yang paling kecil 
 sampai yang paling besar
</p>

</body>
</html>

Tidak ada komentar

Posting Komentar

Untuk menyisipkan sebuah link atau tautan gunakan teks disini
- Tanpa menggunakan https: dan http:
Untuk menyisipkan sebuah kode yang pendek gunakan kode disini
Untuk menyisipkan sebuah kode yang panjang gunakan kode disini
Untuk menyisipkan sebuah teks Tebal gunakan teks tebal disini
Untuk menyisipkan sebuah teks Miring gunakan teks miring disini
Untuk menyisipkan sebuah gambar gunakan url gambar disini

Ketentuan Komentar

Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
Pengguna bertanggung jawab atas komentar yang dikirim
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Judul	`Bootstrap 3 Table - Tutorial Bootstrap Indonesia`
Label	`Bootstrap 3`
Diposting pada	`11 Maret 2018 - 03:37`
Diperbaharui pada	`22 Mei 2018 - 05:46`
Komentar	Tidak ada komentar

Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Tutorial Bootstrap Table

Default Table

Contoh :

Hasil :

Striped Table

Contoh :

Hasil :

Bordered table

Contoh :

Hasil :

Hover rows

Contoh :

Hasil :

Table Condensed

Contoh :

Hasil :

Contextual class

Contoh pada element `<tr>` :

Hasil :

Contoh pada element `<th>` dan `<td>` :

Hasil :

Responsive table

Contoh :

Hasil :

Tidak ada komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label

Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Tutorial Bootstrap Table

Default Table

Contoh :

Hasil :

Striped Table

Contoh :

Hasil :

Bordered table

Contoh :

Hasil :

Hover rows

Contoh :

Hasil :

Table Condensed

Contoh :

Hasil :

Contextual class

Contoh pada element <tr> :

Hasil :

Contoh pada element <th> dan <td> :

Hasil :

Responsive table

Contoh :

Hasil :

Tidak ada komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label

Contoh pada element `<tr>` :

Contoh pada element `<th>` dan `<td>` :