Membuat Tabel HTML Responsive dengan CSS di Blog

Kamu pernah membuat tabel di HTML? Apabila iya, artikel ini pas. Untuk itu, lanjutkan simak sampai kebawah ya. Karena topik yang dibawakan sekarang cukup menarik yaitu : Membuat Tabel HTML Responsive dengan CSS di Blog. Blog disini ditujukan untuk pembuatan blog nya di blogger, untuk secara HTML secara offlinenya next time ya. Dari judul ini mungkin muncul pertanyaan kenapa harus responsive? Berawal dari maraknya penggunaan gadget, dimulai dari smartphone sampai tablet. Tampilan situs webiste/blog harus mengikuti ukuran layar ponsel secara fleksibel, karena begitu banyak nya orang yang menggunakan gadget untuk melakukan aktifitas nya dalam berselancar di internet. Terlepas dari pada itu, tabel pun yang kita tahu begitu banyak kegunaannya, mau tidak mau/bahkan harus menjadikan tabel yang responsive. Ya..kalau tidak mau ditinggal langsung oleh pengunjung. hehe

Mungkin apabila kamu buka di laptop/PC tabel akan normal - normal saja. Tapi, coba dibuka di gadget smartphone yang ukuran layarnya cukup sempit, maka tabel tidak mengikuti layar atau malah menyamping, melampaui batas layar bagian samping.

Pembuatan tabel untuk di web menggunakan kode HTML, tetapi harus ada penunjang nya agar tabel menjadi responsive yaitu dengan kode CSS. Karena disini tidak akan mengulas lebih dalam mengenai apa itu CSS. Bagi yang ingin tahu mengenai dasar nya mari bisa baca di : Pengertian dan Mengenal tag CSS dasar.

Kembali ke topik yang sekarang kita bahas, mari langsung saja praktekan.

#Membuat Tabel Standar
Buat postingan baru di blog
Ke tab HTML, kamu ketikan kode dibawah ini

<table border=1>

<tr>

<th>Spesifikasi</th>

<th>Minimum</th>

</tr>

<tr>

<td>Processor</td>

<td>500 MHz</td>

</tr>

<tr>

<td>RAM</td>

<td>256 MB(512 MB up recomended</td>

</tr>

 </table>

Silakan Publikasikan
Apabila kamu lihat hasil nya sampai sini, tabel belum responsive dan tampilannya masih biasa saja
Untuk itu mari kita lanjut ke tahap selanjutnya

#Membuat CSS

• Menuju menu Template
• Kemudian Edit HTML
• Akan muncul kotak tempatnya kode-kode HTML
• Langsung cari kode </head> (cara cepat : CTRL+F lalu ketikan </head>)
• Ketikan kode dibawah, diatas kode </head>

/* CSS Post Table by JT*/



.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}



.post-body table.tr-caption-container {border:1px solid #d8dde1;}



.post-body th{font-weight:700;}



.post-body table caption{border:none;font-style:italic;}



.post-body table{}



.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}



.post-body th{background:#109C02;color:#fff;}



.post-body table.tr-caption-container td {border:none;padding:8px;}



.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}



.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}



img {max-width:100%;height:auto;border:none;}



table {max-width:100%;width:100%;margin:1.5em auto;}



table.section-columns td.first.columns-cell{border-left:none}



table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}



table.columns-2 td.columns-cell{width:50%}



table.columns-3 td.columns-cell{width:33.33%}



table.columns-4 td.columns-cell{width:25%}



table.section-columns td.columns-cell{vertical-align:top}



table.tr-caption-container{padding:4px;margin-bottom:.5em}



td.tr-caption{font-size:80%}

• Kemudian kamu coba Simpan dan Lihat hasilnya
• Selamat tabel nya sudah responsive mobile

Hasilnya kurang lebih seperti dibawah ini :

Tabel standar (baca : banyak digunakan) diatas apabila tidak terlalu membutuhkan banyak bagian kepala dari struktur tabel tersebut. Seperti contoh diatas kan hanya membuat bagian Spesifikasi dan Minimum saja. Ada lagi bentuk tabel yang mengharuskan bagian kepala tabel nya banyak, seperti yang digunakan untuk tabel spesfikasi handphone, motor, dan lain lain.

#Membuat Tabel bentuk kedua(spesifikasi handphone,motor,dll)

• Buat postingan baru di blog
• Masuk ke tab HTML, lalu ketikan kode dibawah

<table border=1>

<tr>

<th width=35%>Peluncuran</th>

<td>Januari 2016</td>

</tr>

<tr>

<th width=35%>Kartu SIM</th>

<td>Dual SIM (Nano-SIM/ Micro-SIM, dual stand-by)</td>

</tr>

</table>

• Terakhir Publikasikan dan lihat hasilnya

Hasilnya kurang lebih seperti dibawah ini :

Seperti itulah artikel tutorial mengenai Membuat Tabel HTML Responsive dengan CSS di Blog, dengan membuat tabel yang responsive bisa memanjakan dan membuat betah pengunjung yang membukanya dengan menggunakan gadget.