Cara Membuat Tabel di Blog Menggunakan Microsoft Excel

Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak.

Dalam dunia Blog, Tabel juga diperlukan, yaitu untuk menyajikan informasi secara singkat, rinci dan juga mudah dipahami, seperti yang saya sebutkan diatas. Namun, untuk membuat, Tabel pada blog, tentunya berbeda dengan membuat tabel di Program pengolah kata, maka dari itu untuk membuatnya dibutuhkan teknik khusus, yang akan saya bahas pada artikel kali ini.

Membuat tabel di Blog haruslah menggunakan Kode HTML, maka dari itu dalam artikel ini, saya memberikan 2 cara, dari pada tambah penasaran, lanjut aja deh ke langkahnya. 

A. Cara I

Cara ini terbilang sangatlah mudah, anda tidak perlu susah payah membuat kode HTML nya terlebih dahulu, untuk membuat tabel. Cara I ini hanya saya sarankan jika anda dalam keadaan terburu-buru, karena cara ini terbilang dapat memberatkan loading Blog anda, yang tentunya berdampak pada hilangnya posisi anda di pencarian google.

Seperti biasa, anda harus membuat desain tabel anda di Excel, kemudian Copy lalu pastekan ke halaman.

Mudah dan Cepat, Bukan?

B. Cara II

Menurutk Cara ini  cukup rumit dan kurang efisien, pasalnya untuk membuat tabel pada blog, kita harus merubah format excel yang biasanya berakhiran .xlsx seperti excel.xlsx menjadi berakhiran .html seperti excel.html. Namun, cara ini, lebih capat pada saat loading dibandingkan cara sebelumnya.

Caranya adalah, seperti biasa anda harus membuat desainnya terlebih dahulu, kemudian save as dalam format HTML

Setelah itu, buka tabel yang telah anda buat tadi, maka tabelnya akan muncul pada browser anda, apakah itu Firefox atau google Chrome.

Langkah selanjutnya adalah mencari Kode HTMLnya, yaitu dengan inspect elemen. Caranya, klik kanan pada tabel, kemudian pilih inspect. 

Copy kodenya dimulai dari <table border="0" sampai </table>, contohnya

<table border="0" cellpadding="0" cellspacing="0" width="338" style="border-collapse:
 collapse;table-layout:fixed;width:254pt">
 <colgroup><col width="64" style="width:48pt">
 <col width="210" style="mso-width-source:userset;mso-width-alt:7680;width:158pt">
 <col width="64" style="width:48pt">
 </colgroup><tbody><tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" width="64" style="height:15.0pt;width:48pt">No.</td>
  <td class="xl66" width="210" style="border-left:none;width:158pt">Nama</td>
  <td class="xl65" width="64" style="border-left:none;width:48pt">Gender</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#F8696B;mso-pattern:black none">1</td>
  <td class="xl66" style="border-top:none;border-left:none">Agung</td>
  <td class="xl65" style="border-top:none;border-left:none">L</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#F8898B;mso-pattern:black none">2</td>
  <td class="xl66" style="border-top:none;border-left:none">Ahmad Dzulfikar</td>
  <td class="xl65" style="border-top:none;border-left:none">L</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#F9AAAC;mso-pattern:black none">3</td>
  <td class="xl66" style="border-top:none;border-left:none">Asriani</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#FACBCD;mso-pattern:black none">4</td>
  <td class="xl66" style="border-top:none;border-left:none">Ayatullah Khomeini</td>
  <td class="xl65" style="border-top:none;border-left:none">L</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#FBEBEE;mso-pattern:black none">5</td>
  <td class="xl66" style="border-top:none;border-left:none">Awal</td>
  <td class="xl65" style="border-top:none;border-left:none">L</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#EBF6F1;mso-pattern:black none">6</td>
  <td class="xl66" style="border-top:none;border-left:none">Dewi sartika</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#CAE8D4;mso-pattern:black none">7</td>
  <td class="xl66" style="border-top:none;border-left:none">Ervy</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#A7DAB6;mso-pattern:black none">8</td>
  <td class="xl66" style="border-top:none;border-left:none">Dhiza</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#86CC99;mso-pattern:black none">9</td>
  <td class="xl66" style="border-top:none;border-left:none">Fatriana</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <tr height="20" style="height:15.0pt">
  <td height="20" class="xl65" style="height:15.0pt;border-top:none;border:.5pt solid windowtext;
  background:#63BE7B;mso-pattern:black none">10</td>
  <td class="xl66" style="border-top:none;border-left:none">Febriyan</td>
  <td class="xl65" style="border-top:none;border-left:none">P</td>
 </tr>
 <!--[if supportMisalignedColumns]-->
 <tr height="0" style="display:none">
  <td width="64" style="width:48pt"></td>
  <td width="210" style="width:158pt"></td>
  <td width="64" style="width:48pt"></td>
 </tr>
 <!--[endif]-->
</tbody></table>

Setelah ketemu, jangan lupa untuk pastekan di artikel kamu, pada tab HTML. Selesai

Kesimpulannya adalah masing-masing cara memiliki keunggulannya, Cara I lebih mengutamakan kepada pengefisienan waktu yang digunakan pada saat menulis artikel, sehingga membuat proses pengetikan menjadi lebih cepat. Sedangkan Cara II justru berkebalikan dengan cara sebelumnya, Cara II ini lebih mengutamakan pada Fast Loading, atau proses pemuatan artikel yang lebih cepat, karena kodenya yang sudah diubah sesuai dengan standar penulisan artikel yaitu harus menggunakan kode HTML.

Kalau masih kesulitan mengerjakannya, komen aja di kolom komen di bawah. Makasih