Cara Membuat Tabel Sederhana di Artikel Blog

Sebelumnya saya pernah membagikan tutorial bagaimana caranya membuat tabel keren dan Responsive di blogspot.com. Sayangnya, kode CSS yang ditambahkan di dalam template blogger agak sedikit bentrok dengan gambar blog yang ditambahkan teks (caption).

Tapi bisa diakalin, kan? Bisa. Cuma malas aja 😁

Kode yang akan digunakan untuk membuat tabel sederhana kali ini hanya menggunakan kode CSS dan kode tabel yang digabung menjadi satu, untuk ditempatkan di dalam postingan blog, tepatnya mode tulis HTML.

<style>.table {overflow: auto; white-space: nowrap}table {background:#19AF9B;width:100%}th,td {height:20px;padding:5px;border:1px solid #fff;background:#19AF9B;color:#fff}th {background:#0B8474;color:white}</style><div class="table"><table><tbody><tr><th>Nama</th><th>Umur</th><th>Posisi Pemain</th></tr><tr><td>Lionel Messi</td><td>36 th</td><td>Goal-getter</td></tr><tr><td>Cristiano Ronaldo</td><td>39 th</td><td>Penyerang</td></tr><tr><td>Gianluigi Buffon</td><td>46 th</td><td>Penjaga Gawang</td></tr><tr><td>Paolo Maldini</td><td>55 th</td><td>Bek Tengah</td></tr></tbody></table></div>

Silakan salin (copy) kode tabel di atas, dan tempelkan (paste) di dalam artikel blog, bagian mode tulis HTML. Kira-kira begini tampilannya:

Nama	Umur	Posisi Pemain
Lionel Messi	36 th	Goal-getter
Cristiano Ronaldo	39 th	Penyerang
Gianluigi Buffon	46 th	Penjaga Gawang
Paolo Maldini	55 th	Bek Tengah

Sederhana sekali, kan?

Labels: Blogger,

Kalian baru saja membaca artikel Cara Membuat Tabel Sederhana di Artikel Blog. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.