Berjumpa kembali dengan saya Hernowo pada tips dan trik seputar dunia website, yang ada di Dumet School. Kali ini saya akan membahas bagaimana Cara Membuat Tabel Responsif Dengan jQuery Mobile dan kita juga akan mengimplementasikannya. Sebelum memulai saya akan menjelaskan tentang tabel responsive pada jQuery Mobile, desain responsif berguna ketika kita ingin konten halaman tampilan mobile apalagi tabel merupakan bagian dari pembuatan layout yang biasanya untuk menampilkan data informasi misalkan biodata seseorang. Dan didalam jQuery Mobile ada 2 macam jenis yang bisa kita gunakan yaitu reflow tabel dan Column Toggle Table.
reflow tabel yang artinya posisi data tabel secara horizontal hingga mencapai ukuran minimum, maka semua baris dikelompokkan bersama secara vertikal.
Column Toggle Table yang artinya Kolom “beralih” mode will hide kolom ketika tidak cukup lebar untuk menampilkan data pada saat tampilan mobile.
Kesimpulannya adalah jika table pada tampilan desktop maka data di dalam tabel akan horizontal namun pada saat tampilan mobile data akan di pindahkan secara vertical, dan sama saja dari reflow tabel beralih ke Column Toggle Table.
Baik, saatnya kita praktekkan Cara Membuat Tabel Responsif Dengan jQuery Mobile, seperti biasa teman – teman siapkan text editornya dan install terlebih dahulu jQuery Mobile nya lalu copy script di bawah ini
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Styling Column Toggle Table</h1>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Usia</th>
<th>Alamat</th>
<th>Kota</th>
<th>Kode Pos</th>
<th>Negara</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>27 tahun</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquería</td>
<td>23 tahun </td>
<td>Mataderos 2312</td>
<td>México D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>30 tahun</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
Kemudian pastekan di dalam tag <body>, selanjutnya tambahkan css nya untuk memberikan bordernya
<style>
tr {
border-bottom: 1px solid lightgray;
}
</style>
Jika sudah, save dan jalankan pada browser nya, maka tampilan desktop seperti gambar di bawah ini
Jika di kecilkan ke ukuran mobile maka dengan otomatis data akan di alihkan secara vertical
Bisa teman – teman lihat datanya akan otomatis vertical sesuai nomor urutannya, bagaimana..?? Sangat Mudah bukan..??
Sekian pada tips dan trik kali ini tentang Cara Membuat Tabel Responsif Dengan jQuery Mobile, kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan menjadi bahan latihan untuk teman – teman yang saat ini sedang belajar membuat halaman website khusus tampilan mobile.
Terimakasih dan Sampai Jumpa 🙂