Cara Membuat Tabel Keren di Postingan Blogger - Sebelumnya aku sudah pernah menjelaskan beberapa cara gampang menciptakan tabel responsive di blog/blogspot. Namun kali ini aku membuatnya dengan tampilan yang jauh lebih menarik dengan pengaruh ketika di sentuh cursor mouse.
Tabel pada postingan blog ini aku buat agak lebih ibarat dengan dengan tabel yang aku gunakan di dalam blog saya, namun dengan pelengkap pengaruh warna memanjang ketika cursor pointer menyentuh tabel tersebut. Tabel ini sangat cocok di gunakan kalau ingin menciptakan pengumuman online, ibarat tabel pengumuman nilai atau pengumuman kelulusan, alasannya akan lebih mempermudah untuk melihat barisan label yang panjang pada tabel tersebut.
Cara Membuat Tabel Keren di Postingan Blogger
1. Login ke Blogger anda > pilih sajian Tema > Selanjutnya pilih menu Edit HTML
2. Kemudian letakkan arahan dibawah ini sempurna berada diatas arahan ]]></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;}3. Untuk menciptakan tabel di postingan blog anda, pilih Entri Baru > lalu letakkan arahan ini pada mode HTML (bukan Compose)
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nama</th><th>Keterangan</th> </tr> <tr><td>Nama1</td><td>Nilai1</td> </tr> <tr><td>Nama2</td><td>Nilai2</td> </tr> <tr><td>Nama3</td><td>Nilai3</td> </tr> <tr><td>Nama4</td><td>Nilai4</td> </tr> </tbody> </table>*Keterangan : Ubah yang ditandai Biru dengan data yang ingin anda masukkan
Untuk lebih Jelasnya dapat lihat gambar ini:
Jika anda ingin menambahkan jumlah tabel lagi di bawahnya tambahkan arahan <tr><td>Nama</td><td>Nilai</td> </tr> sempurna berada diatas arahan </tbody> </table> tadi.
Cukup sekian tutorial dari aku perihal Cara Membuat Tabel Keren dan Responsive di Postingan Blogger. Jika ada hal yang kurang dipahami seputar cara menciptakan tabel ini, jangan sungkan-sungkan untuk bertanya.
Sumber http://www.analisyuki.com/
