Cara Membuat Table Responsive Keren Di Blog - tutorialarry

Cara Membuat Table Responsive Keren Di Blog – Hai sobat blogger kali ini saya akan berbagi sebuah artikel untuk membut tabel yang responsive. 

Pada dasarnya para blogger membuat artikel ingin agar pembaca merasa nyaman melihat tampilan artikel yang rapi danenak di pandang. Oleh sebab itu jika kalian ingin mengelompokkan sebuah data kedalam sebuah tabel maka anda harus membuat tabel di dalam artikel anda. Tentunya tabel harus responsive.

Kenapa harus memakai tabel yang responsive ?

Alasannya sederhana saja karena agar tabel terlihat bagus dan keren selain itu jika tabel yang anda pakai responsive maka saat ada pembaca yang membuakanya memakai hp android atau smarthphone tabel tidak akan melebar otomatis tabel akan menyesuaikan layar pada versi mobile jadi akan terlihat rapi dan elegan.

Baca Juga : Cara Membuat Sitemap Keren Dan Responsive Otomatis Di Blog

Alasan lain yaitu agar pengunjung betah berlama-lama di blog anda, karena tampilan blog terlihat bersih dan rapi.

Cara Membuat Table Responsive Di Blog

Untuk membuat Tabel yang Responsive caranya cukup mudah sekali.

• Pertama masuk ke blogger pilih theme masuk ke edit html

• Kenmudian Cari kode </b:skin> atau </style>, untuk mempermudah pencarian kode, gunakan ctrl+F

• Setelah ketemu salah satu kode diatas, copy kode / script CSS tabel responsive di bawah ini, dan paste/ taruh tepat diatas salah satu kode </b:skin> atau </style>

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #3d548f;padding:10px;text-align:left;vertical-align:top;background:#2b427d !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body img {width:100% !important;max-width:100% !important;height:auto !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}

@media screen and (max-width:480px){.related-post-style-2 .related-post-item-summary, .related-post-style-2 .related-post-item-thumbnail {display:none !important}}
@media screen and (max-width:414px){.post h1{font-size:180% !important}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}.adspost2{margin:0 15px 15px}}

• Simpan.

 Selanjutnya untuk membuat tabel silahkan copy kode di bawah ini di entri postingan tepatnya di html.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>KOLOM1</th><th>KOLOM2</th>    <th>KOLOM3</th></tr>
<tr><td>TABEL1</td><td>&nbsp;TABEL 1</td><td>TABEL 1</td></tr>
<tr><td>TABEL 2</td><td>TABEL 2</td><td>TABEL 2</td></tr>
<tr><td>TABEL 3</td><td>TABEL 3</td><td>TABEL 3</td></tr>
<tr><td>TABEL4</td><td>&nbsp;TABEL4</td><td>TABEL4</td></tr>
<tr><td>TABEL5</td><td>TABEL5</td><td>TABEL5</td></tr>
<tr><td>TABEL6</td><td>TABEL6</td><td>TABEL6</td></tr>
</tbody> </table>

Maka tampilannya akan seperti tabel di bawah ini :

KOLOM1	KOLOM2	KOLOM3
TABEL1	TABEL 1	TABEL 1
TABEL 2	TABEL 2	TABEL 2
TABEL 3	TABEL 3	TABEL 3
TABEL4	TABEL4	TABEL4
TABEL5	TABEL5	TABEL5
TABEL6	TABEL6	TABEL6

Nah demikian lah cara membuat tabel responsive di blog, semoga cara ini berhasil anda praktekkan jika masih mengalami kesulitan silahkan tinggalkan komentar di kolom komentar di bawah.