Cara Membuat Table Sederhana dan Responsive Dalam Postingan
 |
| Screenshot contoh tampilan table |
Sobat pasti sering menemukan tampilan table dalam postingan, apalagi di situs atau blogger yang membahas tentang spesifikasi smartphone. Kurang lebih contoh tampilannya seperti di bawah ini.
| Nama | Keterangan |
|---|---|
| Contoh 1 | Contoh A |
| Contoh 2 | Contoh B |
| Contoh 3 | Contoh C |
| Contoh 4 | Contoh D |
| Contoh 5 | Contoh E |
| Contoh 6 | Contoh F |
Apakah sobat pernah berpikir bagaimana cara mereka membuat table tersebut dalam postingan ? Nah jika kebetulan sobat sedang mencari cara membuat table dalam postingan di blog, silahkan sobat catat langkah - langkah pembuatannya.
Atau copas saja langkah langkahnya ini kemudian sobat simpan di memo jika suatu saat sobat membutuhkannya untuk suatu postingan artikel tertentu yang harus di sisipkan table, jadi sobat tidak perlu repot lagi mencari cara membuat table dalam postingan.
Ok, buat yang mau mencatat atau langsung mempraktekannya silahkan sobat ikuti langkah - langkah ini
Pertama masuk atau login ke blog sobat kemudian pilih Edit HTML lalu sobat cari kode ]]></b:skin> atau </style> setelah kode tersebut terlihat kemudian simpan atau letakan kode CSS dibawah ini tepat diatas kode </style> atau ]]></b:skin>. Kalo saya menaruhnya di atas kode ]]></b:skin>
/* Table Post */
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 #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.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) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.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%}Setelah selesai kilik Save atau simpan
Untuk warna backgroun silahkan sobat sesuaikan sendiri sesuai warna yang sobat sukai atau sobat inginkan.
Sekarang cara membuat table dalam postingan.
Seperti biasa sobat masuk ke halaman entri baru (halaman untuk membuat postingan baru). Setelah sobat beres membuat artikel, ketika saatnya membuat table, sobat ganti dulu dari mode Compose ke mode HTML (letaknya ada di bagian kiri atas di bawah nama blog).
Kemudian masukan script untuk memanggil tablenya dan sobat isi menu - menu di dalam table tersebut sesuai dengan keterangan yang mau sobat jelaskan dalam menu table. Setelah selesai kemudian sobat klik pratinjau terlebih dahulu untuk memastikan apakah sudah sesuai atau belom.
Jika menurut sobat sudah sesuai langsung saja klik publikasikan.
Oh iya hampir lupa,, ini dia script untuk memanggil tablenya. Kalau baris table nya menurut sobat kurang atau lebih banyak, silahkan sobat atur sendiri sesuai keinginan.
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Nama</th> <th>Keterangan</th> </tr>
<tr> <td>Contoh 1</td> <td>Contoh A</td> </tr>
<tr> <td>Contoh 2</td> <td>Contoh B</td> </tr>
<tr> <td>Contoh 3</td> <td>Contoh C</td> </tr>
<tr> <td>Contoh 4</td> <td>Contoh D</td> </tr>
<tr> <td>Contoh 5</td> <td>Contoh E</td> </tr>
<tr> <td>Contoh 6</td> <td>Contoh F</td> </tr>
</tbody> </table>Begitulah cara membuat table sederhana dan responsive dalam postingan, selamat mencoba dan semoga bermanfaat.
Belum ada Komentar untuk "Cara Membuat Table Sederhana dan Responsive Dalam Postingan"
Posting Komentar