Inilah keunikan dari mbak arlina yang merupakan salah satu dari banyaknya blogger baik indonesia, selain karena gratis juga karya mbak arlina ini juga terkenal dengan keresponsivean nya, yang berarti sangat cocok untuk digunakan untuk blog yang menargetkan pengunjung mobille.
Kembali ke topik saya akan coba membahas cara memasang tabel responsive yang sering digunakan oleh mbak arlina dalam membuat keterangan pada postingan blognya di postingan kita masing-masing, jadi saya dan sobat juga bisa membuat tabel yang seperti pada blog arlinadzgn.
"Kok harus tabel responsive, kenapa bukan tabel biasa saja mas?" mungkin sobat blogger ada yang kepikiran seperti ini jadi ijinkan saya meluruskan pemikiran sobat yang sedang gundah gelisah gegana tersebut, gampangnya karena tabel ini merupakan tabel yang responsive dan menggunakan CSS tentu tabel ini akan berpenampilan menarik dan ukurannya akan mengikuti sesuai ukuran dari layar perangkat, hal ini pastinya akan membuat betah pengunjung yang sedang membaca blog sobat, karena sebagai user pastinya mereka lebih senang dengan tampilan yang indah dan sedap dipandang mata, selain itu pengunjung juga akan memberikan respon positif untuk blog milik sobat, jadi pengunjung akan beranggapan dan menilai blog sobat sebagai blog yang proffessional sehingga besar kemungkinan pengunjung tersebut akan berkunjung kembali ke blog sobat karena merasa blog sobat adalah blog yang bagus dan bermanfaat.
Hal sebaliknya bila memasang tabel biasa tanpa CSS pada struktur kodenya, tentu tabel sobat tampilannya akan standar dan tidak ada indah-indahnya, malah kadang tabel tersebut akan "rusak" bila di buka melalui perangkat mobille karena tabel tersebut memang tidak responsive, hal ini hanya akan menimbulkan pendapat yang buruk dari para pengunjung blog, blog yang sobat kelola akan dicap sebagai blog abal-abal alias tidak proffessional(mesik tidak semua pengunjung bertipe seperti ini), tapi setidaknya kita sebagai owner blog harus memberikan kesan yang baik, jangan sampai malah membuat pengunjung ogah berlama-lama di blog sobat, jangankan berlama-lama saya saja ragu pengunjung akan membaca sampai habis postingan blog sobat bila sobat menggunakan tabel biasa,(bahkan saya ragu ada yang mau baca postingan ini sampai habis *eetdah)
Di bawah ini merupakan hasil tabel bila sobat sukses memasangnya pada blog sobat
| S-TYO TABEL KIRI | S-TYO TABEL KANAN |
|---|---|
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
| Tabel Kiri | Tabel Kanan |
Letakkan CSS berikut di bawah kode ></b:skin>
/* CSS Tabel Responsive */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #2f353c;padding:10px;text-align:left;vertical-align:top;background:#3a434c !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}NB //* Silahkan ganti kode berwarna merah dengan warna background atas yang sobat suka, dan kode warna kuning untuk pembatas tabel, sedangkan untuk kode biru muda adalah kode untuk membuat sub tabel menjadi huruf besar semua, silahkan hapus kode biru muda untuk membuat tulisan menjadi normal** Sisanaya kreasikan saja.Karena kode di atas hanya berupa CSS, maka langkah selanjutnya adalah membuat kerangka tabel malalui tab HTML entri baru, jadi lakukan setiap kali membuat postingan, ingat letakkan pada tab HTML bukan Compose
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>S-TYO KIRI</th> <th>S-TYO KANAN</th> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
<tr> <td>Tabel Kiri</td> <td>Tabel Kanan</td> </tr>
</tbody> </table>Sampai di sini saya rasa sobat pasti mengerti, jadi saya cukupkan dulu postingan saya kali ini, semoga bermanfaat buat sobat semua.
↞Harap sertakan link sumber(aktif) bila ingin mempublikasikan ulang artikel ini↠
