Cara Membuat Table Flat Responsive Di Blogger

Posted by Voizd.com

February 19, 2023

Cara Membuat Table Flat Responsive Di Blogger

Voizd.com - Cara Membuat Table Flat Responsive Di Blogger, dikesempatan kali ini kita akan membahas tentang table yang dapat digunakan untuk mengisi konten blog yang tentunya sangat responsive saat digunakan.

Table merupakan komponen yang digunakan oleh sebagian blogger untuk membuat tampilan tulisan dan data yang di tulis di sebuah website menjadi tertata rapih, namun tidak sedikit para blogger yang kesulitan saat ingin membuat sebuah table yang cocok dan responsive di situs nya

nah tujuan tulisan kali ini semoga dapat memberikan manfaat kepada blogger agar tidak lagi kesulitan dalam menulisakan dan membuat sebuah table di Blog.

Berikut Cara Membuat Table Flat Responsive :

1. Silahkan anda backup template blog terlebih dahulu , guna mengatasi jika nantinya terdapat kesalahan saat pengeditan coding.

2. Masuk ke Blogger lalu pilih Tema / Themes.

3. Klik tanda panah kebawah , lalu Edit HTML.

4. Gunakan kombinasi tombol CTRL+F, untuk mencari sebuah coding

5. Carilah kode <head> , lalu pastekan kode berikut dibawah <head>.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

6. Selanjutnya silahkan cari kode ]]></b:skin> atau </style> lalu pastekan kode dibawah ini diatas kode ]]></b:skin>.

table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

Catatan : Jika anda ingin mengubah Background table silahkan ubah kode background-color:#3498DB

7. Langkah selanjutnya silahkan anda Masukan Coding Table berikut di halaman postingan anda dengan Mode HTML

<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>Nama Depan</th> 
    <th>Nama Belakang</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>Mas</td> 
    <td>Rizal</td>  
  </tr>
  <tr> 
    <td>Kang</td> 
    <td>Rizal</td> 
  </tr>
  <tr> 
    <td>Bang</td> 
    <td>Rizal</td> 
  </tr>
</tbody> 
</table>
</div>