Cara Membuat Tabel Responsive dalam Postingan Blog - Blogger Bandung

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

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