Belajar Bootstrap (3. Table)

Belajar Bootstrap (3. Table)

Kali ini kita akan membahas tentang table pada bootstrap. Langsung dipraktekan kode kode dibawah ini agar memahami secara penuh

Penggunaan table dasar

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<h3>Dasar table</h3>
		<table class="table">
			<thead>
				<tr>
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

Membuat table menjadi efek seperti zebra yaitu tinggal menambah class table-striped

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<h3>table striped</h3>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

Table diberi garis / bordered

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<h3>bordered</h3>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

Efect hover pada table

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<h3>efek hover (arahkan kursor ke table)</h3>
		<table class="table table-hover">
			<thead>
				<tr>
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

untuk memperkecil padding pada table sehingga lebih padat dan rapat

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr>
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

Contextual classes
Kita gunakan sebagai pewarnaan pada table yang telah disediakan oleh bootstrap. Beberapa class yang tersedia yaitu .active , .success, .info, .warning, .table
ex.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
		<h2>Belajar table</h2>
		<h3>Dasar table</h3>
		<table class="table">
			<thead>
				<tr> 
					<th>No.</th>
					<th>Nama</th>
					<th>Alamat</th>
				</tr>
            </thead>
			<tbody>
				<tr class="danger">
					<td>1</td>
					<td>Satu</td>
					<td>alamat1</td>
				</tr>
				<tr class="info">
					<td>2</td>
					<td>Dua</td>
					<td>alamat2</td>
				</tr>
				<tr class="active">
					<td>3</td>
					<td>tiga</td>
					<td>alamat3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

hasil

Table Responsive
responsive table akan membuat table menampilkan scroll horizontal jika device berkuran lebih kecil dari 768px

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar table</title>
</head>
<body>
	<div class="container">
	  	<h2>Table</h2>                                                                                      
	  	<div class="table-responsive">          
	  		<table class="table">
	    		<thead>
	      			<tr>
				        <th>#</th>
				        <th>Firstname</th>
				        <th>Lastname</th>
				        <th>Age</th>
				        <th>City</th>
				        <th>Country</th>
	      			</tr>
	    		</thead>
			    <tbody>
			      	<tr>
				        <td>1</td>
				        <td>Anna</td>
				        <td>Pitt</td>
				        <td>35</td>
				        <td>New York</td>
				        <td>USA</td>
			     	</tr>
			    </tbody>
	  		</table>
	  	</div>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

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