--!>
Home » Widget » Cara Membuat Tabel Flat Responsive untuk Blog

Saturday, July 29, 2017

Cara Membuat Tabel Flat Responsive untuk Blog

         Disqus  
Cara Membuat Tabel Flat Responsive untuk Blog

Halo Aibou (あいぼう). Hari ini membuat Tabel Flat Responsive dengan CSS dan HTML diblog Anda.  Tebel ini sangat berguna untuk memberikan keterangan dalam suatu artikel seperti harga, komponen atau spesifikasi suatu barang.

Lalu untuk pemasangannya silahkan ikuti cara dibawah ini:

STEP 1 -  Memasang CSS di Edit HTML


  1. Template > Edit HTML
  2. Lalu masukan kode dibawah ini sebelum kode </style>

/* CSS Post Table Flat Responsive */ 
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:12px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #f14235;padding:12px;text-align:left;vertical-align:top;background:#f44336 !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:499;text-transform:uppercase;font-size:16px}
table {max-width:100%;width:100%;margin:1.6em 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-: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-: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}


STEP 2 - Menampilkan Table


  1. Menu Posts / Postingan
  2. Lalu masuk ke Halaman pembuatan Artikel
  3. Pilih tombol HTML disamping Compose
  4. Copy-Paste kode dibawah ini di Halaman Artikel Anda

<table cellpadding="0" cellspacing="0"><tbody>
<tr><th>Table Header 1</th><th>Table Header 2</th>    <th>Table Header 3</th></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
</tbody> </table>
Untuk tulisan Table Header 1,2,3 adalah bagian keterangan paling atas silahkan ganti sesuai keinginan Anda.
Untuk tulisan Menu 1,2,3 adalah bagian keterangan dibawah.
Terima kasih telah berkunjung di Artikel saya, kalo ada yang masih kurang jelas silakan Comment dibawah ini atau PM saya di Akun FB atau Email.


EmoticonEmoticon