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;
Hasil Jadi
catatan untuk background-color untuk memnerikan warna pada kolom tabel sedangkan color untuk memberikan warna pada tulisan
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