CARA BUAT TABLE MUDAH, BERWARNA DAN RESPONSIVE TANPA CODING UNTUK BLOG

Biasanya kita akan masukkan table di blog supaya data dalam blog lebih rapi dan kemas. Kalau ada table di dalam artikel, blog pun akan nampak kemas dengan teks, gambar dan juga table. Sebelum ni Kak Bell hanya buat table di Microsoft Word dan pindahkan ke blog. Cara ini ok, tapi table tersebut tak dapat view full pada mobile phone dan tak responsive ikut view pada device.


Untuk hari ini Kak Bell nak kongsikan cara buat table mudah untuk blog. Mungkin ada yang dah tahu dan lebih mahir, jadi Kak Beel share sebab baru sekarang Kak Bell tahu dan baru belajar buat table yang responsive, menarik, dan berwarna di blogger. Tak perlu risau sebab cara membuat table html berwarna sangat mudah dan tak payah nak belajar buat coding html bagai. Dengan hanya menggunakan aplikasi online dan gunakan microsoft office atau Excel, table yang korang buat terus boleh ditukar kepada coding html untuk blog. Jom lihat tutorial cara membuat table di blog menggunakan Tables Generator supaya artikel di blog lebih cantik dan menarik.

Cara Membuat Table/Kotak Untuk Blog

Untuk table blogger ini adalah menggunakan aplikasi online Tables Generator. Korang boleh muat turun aplikasi atau guna sahaja secara online pada browser. Tables Generator ni ada fungi yang lengkap untuk sediakan table latex, table HTML, table Text, contact dan sebagainya. Cara membuat kotak di html menjadi sangat mudah dengan Tables Generator.

Tables Generator

1. Muat turun atau buka Tables Generator di browser. Kemudian pilih > HTML Table


2. Kemudian klik Menu File > New Table


3. Nanti akan keluar new window untuk dan masukkan jumlah row (baris) dan columns (kolom) yang diperlukan. Kemudian klik Create.


4. Masukkan data dalam draft table/kotak yang dibuat.

5. Boleh pilih background colour dan plih format theme yang disukai.



5. Klik > Generate. Boleh klik Preview untuk view table. setiap kali buat perubahan/editing kena klik Generate untuk refresh HTML code tadi.



6. Klik > Copy to clipboard.
7. Buka blogger dan buka artikel yang ingin dimasukkan kotak/table


8. Pilih mode HTML > paste kod html table dari Tables Generator


9. Contoh Compose Mode di blogger


10. Preview mode di blogger


Microsoft Word

Korang juga boleh buat draft table atau kotak di Microsoft Word sebelum dimasukkan ke dalam blog.

1. Buka aplikasi Microsoft Word.
2. Kemudian klik menu insert > tabel > insert table.
3. Masukkan data dalam table.
4. Kemudian copy table yang dibuat di word.
5. Buka Tables Generator > pilih HTML Table > menu file > new tabel > isikan jumlah lajur/baris sama dengan jumlah baris dan lajur di word.
6. Block table di tables Generator dan paste > Klik generate > preview > copy to clipboard.
7. Masukkan kod HTML dalam blog artikel.


Microsoft Excel

Biasanya kalau ada data yang banyak, lebih senang gunakan Microsoft Excel sebab Excel boleh buat lebih banyak table dan kemudian tukar ke format file CSV kepada table dalam format HTML. Berikut adalag cara untuk tukar file CSV ke HTML.

Cara membuat tabel di blog dengan excel:
1. Buka aplikasi Microsoft Excel
2. Siapkan table di excel > klik Save As > pilih format .CSV
3. Buka Tables Generator > pilih HTML Table > Klik menu File > Import CSV file
4. Pada new window > klik Choose File > open file CSV > klik Import
5. CSV table akan di convert oleh Tables Generator
6. Klik Generate > Preview > Copy to clipboard
7. Pastekan dalam artikel pada HTML mode.

Basically, korang boleh saje buat draft table secara terus di Tables Generator atau buat dahulu di Word atau Excel kemudian pindahkan file ke Table Generator untuk dapatkan HTML coding. Kalau ada cara lain yang lebih mudah, bolehlah kongsikan dan tinggalkan komen di bawah. Semoga bermanfaat.

6 comments:

  1. Thank you bagi tutorial. Lepas ni boleh la try nampak lebih kemas sikit mata memandang kan

    ReplyDelete
  2. okay baru tau cara ni kak bell, thank you :)

    ReplyDelete
  3. menarik ni... skrg dah tahu cara buat table dan masuk dalan blog

    ReplyDelete
  4. super interesting. thanks for sharing this easy way to create tables. xyh susah2 lg next time!

    ReplyDelete
  5. Tak pernah buat, nanti nak try jugalah, nampak mudah, tapi takut Sis ko yg pening hahahaha

    ReplyDelete
  6. Thank youuuu Kasi ilmu.... Mudahlah kerja macam ni kalau ada table macam tu... Nampak lebih kemas juga hee...

    ReplyDelete

Thank you for coming by.
Comments are your responsibility.
Any comments are subjected to the Act 588 MCMC 1988.
Comment wisely, and do it with pure intentions.