Cara Gampang Menciptakan Tabel Responsive
Sebelum berguru Teknik cepatdangampang Membuat Tabel Responsive maka terlebih lampau kita harus Belajar Membuat Tabel HTML terlebih lampau. Tampilan Responsive dalam dunia website kini ini menyerupai menjadi sebuah keharusan, tampilan responsive sanggup mencakup banyak sekali hal, menyerupai tampilan navigasinya, body, sidebar, tabel, dan umumnya tiruana konten yang berada dalam website diatur sedemikian rupa biar tampil responsive. Responsive saya artikan dengan sederhana yaitu tampilan akan tetap utuh/tidak berubah dikala diakses memakai banyak sekali perangkat dengan ukuran layar yang tidak sama – beda.
Teknik membuat tabel responsive sanggup memakai banyak sekali cara, namun disini Saya ingin pertanda cara tergampangnya untuk membuat tabel responsive. Konsep dasarnya sangat sederhana yaitu menambahkan overflow-x:auto; pada tag <div>, sehingga kurng lebih kodenya menyerupai ini
<div style=”overflow-x:auto”>
<table>
……………………………….
</table>
</div>
Jadi nantinya tabel akan berada didalam tag <div>. Sebenarnya ini khusus untuk tabel – tabel yang mempunyai jumlah data yang besar, sehingga nanti akan muncul sebuah scroll geser di bawah tabel dikala layar pengguna tidak sanggup menampilkan tabel secara keseluruhan. Supaya penerapanya lebih gampang, saya akan menciptakannya dalam sebuah class, misal .res{ overflow-x:auto} sehingga nanti tinggal memanggilnya melalui tag <div>
Berikut ini yaitu pola arahan supaya tabel yang kita buat menjadi Responsive
Bila script diatas dieksekui oleh browser maka akan tampil menyerupai diberikut
Teknik membuat tabel responsive sanggup memakai banyak sekali cara, namun disini Saya ingin pertanda cara tergampangnya untuk membuat tabel responsive. Konsep dasarnya sangat sederhana yaitu menambahkan overflow-x:auto; pada tag <div>, sehingga kurng lebih kodenya menyerupai ini
<div style=”overflow-x:auto”>
<table>
……………………………….
</table>
</div>
Jadi nantinya tabel akan berada didalam tag <div>. Sebenarnya ini khusus untuk tabel – tabel yang mempunyai jumlah data yang besar, sehingga nanti akan muncul sebuah scroll geser di bawah tabel dikala layar pengguna tidak sanggup menampilkan tabel secara keseluruhan. Supaya penerapanya lebih gampang, saya akan menciptakannya dalam sebuah class, misal .res{ overflow-x:auto} sehingga nanti tinggal memanggilnya melalui tag <div>
Berikut ini yaitu pola arahan supaya tabel yang kita buat menjadi Responsive
<html> <head> <title>Table</title> <style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#satu { width: 100%; background-color: #00CCCC; } table#satu tr:nth-child(even) { background-color: #00FFFF; } table#satu tr:nth-child(odd) { background-color:#FFFF00; } table#satu th { background-color: black; color: white; } .res{ overflow-x:auto; } </style> </head> <body> <table id="satu"> <tr> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Umur</th> <th>Hobi</th> <th>Pekerjaan</th> <th>Status</th> </tr> <tr> <td>Andi</td> <td>Dadan</td> <td>30</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> <tr> <td>Dinda</td> <td>Sonia</td> <td>19</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> <tr> <td>Ahmad</td> <td>Salsa</td> <td>25</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> </table> <br> <div class="res"> <table id="satu"> <tr> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Umur</th> <th>Hobi</th> <th>Pekerjaan</th> <th>Status</th> </tr> <tr> <td>Andi</td> <td>Dadan</td> <td>30</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> <tr> <td>Dinda</td> <td>Sonia</td> <td>19</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> <tr> <td>Ahmad</td> <td>Salsa</td> <td>25</td> <td>Petani</td> <td>Peternak</td> <td>Menikah</td> </tr> </table> </div> </body> </html> Bila script diatas dieksekui oleh browser maka akan tampil menyerupai diberikut
Bisa Anda bandingkan sendiri antara tabel A dengan tabel B, tabel A dikala layar diperkecil datanya tidak terlihat tiruana sedangkan tabel B datanya sanggup dilihat tiruana alasannya yaitu dibawahnya terdapat scroll yang sanggup digeser untuk melihat data
Post a Comment for "Cara Gampang Menciptakan Tabel Responsive"