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.

1. Penggunaan Class .table Pada Bootstrap

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 hover

2. Penulisan Class

Nama Class langsung di tuliskan di tag table seperti <table class="table">. Source lengkap sebagai berikut:


<!DOCTYPE html>
<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">
		<h2>Basic Table</h2>
		The .table class adds basic styling (light padding and only horizontal dividers) to a table:
		<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>

DEMO

Incoming search terms:

(Visited 450 times, 1 visits today)