Cara Membuat Tabel Responsive Di Blogger - JagoanQue

Cara Membuat Tabel Responsive Di Blogger - JagoanQue. Mungkin banyak diantara anda yang masih belum mengerti cara membuat tabel di blog, mungkin ada juga yang sudah membuat akan tetapi tabel yang mereka gunakan tidak responsive dengan template mereka. 

Tabel ini juga sangat cocok untuk niche tekno yang membahas spesifikasi dan harga, atau juga ada yang membutuhkan tabel ini untuk keperluan lainnya. Pada kesempatan kali ini saya akan memberikan script tabel yang responsive untuk anda.

Walaupun sudah banyak di internet yang membuat tutorial ini tetapi masih tidak responsive dengan template anda masing masing. Anda juga tidak perlu takut jika memberatkan loading page blog anda, dikarenakan script ini hanya menggunakan CSS, jadi loading blog anda tetap wuzz. Yuk langsung saja simak tutorialnya dibawah ini 

Cara Membuat Tabel Responsive Di Blogger 

1. Login kea kun “Blogger” anda

2. Cari menu “Tema” lalu “Edit HTML”

3. Cari kode ]]></b:skin> 

4. Lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

  /* CSS Post Table */ 
  .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} 
  .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} 
  .post-body table.tr-caption-container {border:1px solid #e9e9e9;} 
  .post-body table caption{border:none;font-style:italic;} .post-body table{} .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:#0082d8;} 
  .post-body th{background:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px} 
  .post-body th:hover{background:#fdfdfd;} 
  .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 {font-size:80%;padding:0px 8px 8px !important;} 
  .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} 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%} .widget ul {padding:0;}


  

5. Setelah itu “Simpan Tema”

Cara Membuat Tabel Di Postingan Blog

1. Cari menu “Postingan”

2. Setelah itu cari “Postingan Baru”

3. Kemudian cari menu “HTML” jangan mode “Compose”

4. Setelah itu masukan kode di bawah ini di dalam mode “HTML”

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr> <th>Header Kolom 1</th> <th>Header Kolom 2</th> </tr>
<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>
<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr>
<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr>
<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> </tr>
<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> </tr>
</tbody> 
</table>

Jika anda ingin menambahkan kolom anda tinggal menambahkan kode yang saya berikan di bawah ini

Untuk menambahkan kolom ;

  <tr> <th>Header Kolom</th> </tr>
  

Untuk Menambahkan Baris ;

  <tr> <td>Baris</td> </tr>
  

Demikian artikel saya yang berjudul Cara Membuat Tabel Responsive Di Blogger, semoga dengan adanya artikel ini bisa membantu anda untuk membuat tabel yang responsive di blog anda. Jika ada pertanyaan seputar artikel ini silahkan bertanya di kolom komentar, saya usahakan untuk membalas komentar anda satu per satu. Semoga bermanfaat