Bootstrap 3 Table - Tutorial Bootstrap Indonesia
Tutorial Bootstrap Table
TrikSonic -Tabel HTML dipakai sebagai element yang mewakili Data Tabular, yang berisi info data yang terdiri dari kolom dan baris.
Lihat tutorial Tabel HTML untuk mempelajari lebih lanjut ihwal tabel.
Dengan bootstrap untuk menampilkan sebuah table sangat gampang untuk dilakukan, efisien, serta mempunyai tampilan yang modern.
Default Table
Secara default bootstrap table memakai 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 membuat warna latar yang berbeda secara bergantian pada setiap baris pada table menyerupai 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, menyerupai 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 sehabis class dasar .tableContoh :
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 dipakai untuk menambahkan warna latar pada setiap baris table, dikala baris table dilewati oleh pointer mouse atau dikala disentuh pada perangkat none mouse.
Untuk menerapkannya cukup menambahkan class
.table-hover pada class dasar .tableContoh :
<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 dipakai untuk membuat table dengan sedikit ketebalan (padding) pada setiap cell yang ada pada table. Biasanya dipakai pada table yang memerlukan banyak ruang menyerupai mempunyai banyak konten didalamnya ataupun mempunyai banyak cell
Untuk menerapkannya tambahkan class
.table-condensed sehabis class dasar .tableContoh :
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 perhiasan yang sanggup digunakan, terkait dengan penggunaan table yakni :
.active, .success, .info, .warning, .dangerNama class diatas sanggup 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 dipakai untuk mengaktifkan pengguliran secara horizontal.
Pengguliran akan aktif bila konten yang ada pada cell mencapai batas maksimal lebar.
Pengguliran akan aktif dan berlaku pada lebar layar dibawah 768px, dan akan mempunyai tampilan menyerupai biasa bila lebar layar diatas 768px.
Untuk menerapkannya bungkus table dengan element
<div> dan berikan nama class .table-responsiveContoh :
<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 hingga yang paling besar </p> </body> </html>