Tabel Responsive dengan Bootstrap
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara Membuat Tabel responsive menggunakan Bootstrap
A. Pengertian
Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar.
Ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja
B. Latar belakang
Latar
belakang belajar tentang materi kali ini adalah agar kita bisa Membuat tampilan Tabel untuk web kita agar bisa menyesuaikan dengan layar monitor.
C. Alat dan Bahan
1. Komputer / laptop.
2. Text editor.
3. Bootstrap.
D. Tujuan
Untuk membuat Tabel dengan desain responsive
E. Langkah - langkah
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 dengan format " tabel.html atau tabel.php "
F. Referensi
Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb