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.

3 komentar dari postingan "Cara gampang membuat tabel responsive pada postingan blog"

  1. Thanks infonya gan, mantap tabelnya... Jan lupa mampir, brohabir.blogspot.com

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

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com