Membuat Tabel Responsive Valid AMP dan HTML5

Usuluddin, S.Kom    Kamis, April 29, 2021    TUTORIAL   

Membuat Tabel Responsive Valid AMP dan HTML5

GoSEO.id - Ada seorang sahabat kita yang menanyakan kepada saya tentang bagaimana membuat tabel responsive untuk postingan blog AMP HTML. Oleh karena itu saya mencoba untuk ber-ekperimen dan akhirnya berhasil. Oleh karena itu saya membagikan cara "Membuat Table Responsive Valid AMP dan HTML5".

Tabel ini tidak hanya digunakan khusus untuk blog AMP, namun juga dapat digunakan pada blog Non AMP. Berikut tabel dibawah sebagai contohnya.

Harga Pemasangan Iklan di GoSEO.id
Jenis Iklan	Ukuran Iklan	Harga Iklan Per Bulan	Slot
Iklan Horizontal (homepage & postpage)	responsive	Rp. 200.000,-/bulan	(√)
Iklan Sidebar (homepage & postpage)	300x250	Rp. 100.000,-/bulan	(√)
Iklan OnPost (postpage)	responsive	Rp. 70.000,-/bulan	(√)
Iklan Link (homepage & postpage)	Link	Rp. 50.000,-/bulan	(√)

Cara pembuatannya pun tergolong sangat gampang. Jika kamu memerlukan tabel seperti berikut, silahkan ikuti tahap-tahap berikut :

Table of Content

• Tahapan Membuat Tabel Responsive Valid AMP dan HTML5
• Penutup

Tahapan Membuat Tabel Responsive Valid AMP dan HTML5

Hal utama yang harus kamu lakukan adalah memasukkan CSS berikut pada STYLE template kamu atau cari kode ]]></b:skin> dan letakkan CSS tersebut diatasnya :

  .table-responsive {
  min-height: .01%;
  overflow-x: auto
}

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table td,
.table th {
  background-color: #aaf7eb;
  border: 1px #bbb solid;
  color: #333;
  font-family: sans-serif;
  font-size: 100%;
  padding: 10px;
  vertical-align: top;
}

.table tr:nth-child(even) td {
  background-color: #6ee2d0;
}

.table th {
  background-color: #41e1c9;
  color: #333;
  font-size: 110%;
  font-weight: bold;
}

.table tr:hover td,
.table tr.even:hover td {
  color: #222;
  background-color: #41e1c9;
}

.goseo-tebal {
  font-weight: bold;
}

.goseo-miring {
  font-style: italic;
}

.goseo-kiri {
  text-align: left;
}

.goseo-kanan {
  text-align: right;
}

.goseo-tengah {
  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
  }
}
  

Setelah itu klik Simpan pada edit template blog kamu. Kemudian untuk menggunakan tabel responsive pada postingan, silahkan gunakan kode HTML tabel berikut dalam mode editor HTML :

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="goseo-tengah goseo-tebal">Harga Pemasangan Iklan di GoSEO.id</th>
    </tr>
    <tr>
      <td class="goseo-tengah goseo-tebal">Jenis Iklan</td>
      <td class="goseo-tengah goseo-tebal">Ukuran Iklan</td>
      <td class="goseo-tengah goseo-tebal">Harga Iklan Per Bulan</td>
      <td class="goseo-tengah goseo-tebal">Slot</td>
    </tr>
    <tr>
      <td>Iklan Horizontal (homepage & postpage)</td>
      <td>responsive</td>
      <td>Rp. 200.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan Sidebar (homepage & postpage)</td>
      <td>300x250</td>
      <td>Rp. 100.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan OnPost (postpage)</td>
      <td>responsive</td>
      <td>Rp. 70.000,-/bulan</td>
      <td>(√)</td>
    </tr>
    <tr>
      <td>Iklan Link (homepage & postpage)</td>
      <td>Link</td>
      <td>Rp. 50.000,-/bulan</td>
      <td>(√)</td>
    </tr>
  </table>
</div>

Selebihnya silahkan kamu ubah tabel berikut sesuai dengan kebutuhan.

Keterangan penggunaan kode class="" :

goseo-tebal agar huruf tabel menjadi tebal

goseo-miring agar huruf tabel menjadi tebal

goseo-kiri agar huruf tabel menjadi tebal

goseo-kanan agar huruf tabel menjadi tebal

goseo-tengah agar huruf tabel menjadi tebal

Penutup

Bagaimana? Saya rasa cukup gampang dan mudah dimengerti yaa.. 

Semoga tutorial "Membuat Tabel Responsive Valid AMP dan HTML5" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu mengerti.

Jangan lupa pula untuk share dan subscribe kami pada kolom Newsletter agar tidak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.

---

Apakah kamu sudah membaca :
# Cara Bot Facebook Messenger Meningkatkan Bisnis Online
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Email Marketing
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Mengapa Teknis SEO & On-Site SEO Cukup Jarang
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense