Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML Atas

Beranda / Tips / Tips Blogger

Cara Membuat Table Responsive Pada Postingan Blog

Oleh Renna
Table pada postingan blog biasanya digunakan untuk menampilkan list supaya terlihat rapi, beda halnya ketika kita membuat list tanpa memakai table, postingannya pun akan kurang enak dilihat.
Membuat table di blog tidak seperti membuat table di microsoft office, fiturnya pun sudah disediakan, kita tinggal tambahkan atau isi seberapa banyak table yang kita butuhkan dan tablepun sudah jadi. Nah kalau diblog biasanya ada kode-kode yang harus kita tambahkan lalu di panggil didalam postingan artikel kita.
membuat table responsive - kored.id

Table dalam blog biasanya sering digunakan blog dengan niche penyedia template blog, jadi daftar fitur suatu template yang ditampilkanpun bisa tertata dengan baik dan akan terlihat rapi juga. Ada banyak cara untuk membuat table pada blog,  namun saya sering menemukan table yang mereka buat tidak responsive untuk di terapkan dalam sebuah postingan blog, maka dari itu saya akan membagikan beberapa cara untuk Membuat Tabel responsive dengan menambahkan warna pada kolom-kolomnya. Selain responsive, table yang akan saya bagikan ini sangat enak untuk dilihat dan sangat cocok untuk blog yang sering memposting fitur-fitur untuk sebuah template.

Ada 2 style table responsive yang akan Kored Id bagikan sekarang. caranya membuatnyapun sangat mudah untuk di praktekan kembali. Anda hanya tinggal menambahkan kode css nya dan memanggil kode css tadi ke dalam postingan anda. oke langsung saja,

Baca Juga :

Cara Membuat Table Responsive Pada Postingan Blog

Tabel Style 1
1. Seperti Biasa Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Kemudian, Cari kode Css ]]></b:skin> atau </style> (Gunakan ctrl+ Untuk Mencarinya)
4. Lalu Copy kode dibawah ini dan Paste tepat sebelum kode ]]></b:skin> atau </style>

table{background-color:transparent;width:100%;max-width:100%;margin-bottom:20px}
table img{width:100%;height:auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0}
th{text-align:left}
.table{width:100%;max-width:100%;margin-bottom:20px}
.table a{text-decoration:none!important}
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{padding:8px;line-height:1.42857143;vertical-align:top}
.table > thead > tr > th{background-color:#26C281;color:#fff;vertical-align:bottom}
.table > thead > tr > th a{color:#fff!important}
.table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0}
.table > tbody > tr:nth-of-type(odd){background-color:#f9f9f9}
table col[class*="col-"]{position:static;display:table-column;float:none}
table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none}
.table-responsive{min-height:.01%;overflow-x:auto}
@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive > .table{margin-bottom:0}.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{white-space:nowrap}.table-responsive > .table-bordered{border:0}}

5. Kemudian, Simpan Tema

Kode diatas merupakan kode css untuk membuat suatu table pada postingan blog, nah sekarang cara menambahkan tabel kedalam postingannya.


Cara Menerapkan Table Kedalam Postingan Blog

1. Masih di dasboard Blogger
2. Pilih Postingan -> Entri Baru
3. Pilih Tab HTML bukan Compose
4. Lalu Tambahkan atau Sisipkan kode ini didalam postingan anda
<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>Nama Blog</th>
    <th>Keterangan Blog</th>
    <th>Platform Blog</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Renna.id</td>
    <td>Pemilik Blog kored.id</td>
    <td>Blogger</td>
  </tr>
  <tr>
    <td>Renna1</td>
    <td>Renna2</td>
    <td>Renna3</td>
  </tr>
  <tr>
    <td>Renna</td>
    <td>Renna</td>
    <td>Renna</td>
  </tr>
</tbody>
</table>
</div>
5. Rubah tulisan yang diberi warna merah sesuai keinginan atau kebutuhan anda.
6. Lalu pratinjau terlebih dahulu untuk melihat hasilnya

Baca Juga :
Tabel Style 2
Lang-langkahnya sama seperti table style 1

1. Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode Css ]]></b:skin> atau </style>
4. Lalu Copy kode dibawah ini dan Paste tepat sebelum/ diatas kode ]]></b:skin> atau </style>

/* Table Responsive */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:14px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#ecf0f1;}
.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="_blank"]: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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
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%}

5. Simpan Tema
Cara Menerapkan kedalam postingan

1. Pilih Postingan -> Entri Baru
2. Pilih Tab HTML
3. Lalu Sisipkan kode ini didalam postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama Blog</th><th>Keterangan Blog</th> <th>Platform Blog</th> </tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
<tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr>
</tr>
</tbody>
</table>

4. Silahkan rubah tulisan yang diberi warna merah sesuai keinginan atau kebutuhan anda.
Jika Membutuhkan 2 Table saja silahkan hapus antara <td> dan (Tulisan)</td></tr>

Demikian Cara Membuat Table Responsive Pada Postingan Blog. Gunakan salah satu saja ya. Table responsive diatas bisa digunakan diberbagai macam template blog. Semoga bisa diterapkan kedalam blog anda.


Sumber kode : Analis Yuki. Namina Kiky