Bagaimana Cara Membuat Table Yang Responsive Di Postingan Blog?

Membuat tabel di postingan blog cukup simpel tanpa harus menggunakan pluggin seperti wordpress, langsung saja kita ke pembahasan



Untuk lebih jelasnya saya sudah membuat postingan tabel yang sudah saya posting di blog ini,
bukan saya yang membuat sebetulnya karena saya cuma copy paste namun sedikit modifikasi.
Tabel tersebut saya tampilkan di bawah. Pada bagian atas tabel tersebut ada
tambahan warna biru muda dan untuk warna tulisan saya ganti menjadi putih. Kode asli dari postingan tabel sebelum saya edit sebagai berikut;


<table 1px="" border="”2?" dashed="" style="width: ”100%”px;">
<tbody>
<tr style="background-color: #117ac9; color: white;">
<td 1px="" dashed=""><b>Pos</b></td>
<td 1px="" dashed=""><b>Tim</b></td>
<td 1px="" dashed=""><b>Main</b></td>
<td 1px="" dashed=""><b>M</b></td>
<td 1px="" dashed=""><b>K</b></td>
<td 1px="" dashed=""><b>Set</b></td>
<td 1px="" dashed=""><b>Poin</b></td>
</tr>
<tr>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">Tontowi Ahmad/Lilyana Natsir</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">0</td>
<td 1px="" dashed="">2-0</td>
<td 1px="" dashed="">1</td>
</tr>
<tr>
<td 1px="" dashed="">2</td>
<td 1px="" dashed="">Chan Peng Soon/Goh Liu Ying</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">0</td>
<td 1px="" dashed="">2-0</td>
<td 1px="" dashed="">1</td>
</tr>
<tr>
<td 1px="" dashed="">3</td>
<td 1px="" dashed="">Bodin Issara/Savitree Amitrapai</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">0</td>
<td 1px="" dashed="">0-2</td>
<td 1px="" dashed="">1</td>
</tr>
<tr>
<td 1px="" dashed="">4</td>
<td 1px="" dashed="">Robin Middleton/Leanne Choo</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">1</td>
<td 1px="" dashed="">0</td>
<td 1px="" dashed="">0-2</td>
<td 1px="" dashed="">1</td>
</tr>
</tbody></table>

Hasil Jadi
Pos Tim Main M K Set Poin
1 Tontowi Ahmad/Lilyana Natsir 1 1 0 2-0 1
2 Chan Peng Soon/Goh Liu Ying 1 1 0 2-0 1
3 Bodin Issara/Savitree Amitrapai 1 1 0 0-2 1
4 Robin Middleton/Leanne Choo 1 1 0 0-2 1

catatan untuk background-color untuk memnerikan warna pada kolom tabel sedangkan color untuk memberikan warna pada tulisan

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel