Membuat Tabel Blog Dengan Efek Linear Gradient Responsive
Membuat Tabel Blog Dengan Efek Linear Gradient Responsive - Terkadang kita sebagai admin sesekali membutuhkan tabel dalam postingan guna mendukung tampilan postingan blog agar lebih rapih. Apalagi jika blog kamu memang sering menampilkan spesifikasi produk tentunya memasang tabel dalam postingan blog sudah menjadi keharusan.
Untuk membuat tabel dalam postingan responsive tidaklah sulit dan umumnya tabel yang dibuat kebanyakan mempunyai background putih hal itu tentunya agar pengunjung mudah untuk membacanya.
Namun pada kesempatan ini kita akan membuat tabel dengan efek linear gradient yang sudah saya sedikit modifikasi dari tabel pada umumnya. Tentunya ini kembali keselera masing-masing tapi jika saya lihat tabel yang sedikit saya modifikasi ini cukup jelas juga meski ada sentuhan warna gradient.
Langsung saja kita tahap pemasangan simak baik-baik (klik gambar untuk perbesar)
Simpan kode CSS berikut di atas ]]></b:skin> atau pada</style> blog anda, kemudian save template.
/* Table Linear Gradient */
table{border-collapse:collapse;border-spacing:0;}.post-body table td {border:1px;color:#fff; solid;background:linear-gradient(124deg,#ee427e,#984aeb);padding:10px;text-align:left;vertical-align:top;}.post-body table th {border:0px solid #fff;padding:10px;text-align:left;vertical-align:top;background:linear-gradient(124deg,#ee427e,#984aeb) !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 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}.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}Selanjutnya kita tinggal meletakan kode pemanggil di bawah ini dalam postingan anda dengan
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Alamat</th></tr>
<tr><td>Rico</td><td>Tangerang</td></tr>
<tr><td>Mei</td><td>Semarang</td></tr>
<tr><td>Tika</td><td>Solo</td></tr>
<tr><td>Jono</td><td>Kalimantan</td></tr>
<tr><td>Edwin</td><td>Bali</td></tr>
<tr><td>Rafael</td><td>Jakarta</td></tr>
<tr><td>Dinar</td><td>Sulawesi</td></tr>
<tr><td>Edwin</td><td>Bangka Belitung</td></tr>
</tbody></table>Setelah itu publikasikan dan lihat hasilnya.
Kalian hanya tinggal sesuaikan saja nama dalam table tersebut dan jika butuh tambahan kolom tinggal copy saja kode seperti ini <tr><td>Rico</td><td>Tangerang</td></tr>
Untuk memastikan tabel ini responsive saya sudah menyiapkan videonya di bawah ini:
Agar menambah keyakinan kamu tentang responsive tabel ini, kamu bisa langsung cek responsivenya dengan cepat dan mudah DISINI.
Selamat mencoba.
Jejak Unik
Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com