Sumpuk.Net

Berbagi cerita dan pengalaman

  • Home
  • Blog
  • About
  • Contact

Cara Mudah Membuat Tabel Responsive di Blogspot

Bagi yang belum tahu cara membuat tabel yang responsive di blogspot, silakan simak tutorial cara mudah membuat tabel responsive di blogspot berikut ini.

Walaupun kita telah menggunakan theme yang responsive, seringkali tabel yang kita buat pada postingan tidak responsive, sehingga pada saat blog di buka menggunakan smartphone atau tablet ada sebagian tabel yang terpotong.

Tentu saja hal itu tidak baik, karena akan ada informasi yang tidak lengkap ketika postingan blog di baca menggunakan smartphone atau tablet.

Lantas bagaimana caranya membuat tabel responsive?

Ikuti langkah-langkah di bawah ini:

Cara Mudah Membuat Table Responsive di Blogspot
Table Responsive di Blogspot

Cara Mudah Membuat Table Responsive di Blogspot

1. Memasang kode CSS

  • Login ke Dashboard blogspot Anda
  • Pilih Theme lalu klik Edit HTML
Cara Mudah Membuat Tabel Responsive di Blogspot
Edit HTML
  • Cari kode ]]></b:skin>  caranya, tekan Ctrl+F
Cara Mudah Membuat Tabel Responsive di Blogspot
Kode CSS
  • Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* CSS Post Table */
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .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) &amp;gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &amp;gt; td:hover {background-color:#0082d8;} .post-body th{background:#bcdbfe;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=&amp;quot;_blank&amp;quot;]: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;}

Salin Kode

  • Pastikan bahwa kode telah di tempatkan dengan benar seperto terlihat pada gambar di bawah ini
Cara Mudah Membuat Tabel Responsive di Blogspot
Kode CSS Tabel Responsive
  • Terakhir, klik Simpan Tema

Jika diinginkan, Anda bisa mengubah huruf serta latar belakang sesuai dengan keinginan. Caranya lihat kode CSS dan gambar di atas yang saya tandai.

Setelah pemasangan kode CSS untuk tabel responive selesai, berikutnya adalah bagaimana cara membuat tabel pada postingan blog

2. Cara Membuat Tabel Responsive pada Postingan Blog

Untuk membuat tabel pada postingan blog, caranya sangat mudah sekali. Cukup tempel kode di bawah ini pada area postingan mode HTML. Seperti terlihat pada gambar di bawah ini

Cara Membuat Tabel Responsive pada Postingan
Cara Membuat Tabel pada Postingan

Contoh Tabel 2 kolom 5 baris

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>
<tr> <th>Header Kolom 1</th> <th>Header 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>

Salin Kode

Dan hasilnya akan terlihat seperti gambar dibawah ini:

Cara Membuat Tabel pada Postingan Blog
Tabel 2 kolom 5 bqris

Contoh Tabel 3 kolom 5 baris

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>
<tr><th>Header Kolom 1</th><th>Header Kolom 2</th> <th>Header 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>

Salin Kode

Dan hasilnya akan terlihat seperti gambar di bawah ini:

Tabel 7 baris 3 kolom

Demo Tabel Responsive

Itulah tadi tips sederhana cara membuat tabel responsive pada postingan di blogspot. Dengan tabel yang responsive maka tidak akan ada masalah lagi jika postingan pada blog kita di buka menggunakan smartphone atau tablet.

Update!

Jika mengalami masalah saat tabel dibuka menggunakan smartphone, seperti sebagian kolom yang menyempit sehingga tidak nyaman untuk dibaca, maka Anda harus mengatur lebar salah satu kolom yang bermasalah tersebut dengan lebar tertentu atau dengan ukuran yang fix.

Sebelum kita melanjutkan bagaimana cara mengatur lebar kolom pada tabel responsive ini, kita lihat terlebih dahulu contoh tabel yang lebar kolomnya tanpa diatur dan  yang lebar kolomnya diatur pada ukuran tertentu (fix).

Kita akan melihat perbedaan kedua tabel ini bila di buka menggunakan smartphone.

Lihat dua gambar berikut ini:

Cara Mudah Membuat Tabel Responsive di Blogspot
Tabel responsive lebar kolom tanpa di atur
Cara Mudah Membuat Tabel Responsive di Blogspot
Tabel responsive lebar kolom diatur

Agar tabel responsive bisa rapi seperti gambar di atas, maka pada kolom yang sebelah kiri harus kita buat lebarnya secara fix. Cara nya adalah sebagai berikut:

Cara Mengatur Lebar Kolom Pada Tabel Responsive

Untuk mengatur lebar kolom pada tabel responsive ini caranya sangat mudah, Anda tinggal menambahkan kode seperti ini width=”100px”. Sehingga kode tabel nya seperti berikut:

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>
<tr> <th width=”100px”>Header Kolom 1</th> <th>Header 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>

Anda bebas menentukan berapa lebar kolom sesuai kebutuhan dengan cara mengganti 100px dengan angka pilihan Anda. Untuk kolom sebelah kanan biarkan lebar kolom nya otomatis, agar tabel melebar atau mengecil dengan sendirinya sesuai ukuran layar pembaca blog kita.

Jika Anda ingin tahu perbedaan kedua tabel di atas, silakan buka link berikut ini menggunakan smartphone Anda.

Demo Tabel Kolom Diatur

Semoga bermanfaat,

Mungkin Anda tertarik juga untuk membaca:

Cara Mengatasi JavaScript Yang Memblokir Rendering

FacebookTweet

Filed Under: Blogging, Tips, Tutorial Tagged With: Blogging, Blogspot, Tutorial

Comments

  1. Adi says

    27 Mei 2019 at 07:21

    Gan kan sudah saya praktekan dan berhasil tapi ada masalah jika kolom yang kita buat ada banya maka akan terpotong pada tampilan mobilan, nah cara mengatasinya mungkin dengan membuat tabel tersebut bisa di scroll horizontal .

    Tolong buatin cssnya gan biar dapat di scroll horizontal.

    Balas
  2. Priant Taruh says

    19 September 2019 at 20:07

    Makasih buat sharingnya gan, btw saya juga ada share artikel yang sama di blog saya cuman tabelnya beda.

    Balas
  3. Teguh Andika says

    20 Oktober 2019 at 07:25

    Terima kasih gaes… work di blogspot

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Search

Recent Posts

Cara Mudah Transfer Saldo OVO ke ShopeePay

Cara Mudah Nonton Pertandingan Juventus di Liga Champions Secara Live

Tips Memilih Konsultan Hukum untuk Perusahaan

Cara Nonton Live Streaming Shopee Liga 1 2020 Menggunakan Aplikasi Vidio




Kategori

Copyright © Sumpuk.Net