Cara Membuat Tabel Responsive Dengan Css Di Blogger

Sebenarnya membuat sebuah tabel itu sangatlah mudah dan tidak perlu memakai css juga sudah bisa Tabel di tampillkan, baik itu pada halaman statis atau halaman postingan blogger, guna untuk melengkapi sebuah artikel yang di buat.

Cara Membuat Tabel Responsive Dengan Css Di Blogger

Tapi yang jadi masalah nya terkadang Tabel yang sudah kita buat tidak sesuai dengan Semua tampilan layar, jika di lihat dari destop tampilan Tabel terlihat bagus, tapi jika di buka melalui ponsel tampilanya tidak sesuai dengan layar, Terkadang tampilan tabel bisa melebar kesamping dan menyulitkan pengunjung untuk melihat isi postingan di dalam blog kita.

Oleh karena itu disini saya akan berbagi sedikit ilmu dan muda mudahan saja ilmu yang saya bagikan ini ada manfaatnya dan bisa membantu saudaraku yang kebetulan saat ini lagi mencari tutorial tentang ini.

Cara Membuat Tabel Yang Responsive Dengan Css Di blogger

Seperti yang sudah kita semua ketahui bahwa sekarang ini sudah hampir 100% pengguna internet sudah kebanyakan beralih ke seluler, dan hal ini bisa menjadi tampilan blog kurang ramah pada pengunjung jika postingan yang menggunakan tabel tidak di buat responsive. Karena jika postingan yang menggunakan tabel tidak di buat responsive, maka tampilan tabel akan terpotong atau bisa melebar kekanan atau kekiri kalau di buka melalui ponsel

Dengan begitu sudah di pastikan para pengunjung pasti akan kesulitan melihat isi postingan pada blog yang menggunakan tabel. Nah lalu bagaimana cara membuat tabel yang responsive pada semua ukuran layar

Untuk membuat tabel yang responsive pada semua ukuran layar, dan cara membuatnya pun juga tidaklah susah. Mari ikuti panduan dan step step yang saya berikan di bawah ini :

1. Langkah pertama seperti biasa Login atau Masuk dulu ke Dashboard blogspot Anda
2. Lalu pilih Tema atau template kemudian klik tanda segitiga yang mengarah kebawah dan pilih Edit HTML
3. Selanjutnya cari kode ]]></b:skin>  .Caranya, tekan Ctrl+F, lalu masukkan kode ]]></b:skin> ke kolom pencarian, kemudian tekan Enter anda akan di tunjukkan kode tersebut dengan highlight warna kuning.
4. Langkah berikutnya Letakkan kode Css di bawah ini tepat di atas kode ]]></b:skin> pada Editor template

Berikut ini adalah kode Css yang bisa membuat tabel menjadi responsive di semua ukuran layar, silahkan anda salin semua kodenya lalu letakkan kode Css berikut Tepat di atas kode ]]></b:skin> Pada template blog

/* Css Post Table Responsive */

 .post-body table td,.post-body table caption{border:1px solid #222222;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #222222;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #222222;} .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;} .post-body table tr:nth-child(even) > td {background-color:#1589e3;} .post-body table tr:nth-child(even) > td:hover {background-color:#222222;} .post-body th{background:#eeeeee;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} 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%} .widget ul {padding:0;}

Pastikan bahwa kode css di atas telah terpasang dengan benar dan sesuai dengan petunjuk di atas, jika sudah untuk langkah selanjutnya klik SIMPAN Template.

Contoh untuk Tabel dua Kolom seperti di bawah ini

Contoh tampilan tabel dua kolom

Contoh untuk Tabel yang tiga Kolom Seperti di bawah ini sobat

Contoh tampilan tabel tiga kolom

Nah lalu bagaimana cara menampilkan tabel seperti contoh di atas pada halaman postingan dan halaman statis di blogger. Caranya pun cukup mudah, untuk panduan dan step stepnya ikuti petunjuknya sebagai berikut :

1. Yang pertama seperti biasa Login atau Masuk dulu di akun blogger masing masing
2. Yang kedua buatlah postingan seperti biasa
3. Dan yang ketiga, pada mode penulisan, pilih mode HTML jangan mode Menulis
4. Yang keempat, silahkan anda salin kode HTML tabel berikut dan tempel di postingan yang anda buat

Dan berikut ini adalah kode HTML tabel yang harus anda salin lalu tempel di halaman postingan yang telah anda buat.

Kode Tabel Dua Kolom Sebagai Berikut :

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>

<tr> <th>Contoh Kolom 1</th> <th>Contoh Kolom 2</th> </tr>

<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>

<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr>

<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr>

<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> </tr>

<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> </tr>

</tbody> </table>

Kode Tabel tiga Kolom Sebagai Berikut :

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>

<tr><th>Contoh Kolom 1</th><th>Contoh Kolom 2</th> <th>Contoh Kolom 3</th></tr>

<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>

<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>

<tr><td>Baris 3 Kolom 1</td><td>Baris 3 Kolom 2</td><td>Baris 3 Kolom 3</td></tr>

<tr><td>Baris 4 Kolom 1</td><td>Baris 4 Kolom 2</td><td>Baris 4 Kolom 3</td></tr>

<tr><td>Baris 5 Kolom 1</td><td>Baris 5 Kolom 2</td><td>Baris 5 Kolom 3</td></tr>

<tr><td>Baris 6 Kolom 1</td><td>Baris 6 Kolom 2</td><td>Baris 6 Kolom 3</td></tr>

<tr><td>Baris 7 Kolom 1</td><td>Baris 7 Kolom 2</td><td>Baris 7 Kolom 3</td></tr>

</tbody> </table>

PENJELASAN : Untuk warna tabel di atas hanyalah sebagai contoh, namun jika anda kurang suka dengan warnanya, atau anda ingin menyesuaikan warna tabel tersebut dengan templete blog sobat, silahkan di ganti warna background dan border nya melalui Css tabel responsive yang telah anda pasang di templete blog sobat.

Oke saya rasa cukup sampai di sini dulu ya postingan mengenai cara membuat tabel responsive di blogger semoga apa yang tercantum dalam artikel ini bisa membantu saudara ku semua, dan tak lupa saya ucapkan banyak banyak terima kasih atas waktu dan kunjungan anda. 

Salam Blogger Indonesia

Lokasi: Kalimantan Timur, Indonesia

Berbagi :