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:
- Memahami Potensi Penuh CRM Dipa untuk Akselerasi Bisnis Anda Memahami Potensi Penuh CRM Dipa Untuk Akselerasi Bisnis Anda - CRM (Customer Relationship Management) adalah sebuah aktivitas yang dijalankan perusahaan untuk mengelola, memonitor, analisis, dan melaksanakan strategi diantara hubungan dengan…
- Cara Menghapus Akun Instagram Orang Lain Cara Menghapus Akun Instagram Orang Lain – Ketika memutuskan untuk menggunakan instagram, ada banyak riisko yang harus kita hadapi. Salah satunya adalah risiko untuk diganggu oleh seseorang yang mungkin merupakan…
- Bagaimana CRM Sirogu Bisa Membantu Anda Meningkatkan… CRM Sirogu adalah solusi bisnis yang modern yang dapat membantu memaksimalkan pelanggan dan menginformasikan proses bisnis Anda. Sirogu dapat memastikan efisiensi penjualan dan layanan purna jual yang tinggi, serta membantu…
- 5 Manfaat Yang Didapat Dengan Menggunakan CRM Sirogu Com 5 Manfaat Yang Didapat Dengan Menggunakan CRM Sirogu Com - CRM Sirogu Com merupakan alat digital canggih yang mampu meningkatkan proses bisnis Anda. CRM Sirogu Com dapat membantu Anda meningkatkan…
- Login Zoho CRM Yang Tepat Login Zoho CRM Yang Tepat - Cara login Zoho CRM yang tepat merupakan hal yang perlu diketahui bagi setiap pengguna layanan Zoho CRM. Zoho CRM merupakan salah satu platform CRM…
- 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…
- Memahami Komponen CRM, Penting Untuk Usaha Anda Memahami Komponen CRM, Penting Untuk Usaha Anda - CRM (Customer Relationship Management) merupakan aspek penting dalam bisnis modern. Tanpa mengirimkan informasi dan layanan yang menarik dan relevan kepada pelanggan dan…
- Cara Menggunakan CRM Zoho Dengan Mudah Cara Menggunakan CRM Zoho Dengan Mudah - CRM Zoho adalah salah satu aplikasi yang paling digunakan untuk mengorganisir dan mengelola interaksi dengan pelanggan. CRM Zoho menyediakan berbagai fitur berbasis web…
- 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 Menggunakan PT CRM Untuk Meningkatkan Usaha Anda Cara Menggunakan PT CRM Untuk Meningkatkan Usaha Anda - PT CRM adalah solusi teknologi yang dapat membantu Anda memperluas jangkauan bisnis Anda serta meningkatkan pengalaman pelanggan Anda dengan lebih baik.…
- 6 Tips Meningkatkan Traffic Pengunjung Blog Di Tahun 2021 6 Tips Meningkatkan Traffic Pengunjung Blog Di Tahun 2021, Tak bisa dipungkiri lagi oleh kebanyakan blogger atau pemilik website mereka semua pastinya memilki tujuan utama yaitu agar situs mereka memiliki…
- Apa Itu CRM BCA Dan Bagaimana Manfaatnya? Apa Itu CRM BCA? CRM BCA merupakan Customer Relationship Managementyang menyediakan solusi untuk meningkatkan mutu layanan pelanggan BCA. Manfaat CRM BCA adalah memberikan solusi berdasarkan kebutuhan pelanggan, menjaga hubungan baik…
- Syarat Agar Blog Diterima Adsense Syarat Agar Blog Diterima Adsense – Dewasa ini, semakin banyak orang orang yang tertarik untuk bekerja secara digital. Dan salah satu yang paling banyak diminati adalah dengan menjadi seorang blogger.…
- Arti CRM: Solusi Untuk Meningkatkan Loyalitas Pelanggan Arti CRM: Solusi Untuk Meningkatkan Loyalitas Pelanggan - Arti CRM adalah solusi untuk mempertahankan dan meningkatkan loyalitas pelanggan. Arti CRM memberikan cara yang efektif bagi perusahaan untuk mengelola dan meningkatkan…
- Apa Itu Admin CRM dan Bagaimana Cara Kerjanya? Apa Itu Admin CRM dan Bagaimana Cara Kerjanya? - Admin CRM merupakan alat untuk manajemen pelanggan (Customer Relationship Management) yang berguna untuk menyimpan dan mengelola informasi tentang pelanggan Anda secara…
- 5 Manfaat Dari Penggunaan Salesforce CRM Untuk Bisnis Anda 5 Manfaat Dari Penggunaan Salesforce CRM Untuk Bisnis Anda - Satu hal yang harus diperhatikan setiap bisnis untuk tumbuh dan sukses adalah Customer Relationship Management (CRM). Penggunaan Salesforce CRM dapat…
- Kumpulan Materi CRM Yang Efektif Kumpulan Materi CRM Yang Efektif - Customer Relationship Management (CRM) merupakan cara yang efektif untuk mengelola hubungan dengan para pelanggan. Dengan mengintegrasikan CRM kedalam strategi bisnis, perusahaan dapat meningkatkan efisiensi,…
- Kenali Apa Itu Contoh CRM Dan Bagaimana Cara Menggunakannya Kenali Apa Itu Contoh CRM Dan Bagaimana Cara Menggunakannya - Kenali Apa Itu Contoh CRM dan Bagaimana Cara Menggunakannya? Customer Relationship Management (CRM) adalah suatu strategi pemasaran yang mengkhususkan pada…
- 5 Manfaat Penggunaan CRM Qontak Untuk Bisnis Anda 5 Manfaat Penggunaan CRM Qontak Untuk Bisnis Anda - Saat ini, tren teknologi telah memberikan banyak manfaat bagi berbagai bisnis, khususnya dalam meningkatkan efisiensi; salah satunya adalah penggunaan sistem CRM…
- Mengenal Metode Manajemen CRM Suvarna Sutera Mengenal Metode Manajemen CRM Suvarna Sutera - Metode Manajemen CRM (Customer Relationship Management) merupakan bagian dari strategi bisnis yang penting dan digunakan oleh perusahaan untuk membantu mereka meningkatkan produktivitas dan…
- Rekomendasi Aplikasi Perekam Suara Terbaik Rekomendasi Aplikasi Perekam Suara Terbaik – Selama ini masih banyak banget yang belum tahu, bahwa ternyata kita bisa loh melakukan rekaman lewat laptop atau komputer. Jadi, nggak cuma bisa ngerekam…
- 10 Game RPG Terbaik untuk Pecinta Game Petualangan dan… Game RPG Terbaik untuk Pecinta Game Petualangan dan Fantasi - Jika Anda seorang penggemar game petualangan dan fantasi, maka game RPG adalah salah satu jenis game yang pasti tidak bisa…
- 5 Kelebihan Menjadi CRM Specialist 5 Kelebihan Menjadi CRM Specialist - CRM Specialist merupakan sebuah profesi yang cukup penting di dunia digital. Sebagai seorang CRM Specialist, Anda memiliki tanggung jawab mengelola dan menyediakan pelanggan dengan…
- Fungsi Dan Pemahaman CRM Santika Fungsi Dan Pemahaman CRM Santika - Sistem CRM Santika dapat memberikan manfaat yang besar bagi bisnis Anda. Ini memberikan platform berbasis web yang akan membantu Anda mengelola pelanggan Anda dengan…
- Strategi Terbaru Optimasi SEO Untuk Blogger Bagi Pemula Dikesempatan kali ini sedikit akan kami terangkan untuk cara mengoptimasi SEO bagi para blogger pemula, mengapa hal ini penting dilakukan ? tujuannya untuk kemajuan blog itu sendiri dimasa depan nanti…
- 21 Manfaat CRM Kesehatan Untuk Peningkatan Pelayanan… 21 Manfaat CRM Kesehatan Untuk Peningkatan Pelayanan Kesehatan - Teknologi yang semakin berkembang telah mendukung perkembangan daerah kesehatan. Salah satu alat inovatif yang dapat dimanfaatkan adalah CRM Kesehatan. CRM kesehatan…
- CRM Software CRM Software (Customer Relationship Management) adalah solusi teknologi yang membantu perusahaan dalam mengelola dan meningkatkan hubungan dengan pelanggan. Dengan menggunakan CRM Software, perusahaan dapat menangani kegiatan-kegiatan penting seperti merekam informasi…