Nov 30, 2017

Memasang Table Responsive Di Postingan Blog AMP HTML

Table Responsive

Postingan kali ini akan membahas Cara Membuat Table Responsive Di Postingan Blog AMP HTML. Pemasangan tabel ini sangat berguna bagi sobat yang membahas artikel yang didalamnya menggunakan Tabel yang memberikan informasi data secara keseluruhan. 

Seperti contoh hasilnya akan seperti di bawah ini.




Bagaimana tertarik untuk mencobanya, mari kita simak Cara Membuat Table Responsive Di Postingan Blog AMP HTML.

Langkah Pertama
Silahkan salin kode CSS dibawah ini.

.table-responsive{min-height:.01%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}
.table tr:nth-child(even) td{background-color:#F0F0E5}
.table th{background-color:#EAE2CF;color:#333;font-size:110%}
.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
.tg-bf{font-weight:700}
.tg-it{font-style:italic}
.tg-left{text-align:left}
.tg-right{text-align:right}
.tg-center{text-align:center}
@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>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}
}

Silahkan sesuaikan Warna Background yang disukai


Langkah Ke Dua
Silahkan salin kode HTML dibawah ini dan letakkan di dalam Postingan pada Tab HTML untuk menampilkan tabelnya.

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="tg-center tg-bf">INFORMASI PEMESANAN KAMAR</th>
    </tr>
    <tr>
      <td>Jenis Kamar</td>
      <td>Harga</td>
      <td>Jumlah Kamar</td>
      <td>Jumlah</td>
    </tr>
    <tr>
      <td>Ekonomi</td>
      <td>Rp. 150.000</td>
      <td>5 kamar</td>
      <td>Rp. 750.000</td>
    </tr>
    <tr>
      <td>Standar</td>
      <td>Rp. 200.000</td>
      <td>5 kamar</td>
      <td>Rp. 1.000.000</td>
    </tr>
    <tr>
      <td>Standar AC</td>
      <td>Rp. 300.000</td>
      <td>4 kamar</td>
      <td>Rp. 1.200.000</td>
    </tr>
    <tr>
      <td>VIP/Family</td>
      <td>Rp. 350.000</td>
      <td>1 kamar</td>
      <td>Rp. 350.000</td>
    </tr>
  </table>
</div>

Perhatikan catatan berikut ini
Untuk kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

Keterangan :
  • tg-bf untuk huruf tebal
  • tg-it untuk huruf miring
  • tg-left untuk rata kiri
  • tg-right untuk rata kanan
  • tg-center untuk rata tengah
Perhatikan setiap langkah penerapan kodenya, jika sudah selesai silahkan SAVE dan selesai, selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.