Memasang Table Responsive Di Postingan Blog Amp Html

Loading...
 Postingan kali ini akan membahas Cara Membuat Table Responsive Di Postingan Blog AMP HTML Memasang Table Responsive Di Postingan Blog AMP HTML

Postingan kali ini akan membahas Cara Membuat Table Responsive Di Postingan Blog AMP HTML. Pemasangan tabel ini sangat berkhasiat bagi sahabat yang membahas artikel yang didalamnya memakai Tabel yang menunjukkan informasi data secara keseluruhan. 

Seperti tumpuan balasannya akan ibarat di bawah ini.




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

Langkah Pertama
Silahkan salin instruksi 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 instruksi 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 instruksi class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

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

Sumber http://www.dibalikseo.com
Loading...

Subscribe to receive free email updates:

0 Response to "Memasang Table Responsive Di Postingan Blog Amp Html"

Posting Komentar