Hallo...
Semangat Pagi !
Terimakasih telah berkunjung di blog saya, kali ini saya akan posting tutorial membuat table responsive menggunakan bootstrap.
Yuk simak !
Pengertian
Bootstrap adalah front-end framework untuk membuat sebuah website yang responsive.
Alat dan Bahan
1. Komputer atau laptop.
2. Sublime text atau text editor lainnya.
Tahap Pelaksanaan
1. Tahap awal buka text editor anda, di sini saya memakai sublime text 3, karena lebih memudahkan dari pada text editor lainnya.
2. Salinlah kode berikut
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>Ini adalah table responsive</p>
<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>
3. Simpan dengan nama_file sesuai dengan keinginan anda, ekstensi harus berupa .html ataupun .php
Jika anda mencoba membuat, pastikan laptop dalam keadaan online.
jika tidak online, ubahlah kode yang saya cetak tebal sesuai file anda, usahakan mendownload terlebih dahulu bootstrap.min.css,bootstrap.min.js, dan
jquery.min.js.
Referensi
www.w3schools.com
Penutup
Trimakasih telah menyimak postingan saya kali ini, sampai jumpa di postingan saya selanjutnya. Selamat mencoba dan selamat belajar !
