mengenal bootstrap, belajar bootstrap, tutorial bootstrap, apa itu bootstrap

Bootstrap 3 Tutorial – Membuat Table dengan Bootstrap

Dalam artikel ini, kami akan mengajak Anda untuk belajar “bagaimana membuat table dangan bootstrap 3“, mulai dengan nama class yang dipakai untuk membuat table bootstrap, sampai dengan merubah style table bootstrap sehingga tampilannya sesuai dengan apa yang anda inginkan

Nama Class untuk Table

Untuk membuat table di bootstrap, Anda bisa menggunakan nama class .table dalam tag <table>
Contoh HTML Code untuk membuat table Bootstrap sederhana:


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

<div class="container">
<h2>Contoh tabel Bootstrap</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<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>

Hasilnya Sebagai Berikut:

Contoh tabel Bootstrap

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Bootstrap 3 Style Table Lanjutan

Ada beberapa jenis table yang bisa digunakan di dalam Bootstrap 3. beberapa contoh di bawah ini adalah beberapa jenis table yang bisa anda gunakan jika Anda menggunakan bootstrap 3.

1. Striped Rows Table

Striped Rows menggunakan nama class tambahan .table-striped setelah class table default .table, dan akan menghasilkan jenis table dengan gaya zebra (belang putih – gray) seperti di bawah ini:

Striped Rows Table

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

2. Bordered Table

Bordered Table menggunakan nama class tambahan .table-bordered setelah class table default .table, dan akan menghasilkan jenis table dengan border (garis) di sekelilingnya, seperti di bawah ini:

Bordered Table

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

3. Hover Rows Table

Hover Rows Table menggunakan nama class tambahan .table-hover setelah class table default .table, dan akan menghasilkan jenis table yang akan memunculkan highlight di baris yang tersorot,seperti di bawah ini:

Hover Rows Table

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

4. Condensed Table

Condensed Table menggunakan nama class tambahan .table-condensed setelah class table default .table, dan akan menghasilkan jenis table yang akan memunculkan padding lebih besar di sekeliling table,seperti di bawah ini:

Condensed Table

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Semoga Bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>