Konversi Tabel Excel ke HTML secara Manual

Sebagai pembelajar html pemula, saya, lebih suka untuk membuat sesuatu tidak dengan cara yang klak-klik begitu saja. Ingin juga paham apa yang terjadi di balik kemudahan dari suatu cara. Karena keterbatasan pengalaman tentu untuk menuju paham benar ada proses belajar sedikit demi sedikit. Kali ini saya berbagi pengalaman cara mengonversi tabel yang dibuat di aplikasi Ms. Excel untuk disalin ke laman html blog atau website.


Cara ini dapat disebut semi otomatis, atau kalau mau disebut manual juga boleh. Yang jelas tidak dilakukan dengan mengetik satu-satu kode html-nya. Di sini dipraktekkan pada blog blogger. Data dan kode semua kita siapkan di Ms. Excel. Bila semua sudah siap tinggal salin ke draf editor blogger dengan menggunakan mode HTML, bukan mode Compose.

Langsung praktek!

Buat tabel awal di aplikasi Excel, misalnya seperti ini:

Sisipkan tag seperti saat membuat tabel di html <tr>, </tr>, <th>, </th>, <td>, </td>. Lakukan penyalinan untuk beberapa sel seperlunya. Untuk contoh tabel di atas akan menjadi seperti berikut:

Seperti itulah yang akan  disalin ke draf editor pada mode HTML di blogger.

Tampilan draf di editor HTML blogger seperti berikut.

Terakhir adalah dengan menambahkan kode sebelum  itu, <table><tbody> dan setelah itu </tbody></table>, seperti berikut.

Tabel yang dibuat ini tanpa pem-format-an, bahkan garis (border) saja belum ada, jadi masih perlu ditambahkan kode sedikit. Atau bila ingin tahu lebih banyak dapat belajar di www.w3schools.com bagian html table.

Pada mode Compose tabel tersebut hanya seperti ini.

Bila ingin memberikan garis, mode perataan, warna latar dan lain-lainnya terus pelajari dari berbagai sumber, tapi saran saya cukup belajar di w3schools.com. Sedikit saya beri contoh pemformatan tabel jangan lupa sebaiknya pindah ke mode HTML dan kodenya seperti di bawah ini.

<table class="testtabel"> 
<tbody>
<tr><th>No   </th><th>Buah    </th><th>Berat   </th><th>Keadaan  </th></tr>
<tr><td>1    </td><td>apel    </td><td>2 kg    </td><td>ok       </td></tr>
<tr><td>2    </td><td>jeruk   </td><td>3 kg    </td><td>sip      </td></tr>
<tr><td>3    </td><td>pisang  </td><td>4 kg    </td><td>mantap   </td></tr>
<tr><td>4    </td><td>durian  </td><td>5 kg    </td><td>sedap    </td></tr>
</tbody> 
</table>
<style>
.testtabel{border: 1px solid red; text-align:center;}
.testtabel th{background:orange; color: white; border: 1px solid red; padding:5px}
.testtabel td{background:palegreen; color: red; padding:5px }
</style> 

Format tabel diatur dalam kode style secara langsung dalam postingan. Silakan ubah sendiri sesuai keinginan. Masih banyak yang diinginkan sesuai kehendak, terus belajar yah :) , seperti saya yang baru belajar ini.

Jangan lupa simpan draf yang dibuat kemudian klik pratinjau untuk melihat tampilan tabel yang di blog. Untuk style di atas hasilnya seperti di bawah ini.

Demikian sedikit yang saya tahu tentang HTML untuk membuat tabel di blog. Sedikit catatan yang pernah saya buat terkait pembuatan tabel seperti yang digunakan dalam blog ini dapat disimak di sini.

Semoga sedikit membantu buat anda yang juga baru belajar html.