Cara Membuat Table Responsive Keren Di Blog - tutorialarry

Table Responsive Keren

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 :

KOLOM1KOLOM2 KOLOM3
TABEL1 TABEL 1TABEL 1
TABEL 2TABEL 2TABEL 2
TABEL 3TABEL 3TABEL 3
TABEL4 TABEL4TABEL4
TABEL5TABEL5TABEL5
TABEL6TABEL6TABEL6

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.

2 Responses to "Cara Membuat Table Responsive Keren Di Blog - tutorialarry"

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.

Iklan Tengah Artikel 2