Membuat halaman web tidak terlepas dari penggunaan tabel. dengan tabel kita bisa mengelompokkan berbagai informasi dengan lebih mudah. Membuat tabel yang responsif atau bisa mengikuti lebar device yang sedang mengakses web kita merupakan hal yang sangat penting. Mengapa tabel yang responsif sangat penting, tentu saja karena halaman web tidak hanya di buka pada laptop atau komputer saja, tetapi gadget dengan berbagai ukuran juga bisa mengakses web kita. Dengan kondisi seperti ini maka halaman web harus lah responsif begitu juga dengan tabel yang ada didalamnya.
Untuk membuat halaman web yang responsif kita bisa menggunakan framework css seperti bootsrap, zurb dan berbagai framework lain. Bila anda ahli java script mungkin anda bisa membangun table responsif ini sendir. Untuk membuat tabel yang responsif sendiri membutuhkan waktu yang tidak sedikit. Untuk mengatasi ini anda bisa gunakan zurb. pada situs zurb dokumentasi dan contoh cukup lengkap dan membantu.
Untuk keperluan membuat tabel yang responsif silahkan anda download contoh dan file .js yang membuat kegiatan membuat tabel responsif ini jauh lebih mudah.
Tidak ada perbedaan mendasar pada pembuatan tabel responsif ini dengan menggunakan komponen tabel biasa dengan menggunakan kode HTML hanya saja kita harus menambahkan beberapa komponen seperti berikut
<link rel="stylesheet" href="stylesheets/globals.css"><link rel="stylesheet" href="stylesheets/typography.css"><link rel="stylesheet" href="stylesheets/grid.css"><link rel="stylesheet" href="stylesheets/ui.css"><link rel="stylesheet" href="stylesheets/forms.css"><link rel="stylesheet" href="stylesheets/orbit.css"><link rel="stylesheet" href="stylesheets/reveal.css"><link rel="stylesheet" href="stylesheets/mobile.css"><!-- End Combine and Compress These CSS Files --><link rel="stylesheet" href="stylesheets/app.css"><link rel="stylesheet" href="responsive-tables.css"><script src="javascripts/jquery.min.js"></script><script src="responsive-tables.js"></script>
Selanjutnya kita buat tabel seperti biasa hanya saja dengan menambahkan class pada table sebagai berikut
<table class="responsive"> <tr> …
Baca Juga: Membuat halaman WEB Responsif