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.

Related Posts:

  • 6 Cara Membuat Podcast di Spotify, Lengkap dan Detail 6 Cara Membuat Podcast di Spotify, Lengkap dan Detail – Beberapa tahun terakhir, podcast menjadi salah satu model aplikasi yang sangat ramai diperbincangkan oleh banyak orang. Dan biasanya, tidak sedikit…
  • Rekomendasi Aplikasi Edit Video Online Terbaik Rekomendasi Aplikasi Edit Video Online Terbaik – Makin hari, tampaknya makin banyak bermunculan aplikasi edit video online terbaik ya. Di mana, aplikasi model ini memungkinkan anda untuk mengedit video dengan…
  • √ Cara Membuat Safelink Klik 2x Pada Blog Utama Pada kesempatan kali ini saya akan membagikan sebuah tutorial cara membuat safelink klik 2x pada blog utama tanpa harus membuat blog baru, pastinya safelink ini sangat berguna bagi anda dengan…
  • Template Terbaik Untuk Blog Streaming Film Dan Anime Kali ini saya akan membagikan sebuah template blog gratis untuk kalian semua yang ingin membuat blog dengan niche streaming film, anime atau download responsive dan cukup elegenat untuk di terapkan…
  • Cara Memasang Lazy Load Iklan Otomatis Adsense Di Blogger Memasang Lazy Load Adsense – Pada kesempatan kali ini saya akan membagikan sebuah script untuk mempercepat loading blog kalian menggunakan lazy load adsense khususnya untuk iklan otomatis, menggunakan script ini…
  • √ Ini Dia Cara Membuat Widget Berlangganan Keren Pada Blog Memasang widget berlangganan keren seperti di Blog, yap tentunya para blogger disini tak asing lagi bukan dengan tampilan widget berlangganan yang keren untuk blog sobat ,banyak yang bilang kalau widget…
  • Rekomendasi Aplikasi Drum Android Terbaik Menghabiskan waktu sembari bermain alat musik adalah pilihan yang sangat tepat untuk anda yang suka dengan hal-hal yang unik. Nah yang paling menariknya adalah alat musik alat musik yang pada…
  • Akun yang Lagi Hits di Instagram Tahun 2022 Akun yang Lagi Hits di Instagram Tahun 2022 – Di antara banyanya akun di instagram, sebagian besar di antara anda mungkin ada yang penasaran sebenarnya akun siapa sih yang lagi…
  • Rekomendasi Aplikasi yang Lagi Hits dan Kekinian Rekomendasi Aplikasi yang Lagi Hits dan Kekinian  – Kita semua bisa menemukan berbagai macam jenis aplikasi di Google Play Store dengan App Store.  Dan mungkin, ada beberapa orang yang bertanya-tanya…
  • Mengenal Aplikasi Root Eksplorer dengan Baik Mengenal Aplikasi Root Eksplorer dengan Baik – Ada yang pernah mendengar nama aplikasi root eksplorer? Nah, bagi yang belum pernah dengar, kemudian agak penasaran dengan aplikasi satu ini, bisa ikuti…
  • (DOC) Surat Perjanjian Kontrak Pengadaan Barang Dan Jasa Dalam kontrak pengadaan barang dan jasa dengan nilai lebih dari 200jt tentunya akan dibutuhkan surat perjanjian kontrak, hal ini berhubungan dengan Peraturan Presiden Nomor 12 Tahun 2021 tentang Perubahan Atas…
  • Rekomendasi Aplikasi Pembuat Mind Mapping Terbaik Rekomendasi  pembuat Aplikasi Mind Mapping Terbaik  – Untuk menyederhanakan ide, ada banyak hal yang bisa anda lakukan. Salah satunya adalah dengan menggambarkannya dalam bentuk mind mapping. Beberapa di antara anda…
  • Twibbon Hari Lahir Pancasila Twibbon Hari Lahir Pancasila – Banyak dari kita yang lupa dengan tanggal 1 juni 2022 itu merupakan hari yang bersejarah. Pasti kamu juga baru tau atau malahan lupa, Kalau tanggal…
  • Cara Membuat Meta Tag SEO Friendly Valid HTML5 Pada Blogger Meta Tag SEO Friendly, Kali ini saya akan memberikan informasi mengenai cara membuat blog SEO menggunakan meta tag dan Valid HTML5 namun sebelumnya izinkan saya untuk memberitahukan terlebih dahulu mengenai…
  • Rekomendasi Aplikasi Film Terpopuler untuk Ipad dan Iphone Rekomendasi Aplikasi Film Terpopuler untuk Ipad dan Iphone – Sebagai pecinta film, atau sebagai seseorang yang punya hobi nonton, anda meski mengetahui aplikasi apa saja yang bisa digunakan untuk mengakses…
  • Cara Membuat Sitemap Statis Di Halaman Blog Cara membuat sitemap halaman dengan tampilan seperti blog arlinadzgn dengan mudah, namun sebelumnya saya sudah membahas mengenai cara membuat sitemap dengan tampilan yang responsive di blogger,Mengingatkan kembali bahwa sitemaps ini…
  • Penyebab dan Cara Mengatasi Facebook Lite yang Tidak Bisa… Penyebab dan cara mengatasi Facebook Lite yang tidak bisa dibuka – Facebook Lite merupakan aplikasi versi minimalis dari aplikasi Facebook. Hal ini dikarenakan ukurannya yang jauh lebih kecil dibandingkan aplikasi…
  • 3 Rekomendasi Aplikasi Penghasil Uang 2021 yang Terbukti… 3 Rekomendasi Aplikasi Penghasil Uang 2021 yang Terbukti Membayar Langsung ke Rekening- Aplikasi penghasil uang 2021 merupakan salah satu jenis aplikasi yang telah ada sejak beberapa tahun belakangan. Dan menariknya, aplikasi…
  • Rekomendasi Aplikasi Pelacak HP Android yang Hilang Rekomendasi Aplikasi Pelacak HP Android yang Hilang – Ketika kehilangan ponsel, apa yang akan anda lakukan? Menangis dan khawatir secara berlebihan? Sedih? Depresi? Memang, kehilangan ponsel adalah salah satu musibah…
  • Aplikasi Foto Online Terbaik, Berikut Rekomendasinya Rekomendasi Aplikasi Foto Online terbaik – Tahukah anda, bahwa di zaman yang serba digital ini semakin banyak variasi profesi yang beredar di sekitar kita. Dan ini menandakan bahwasanya semakin banyak peluang…
  • Cara Mengatasi Telegram Nggak Bisa Kirim Pesan Cara mengatasi telegram gak bisa kirim pesan – Selain banyak menggunakan aplikasi WhatsApp, masyarakat Indonesia juga banyak yang menggunakan aplikasi telegram. Karena sebenarnya kedua aplikasi tersebut tergolong mempunyai banyak kesamaan.…
  • Cara Memperbanyak Followers Instagram yang Mudah cara memperbanyak followers instagram yang mudah – Pada umumnya, setiap pengguna instagram pasti ingin mempunyai banyak followers kan? Karena memang, ada kebanggaan tersendiri ketika kita memilikinya. Dan menariknya, kebanggaan tersebut…
  • Cara Membuat Kotak Pembungkus Script Di Postingan Blog Image by gTheMesh form PixabaySering kali kita mendapati sebuah artikel yang membagikan sebuah script atau kode tidak terlihat rapih dan berantakan yang membuat tampilan postingan atau blog sendiri menjadi friendly.Sebenarnya cara itu…
  • Berikut, Cara Mengatasi GPS Tidak Akurat Cara mengatasi GPS tidak akurat – Sebagai pengguna GPS Anda pasti pernah mengalami berbagai macam masalah. Dan masalah yang paling umum terjadi ialah lokasi yang gak akurat, tidak berjalan, dan…
  • Cara Mengatasi Telegram yang Tidak Bisa Mengirim Pesan Cara mengatasi telegram yang tidak bisa mengirim pesan – Dewasa ini aplikasi telegram menjadi salah satu aplikasi berkirim pesan singkat secara instan yang sangat ramai digunakan oleh orang-orang. Termasuk masyarakat…
  • Cara Menang Giveaway di Instagram Cara menang giveaway di Instagram – Sebagai pengguna media sosial ada pasti sering menemukan postingan-postingan giveaway di berbagai macam media sosial yang digunakan. Termasuk di Instagram. Dan biasanya hadiah yang…
  • Rekomendasi Aplikasi Olahraga Peninggi Badan Terbaik Rekomendasi Aplikasi Olahraga Peninggi Badan Terbaik – Sampai saat ini, siapa sih yang ingin punya tubuh tinggi? Jawabannya, pasti nyaris semua orang pasti ingin punya tinggi yang semampai, apalagi jika…

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 …

Copyright 2023 Lewatinaja.com