Cara Membuat Tabel Super Responsive di Blog

Cara Membuat Tabel Super Responsive di Blog - Bagaimanakah cara membuat tabel responsive?, tabel ini biasa di gunakan bagi mereka yang suka membagikan Tutorial yang berhubungan dengan dokumen, menu daftar, dan jenis tabel yang lainya, untuk membuat tabel di blog kita cuma bermain dengan kode HTML tag </table>, <tr><td>.




Ketiga kode itu dirangkai sehingga menjadi sebuah tabel. Banyak para blogger membagikan tutorial pembuatan tabel tetapi tidak ada penambahan kode CSS nya sehingga tabel tersebut tidak memiliki kemampuan Responsive jika blog di akses via seluler.

Agar tabel responsive bisa menyesuaikan dengan resolusi layar berbagai ukuran ketika blog di akses via seluler anda perlu menambahkan kode CSS dan tempatkan di atas kode biskin, jika di template anda sudah ada kode CSS silahkan hapus dan ganti dengan kode tabel dibawah.!

Silahkan buka edit template anda, copy dan letakkan kode berikut di atas kode

]]></b:skin>

/* CSS Post Table by trikpos*/
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.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;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#f53b3b;color:#fff;}
.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;}
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;}

contoh Tabel via seluler posisi miring

Contoh Tabel via seluler posisi berdiri
Baca juga : Cara Membuat Tabel di Postingan Blog Lengkap

Tabel 1:

<table>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
</table>

maka akan menjadi tebel seperti ini

Calon Donatur	Nama	Nominal
Calon Donatur	Nama	Nominal
Calon Donatur	Nama	Nominal

Tabel 2:

<table>
<tr><td colspan="2">Daftar Donatur</td> </tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

maka akan menjadi tebel seperti ini

Daftar Donatur
1	Nama
2	Nama
3	Nama

Tabel 3:

</table>
<tr><td rowspan="4">Daftar Donatur</td></tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

maka akan menjadi tebel seperti ini

Daftar Donatur
	1	Nama
	2	Nama
	3	Nama

Mudah bukan...? Demikian penjelasan kami mengenai "Cara Membuat Tabel Super Responsive di Blog" Semoga bisa menjadi referensi serta bermanfaat bagi anda.