Cara Membuat Tabel Responsive dalam Postingan Blog

Membuat Tabel dalam Postingan Blog cukup merepotkan. Namun, justru karena menyusahkan itu, hasilnya akan luar biasa.

Cara Membuat Tabel Responsive dalam Postingan Blog

Google sangat suka postingan atau artikel yang disertai tabel. Banyak tulisan yang ada di peringkat atas Google menggunakan tabel.

Untuk membuat tabel sederhana, copas kode berikut ini di Mode HTML dalam postingan.

<center>
<table width="350" border="3">
<tr>
<th>Judul Kolom 1 </th>
<th>Judul Kolom 2 </th>
<th>Judul Kolom 3 </th>
</tr>
<tr>
<td>Kolom 1</td>
<td>Kolom 1</td>
<td>Kolom 1</td>
</tr>
<tr>
<td>Kolom 2</td>
<td>Kolom 2</td>
<td>Kolom 2</td>
</tr>
</table>
</center>

Hasilnya akan seperti ini:

Judul Kolom 1 Judul Kolom 2 Judul Kolom 3
Kolom 1 Kolom 1 Kolom 1
Kolom 2 Kolom 2 Kolom 2

Cara Membuat Tabel Responsive dalam Postingan Blog

Berikut ini Cara Membuat Tabel dalam Postingan Blog. Sudah Responsive. Kita mulai dari contohnya dulu. Kodenya ada di bagian bawah.
  • Kode CSS dipasang di atas kode ]]></b:skin>
  • Kode HTML dipasang saat menulis postingan. Copas di Mode HTML

Contoh Tabel dalam Postingan Blog

TABEL

Firstname Lastname Age Address
Jill Smith 50 California
Eve Jackson 94 Boston

Berikut ini kode CSS dan HTML yang digunakan untuk membuat tabel di atas.

KODE CSS
Dipasang di atas kode ]]></b:skin> dalam template blog.

/* ------ TABEL ------ */
.table-responsive{line-height:1.5em;overflow-x:auto;font-size:15px}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{
background-color:#F3F5EF;border:1px solid #fff;color:#333;font-family:sans-serif;font-size:100%;padding:5px;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}
@media screen and (max-width:768px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:414px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:411px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:360px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:320px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}

KODE HTML:
Dipasang saat membuat postingan di Mode HTML

<div class="table-responsive">
<table class="table">
<tbody>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>California</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>Boston</td>
  </tr>
</tbody>
</table>
</div>

Sumber: W3School

Baca Juga: Cara Memasukkan File Pdf ke Postingan Blog

» Thanks for reading: Cara Membuat Tabel Responsive dalam Postingan Blog

Tags:
Comments

Copyright © 2020 Blogger Bandung All Right Reserved
About | Kontak | Disclaimer | Sitemap