Iklan Billboard 970x250

Artikel Terkait

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

×
Cara Pasang Tabel Responsiv di Posting Blog AMP HTML

Iklan 728x90

Cara Pasang Tabel Responsiv di Posting Blog AMP HTML

    Bloggerntt.com - Cara Pasang Tabel Responsiv di Posting Blog AMP HTML- Memasang tabel responsiv di posting blog sangat diperlukan. Apalagi buat Anda para blogger, yang sering posting artikel disertai data tabel. Jadi dengan adanya tutorial blogger ini, Anda tidak perlu kuatir dan bingung untuk memasang tabel di posting blog Anda.

    cara membuat tabel responsive di blog,membuat tabel pada blog markijar,cara membuat tabel keren di blog,membuat tabel di blog dengan excel,cara membuat kotak di blog,cara buat tabel diblogger,cara buat tabel di artikel,table di blog


    Baca juga :

    1. Cara Terbaru Pasang Iklan AdSense amp-ad di AMP Blogger 2019
    2. Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML
    3. Cara Pasang Tombol Search Box Di Template Blog AMP HTML
    4. Cara Pasang Widget Recent Comments Disqus di Blog AMP HTML
    5. Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML


    Anda juga bisa baca posting saya sebelumnya disini, Cara Buat atau Pasang Amp-youtube Play On Click dengan tombol Padamkan Lampu.

    Cara penerapan tabel responsiv ini saya buatkan untuk blog amp, namun bisa juga diterapkan di blog non-amp.
    Langsung saja ke pembahasan Cara Pasang Tabel Responsiv di Posting Blog AMP HTML :

    Pertama
    - Anda salin kode css dibawah ini, lalu pastekan pada mode HTML posting. Atau bisa juga salin ke css template blog Anda.

    .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}
    }


    Kedua
    - Anda 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

    Terakhir SAVE posting blog Anda.

    Sekian artikel Cara Pasang Tabel Responsiv di Posting Blog AMP HTML, semoga bermanfaat. Salam.

    Penelusuran terkait:

    • cara membuat tabel responsive di blog
    • membuat tabel pada blog markijar
    • cara membuat tabel keren di blog
    • membuat tabel di blog dengan excel
    • cara membuat kotak di blog
    • cara buat tabel diblogger
    • cara buat tabel di artikel
    • table di blog

    Baca Juga
    SHARE
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post