Cara Membuat Tabel Responsive dalam Postingan Blog

Posted on 2 views

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

Leave a Reply

Your email address will not be published. Required fields are marked *