tRikSonic
Tema
/ / Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.46
/ / Bootstrap 3 Table - Tutorial Bootstrap Indonesia

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

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

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

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.