Cara Membuat Tabel Keren Responsif di Dalam Postingan Blog

12/04/2019 2 comments

ipung.net - Cara Membuat Tabel Keren Responsif di Dalam Postingan Blog - Dalam membuat sebuah artikel pada blog kadang kala membutuhkan tampilan berupa tabel. Sudah banyak artikel yang memberikan tutorial cara yang menarik untuk membuat tabel. Akan tetapi dalam kesempatan kali ini ipung.net akan memberikan tutorial dengan tampilan yang jauh lebih menarik dengan efek pada saat di sentuh kursor mouse.
Tabel model ini sangat cocok untuk digunakan membuat pengumuman nilai atau lainnya, karena di dalamnya sangat mempermudah dalam menginput dan melihat barisan label yang panjang.
Yuk simak penjelasan selengkapnya di bawah ini.

Cara Membuat Tabel Keren di Postingan Blogger

1. Loggin ke Blogger anda > pilih menu Tema > Kemuidan pilih menu Edit HTML
2. Jangan lupa untuk memback up semua kode html template anda.
3. Carilah kode dengan tombol CTRL+F biar mempermudah dan cepat mencari kode ]]></b:skin> atau </style>
4. Letakkan kode berikut ini di atas ]]></b:skin> atau </style>

/* Tabel Blogger 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:7px;text-align:left;vertical-align:top;} .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 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 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%} .post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;} table tr:nth-child(odd):hover td {background:#b0b1b4;}

5. Setelah disimpan, lanjut buka postingan anda dan pilih Entri Baru > Letakkan kode berikut ini pada mode HTML ya.

6. Anda bisa merubah Nama dan Keterangan serta isian Nama 1 dan Nilai 1 dan seterusnya itu sesuai dengan kebutuhan tabel masing-masing ya.

7. Bila anda ingin menambahkan jumlah kolom tabel lagi, tinggal tambahkan saja kode di bawah ini sebelum kode </tbody> </table>

<tr><td>Nama</td><td>Nilai</td> </tr>

Berikut ini adalah hasil contoh yang telah kita buat di atas.