Bootstrap Coding Web Desain

Belajar Bootstrap #4: Membuat table dengan Class .Table

Belajar Bootstrap #4: Membuat table dengan Class .Table Agustus 11, 20153 Comments

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

belajar Bootstrap, mengenal bootstrap, tutorial desain web, tutorial bootstrap bahasa Indonesia

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:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

3 comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *