Cara Membuat Tabel HTML Keren Responsive di Blogger

Cara Membuat Tabel HTML Keren Responsive di Blogger

Cara Membuat Tabel HTML Keren Responsive di Blogger
Cara Membuat Tabel HTML Keren Responsive di Blogger

Hallo sobat ruangcoder, admin akan memberikan Cara Membuat Tabel HTML Keren Responsive di Blogger  , nah sobat bagaimana sih membuat Tabel yang Responsive di Blogger, bagi sebagian sobat ruangcoder yang mempunyai blog tentang teknologi atau berita tentang spesifikasi handphone pasti akan menyertakan spesifikasi handphone itu sendiri dong, tentu sobat memerlukan sebuah Tabel yang Responsive di Blogger sobat untuk dapat mengisi tentang spesifikasi handphone sobat , tidak hanya itu saja admin sendiri sering menemukan penggunaan Tabel ini, dimana bisa buat tentang pengumuman nilai, atau pengumuman kelulusan secara online.

Perlu sobat ketahui walau sobat sudah menggunakan sebuah Theme / Template pada blogger sobat yang katanya sudah responsive sering kali untuk penggunaan tabel ini tidak responsive , responsive disini yang dimaksud responsive saat tampilan berada dalam mode Mobile / Smartphone, tabel tersebut sering kali terpotong ataupun melewati layar smartphone kalian, sehingga kalian sibuk menggeser - geser layar smartphone kalian kesamping untuk mengetahui isi informasi detail yang ada pada tabel tersebut. Tabel pada artikel yang admin ketikkan sekarang umumnya sering digunakan namun ada sedikit perubahan yaitu dengan tambahan efek warna memanjang saat cursor pointer sobat menyentuh pada tabel tersebut.

Seperti yang admin jelaskan tabel ini sangat cocok digunakan untuk membuat suatu pengumuman online atau tentang spesifikasi handphone, karena akan lebih mempermudah atau memperjelas isi dari pada pengumuman atau spesifikasi tersebut. Dengan menggunakan tabel membuat blog sobat tersendiri terlihat lebih rapih dan tentu membuat pengunjung sobat nyaman karena tertstruktur artikelnya, dan untuk membuat tabel responsive ini cukup mudah hanya menambahkan sebuah code di dalam tema kita, begitu juga dengan pemakainnya kita hanya menggunakan tag label pada postingan kita , tentu menggunakan suatu tag label sobat harus mengetikannya di dalam mode HTML. Oke langsung saja tanpa banyak basa - basi kita akan masuk ke tahap pembuatannya yaitu membuat tabel HTML responsive di Blogger pastinya sangat mudah pemasangan terhadap tabel ini.

Cara Membuat Tabel Keren Responsive di Blogger


1. Langkah pertama silahkan sobat masuk ke Dashboard blogger sobat kemudian klik pada bagian menu Tema kemudian , klik pada menu bagian Edit HTL
2. Selanjutnya silahkan sobat cari dengan cara CTRL + F kode ]]></b:skin> atau </style> sobat bisa langsung letakkan kode dibawah ini tepat diatasnya


/* Tabel Blogger Responsive By RuangCoder */

table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.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;}
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%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}

Nah disini sebenernya sobat sudah selesai membuat tabel sobat responsive dan keren tentunya , untuk penggunaan nya cukuplah mudah sobat, dalam membuat tabel pada postingan blog, sobat pilih Entri Baru > pilih tab HTML (bukan yang compose) lalu sobat letakkan kode di bawah ini ke dalam postingan :

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Menu1</td><td>Ya</td> </tr>
<tr><td>Menu2</td><td>Ya</td> </tr>
<tr><td>Menu3</td><td>Ya</td> </tr>
<tr><td>Menu4</td><td>Ya</td> </tr>
<tr><td>Menu5</td><td>Ya</td> </tr>
</tbody> </table>

Keterangan : Silahkan sobat ubah pada menu dengan data yang sobat ingin masukan. Jika sobat ingin menambahkan jumlah tabel lagi di bawahnya silahkan sobat tambahkan kode <tr><td>Menu</td><td>Ya</td> </tr> tepat berada diatas kode </tbody> </table> tadi.

Nah sobat cukup mudah bukan dalam membuat tabel responsive keren dan berwarna pada blog sobat , ya mungkin tutorial nya sampai sini saja, karena ya cukup mudah dalam membuatnya, dan semoga bermanfaat buat sobat nya, sampai jumpa di artikel selanjutnya sobat.

Anda mungkin menyukai postingan ini