Cara Membuat Tabel Responsive di Blog

Cara Membuat Tabel Responsive di Blog – Bagi seorang blogger, mengetahui bagaimana cara membuat tabel responsive merupakan salah satu hal yang sangat penting untuk dikuasai. Terlebih lagi bagi anda yang memakai template AMP. Karena mungkin, suatu saat nanti ada konten blog anda yang berisi tabel. Ia kan? 

Apalagi mengingat ada banyak sekali hal yang bisa dilakukan dengan menggunakan tabel. Seperti untuk memperlihatkan beberapa poin secara jelas dan detail. Salah satunya adalah ketika menampilkan spesifikasi ponsel atau alat elektronik yang lainnya.

Karena tidak bisa dipungkiri, bahwa menambahkan pembahasan atau memasukkan pembahasan ke dalam tabel akan membuat pembaca lebih mudah memahami maksud dari tulisan yang dibacanya.

Dalam pembuatan tabel yang responsive, maka anda meski mempunyai aksesibilitas elemen tabel HTML yang baik pula, dan sudah teroptimasi ya, hal ini supaya hasilnya benar benar maksimal, sesuai dengan keinginan dan kebutuhan. Lantas, apa sih yang dimaksud dengan optimasi aksesibilitas elemen?

Sederhananya, yang dimaksud dengan optimasi aksesibilitas elemen ialah mengoptimalkan penggunaan alat yang meski terdapat di dalam tabelnya, mulai dari caption, kemudian kolom, baris, dan yang lainnya. Supaya maksudnya bisa ditangkap pembaca dengan cepat.

Untuk properti yang wajib ada dalam tabel html ada elemen, kemudian html meski mengandung value dengan caption yang akan menjelaskan isi tabel tersebut, ada juga elemen, meski punya atribut scope, seluruh elemen, hingga elemen dengan role=’’collumheader’’ ataupun role=’’row header, meski punya sel data ataupun value yang terkait ya. 

Cara membuat tabel responsive 

Setelah memahami penjelasan tersebut, selanjutnya akan kita bahas cara membuat tabel responsivenya ya. Dan kali ini adalah cara membuat tabel responsive valid amp.

Hal pertama yang dapat anda lakukan adalah dengan masuk ke bagian menu dashboard blog, kemudian pilih yang edit html, dan tambahkan kode css di bagian bawah kode 

<style amp-custom>

.

.rspv-tabel{

 overflow-x:auto;

}

.rspv-tabel thead tr,table tr:nth-child(2n){

 background:#ecf0f1;

}

.rspv-tabel table{

 width:100%;

 background:#f7f9fa;

 border-spacing:0;

 border-collapse:collapse;

 overflow:hidden;

}

.rspv-tabel table caption{

 font-size:18px;

 font-weight:bold;

 text-transform:uppercase;

 padding:10px 0;

}

.rspv-tabel table td,table th{

 padding:8px 10px;

 text-align:left;

 border:1px solid #dedede;

 font-family:sans-serif;

}

.rspv-tabel table tr:hover{

 background:#fff;

}

@media screen and (max-width:800px){

.rspv-tabel{

 overflow-y:hidden;

 -ms-overflow-style:-ms-autohiding-scrollbar;

}

.rspv-tabel table td,table th{

 white-space:nowrap;

}

}

Kalau sudah, bisa klik simpan ya, agar semua perubahannya tersimpan ke sistem.  Cara selanjutnya, anda bisa menampilkan tabelnya ke dalam postingan, simpan kode html tabel yang ada di bawah ke dalam mode edit html, tergantung mau dimana anda meletakkan tabelnya ya.

<div class=”rspv-tabel”>

<table>

 <caption>Daftar Nama Karyawan di IDNXMUS</caption>

 <thead>

    <tr>

      <th scope=”col”>No</th>

      <th scope=”col”>Nama</th>

      <th scope=”col”>Posisi</th>

      <th scope=”col”>Gaji</th>

    </tr>

  </thead>

  <tbody>

     <tr>

       <th scope=”row”>1</th>

       <td>Saipuddin</td>

       <td>Seo Editor</td>

       <td>Rp.3.000.000</td>

     </tr>

     <tr>

       <th scope=”row”>2</th>

       <td>Sainuddin</td>

       <td>Writer</td>

       <td>Rp.2.500.000</td>

     </tr>

     <tr>

       <th scope=”row”>3</th>

       <td>Sairuddin</td>

       <td>Writer</td>

       <td>Rp.2.500.000</td>

     </tr>

     <tr>

       <th scope=”row “>4</th>

       <td>Sailormon</td>

       <td>Seo Editor</td>

       <td>Rp.4.000.000</td>

     </tr>

  </tbody>

</table>

</div>

Dan sekarang, tinggal sesuaikan saja bagian header, caption, dan juga nilai sesuai dengan contoh di atas. Kalau misalnya anda ingin melihat demonya, maka anda dapat melakukan pengecekan lewat jsfiddle. 

Bagaimana, mudah sekali bukan? Dan sekarang, anda sudah bisa membuat tabel responsive sendiri dengan mudah ke blog anda. Demikian, semoga bermanfaat, dan selamat mencoba. Bagi yang punya temen blogger juga, dan masih bingung bagaimana cara membuat tabel responsive, bisa membagikan artikel ini ke mereka ya.

Check Also

aplikasi aku si peternak lele

Download Aplikasi Aku Si Peternak Lele Terbaru

Download Aplikasi Aku Si Peternak Lele – Hai sobat kembali lagi dengan Kami, Disini kami …