×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

Cara gampang membuat tabel responsive pada postingan blog

Banyak sekali di pencarian google yang memberikan tutorial script tabel namun ujung-ujungnya tidak responsiv terhadap blog yang kita miliki, juga tidak sedikit pula yang kesal akan hal tersebut. Dari masalah ini admin akan memberikan tutorial cara gampang membuat tabel responsive pada postingan blog.

Walaupun kita telah menggunakan tema blog yang sudah responsive sekalipun, sering kali kita melihat tabel yang telah kita buat pada postingan tidak responsive sehingga saat menggunakan smartphone maupun tablet terlihat tabel yang terpotong keluar dari batas postingan. Tentu saja hal ini membuat kita sang pemilik blog maupun user merasa terganggu karena akan ada postingan yang tidak lengkap akibat terpotong maupun keluar jalur ketika dibaca menggunakan smartphone maupun tablet.

Lalu bagaimana cara mengatasi hal tersebut??

Mari ikuti langkah-langkahnya sebagai berikut:

Cara gampang membuat tabel responsive pada postingan blog

1. Masuk dashboard blog
2. Klik menu tema
3. Klik html
4. Cari kode ]]></b:skin> (ctrl+f untuk mempermudah pencarian
5. copy kode dibawah ini lalu pastekan diatas 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) &gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &gt; td:hover {background-color:#0082d8;} .post-body th{background:#008080;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=&quot;_blank&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;}
6. Selanjutnya simpan tema
7. Selanjutnya masuk ke postingan lalu klik HTML lalu pastekan kode tabel dibawah ini
<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>
Catatan:
Ubah jumlah tabel dan nama-nama pada tabel tersebut sesuai keinginian.

DEMO LIHAT DI BAWAH INI
Header Kolom 1Header Kolom 2 Header Kolom 3
Baris 1 Kolom 1Baris 1 Kolom 2Baris 1 Kolom 3
Baris 2 Kolom 1Baris 2 Kolom 2Baris 2 Kolom 3
Baris 3 Kolom 1Baris 3 Kolom 2Baris 3 Kolom 3
Baris 4 Kolom 1Baris 4 Kolom 2Baris 4 Kolom 3
Baris 5 Kolom 1Baris 5 Kolom 2Baris 5 Kolom 3
Baris 6 Kolom 1Baris 6 Kolom 2Baris 6 Kolom 3
Baris 7 Kolom 1Baris 7 Kolom 2Baris 7 Kolom 3

Itulah tadi tips sederhana cara gampang membuat tabel responsive pada postingan blog semoga bermanfaat untuk blog kalian yang mengalami masalah yang sama seperti yang telah dijelaskan diatas. Terimakasih sudah berkunjung.
Buka komentar
Tutup komentar
  1. Thanks infonya gan, mantap tabelnya... Jan lupa mampir, brohabir.blogspot.com

    BalasHapus
  2. Panjang amat ya skripnya, padahal ada cara lebih sederhana ...

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup