Kamis, 08 Maret 2018

Cara Membuat Tabel di Postingan Blogger Lengkap

Sobat pernah berkunjung ke blog shop atau situs online shop? Biasanya di blog online shop tertera daftar harga dalam bentuk tabel. Hal ini mempermudah pengunjung untuk mencari harga barang yang ia cari. Tabel adalah sekumpulan data atau informasi yang tersusun dengan garis pembatas.

Menambahkan Tabel pada Postingan Blogger
Tabel tak hanya berguna untuk menampilkan harga pada blog online shop. Tabel juga bisa berguna untuk menampilkan suatu informasi atau keterangan tertentu. Sehingga dengan tabel ini pengunjung dapat lebih mudah untuk mendapatkan informasi dari postingan kita. Kita bisa membuat tabel dengan menggunakan software seperti microsoft word atau microsoft excel. Namun, tentunya hal tersebut membuat kita agak ribet karena harus menulis disoftware lalu memindahkannya di postingan Blogger.
Elemen dasar tabel HTML adalah <table></table>. Nah, kali ini kita akan sama-sama belajar membuat tabel menggunakan kode HTML.

Cara Membuat Tabel di Postingan Blog :

Untuk memasukannya kedalam postingan blog, silahkan ganti mode compose, ke mode HTML
Mode HTML

Pembuatan Tabel 2 Kolom :

Masukkan kode dibawah ini & pastikan anda dalam mode HTML
<table>
<tr>
<td>Contoh Kolom 1 A</td>
<td>Contoh Kolom 1 B</td>
</tr>
</table>
Maka hasilnya akan menjadi :
Contoh Kolom 1 A Contoh Kolom 1 B
Untuk menambahkan 2 kolom lagi dibawahnya cukup menambahkan kode dibawah ini diatas kode </table> :
<tr>
<td>Contoh Kolom 2 A </td>
<td>Contoh Kolom 2 B </td>
</tr>
Setelah ditambahkan maka kodennya nampak seperti ini :
<table>
<tr>
<td>Contoh Kolom 1 A </td>
<td>Contoh Kolom 1 B </td>
</tr>
<tr>
<td>Contoh Kolom 2 A </td>
<td>Contoh Kolom 2 B </td>
</tr>
</table>
Dan hasilnnya akan menjadi seperti dibawah ini :
Contoh Kolom 1 A Contoh Kolom 1 B
Contoh Kolom 2 A Contoh Kolom 2 B
Untuk menambahkan 2 kolom tabel dibawahnya lagi silahkan tambahkan kode lagi seperti diatas.

Pembuatan Tabel 3 Kolom :

Untuk pembuatan tabel 3 kolom cukup menambahkan <td>nama tabel</td>, coba masukkan kode dibawah ini pada mode html :
<table>
<tr>
<td>Contoh Kolom 1A</td>
<td>Contoh Kolom 1B</td>
<td>Contoh Kolom 1C</td>
</tr>
</table>
Maka hasilnya menjadi :
Contoh Kolom 1A Contoh Kolom 1B Contoh Kolom 1C
Seperti tadi, untuk menambahkan 3 kolom lagi dibawahnya tambahkan kode ini di atas kode </table> :
<tr>
<td>Contoh Kolom 2A</td>
<td>Contoh Kolom 2B</td>
<td>Contoh Kolom 2C</td>
</tr>
Maka penampakan kodenya menjadi seperti :
<table>
<tr>
<td>Contoh Kolom 1A</td>
<td>Contoh Kolom 1B</td>
<td>Contoh Kolom 1C</td>
</tr>
<tr>
<td>Contoh Kolom 2A</td>
<td>Contoh Kolom 2B</td>
<td>Contoh Kolom 2C</td>
</tr>
</table>
Dan hasilnya menjadi :
Contoh Kolom 1A Contoh Kolom 1B Contoh Kolom 1C
Contoh Kolom 2A Contoh Kolom 2B Contoh Kolom 2C
Untuk menambahkan 3 kolom tabel lagi dibawahnya, silahkan tambahkan <td>blablabla</td> seperti penjelasan saya diatas.

Cara Menggunakan Merge Cell Pada Tabel Postingan Blog :

Untuk menggunakan merge cell kita perlu menambahkan cosplan dan rowspawn.
Contoh Kode :
<table>
  <tr>
    <td colspan="2">mergecell1</td>
    <td>merge1</td>
  </tr>
  <tr>
    <td>merge2a</td>
    <td rowspan="2">mergecell2</td>
    <td>merge2b</td>
  </tr>
  <tr>
    <td>merge3a</td>
    <td>merge3b</td>
  </tr>
</table>
Dan hasilnya menjadi :
mergecell1 merge1
merge2a mergecell2 merge2b
merge3a merge3b
  
Update 08 Maret 2018: Cara Memberi Warna pada Tabel

Cara Memberi Warna pada Tabel

Supaya tabel lebih menarik, kita bisa memberi warna pada tabel. Kita bisa memberi warna pada teks dalam tabel, ataupun pada background tabel. Dengan memberi warna, pengunjung akan lebih tertarik dan tidak mudah bosan untuk membaca artikel di blog kita. Berikut cara mudah memberi warna pada tabel.

Cara Memberi Warna pada Teks Tabel

Untuk memberi warna pada teks dalam tabel, kita hanya perlu menambahkan kode style='color:warna' di dalam tag <td> sehingga menjadi <td style='color:warna'>
(Ganti warna dengan nama warna yang diinginkan atau dengan kode warna html)
Sebagai contoh, saya akan memberi warna merah pada teks dalam tabel 2 kolom. Cukup dengan memasukkan kode seperti di atas pada teks yang akan diberi warna.
<table>
<tr>
<td style='color:red'>Contoh Kolom 1 A</td>
<td>Contoh Kolom 1 B</td>
</tr>
</table>
Maka hasilnya akan seperti di bawah ini.
Contoh Kolom 1 A Contoh Kolom 1 B

Cara Memberi Warna pada Background Tabel

Hampir sama dengan cara memberi warna pada teks tabel, untuk memberi warna pada background tabel, kita hanya perlu menambahkan kode style='background-color:warna' di dalam tag <td> yang akan diberi warna, sehingga menjadi <td style='background-color:warna'>

Sebagai contoh, saya akan memberi warna merah pada background dalam tabel 2 kolom.
<table>
<tr>
<td style='background-color:red'>Contoh Kolom 1 A</td>
<td>Contoh Kolom 1 B</td>
</tr>
</table>
Maka hasilnya akan seperti di bawah ini.
Contoh Kolom 1 A Contoh Kolom 1 B

Silahkan sobat edit sendiri kode-kode yang telah saya berikan, untuk diterapkan dalam postingan blog sobat. Sekian dulu artikel saya kali ini. Semoga Bermanfaat.

27 comments:

  1. mntap gan .. semoga bermanfaat ya gan untuk orang lain..

    BalasHapus
    Balasan
    1. Iya Mas ini bermanfaat untuk Aku, mau bikin tabel dipostingan blog aku, Matursuwun

      Hapus
  2. terlalu ribet gan.. pake edit html.. kalau salah gmn?? cara masukin datanya gmn??

    BalasHapus
    Balasan
    1. Hehe, jangan takut salah sebelum mencoba mbak.. Silahkan dipahami dulu..

      Hapus
  3. kalau langsung paste gak bisa ya mas??
    edit html secara manual apa tinggal copy yang di suguhkan mas aldi di atas tadi?

    BalasHapus
    Balasan
    1. Bisa copy paste kode yang sudah saya sediakan diatas, lalu tinggal sobat edit sendiri..

      Hapus
  4. Untuk mewarnai tabel dan menempatkan tabel secara center bagaimana?

    BalasHapus
    Balasan
    1. Untuk memberi warna pada tabel, sudah saya tambahkan tutorialnya di postingan.
      Untuk menempatkan tabel di tengah postingan (Secara Center), bisa menggunakan tag <center> diawal, lalu diakhiri dengan tag </center>
      Contoh:
      <center>
      <table>
      <tr>
      <td>Contoh Kolom 1 A</td>
      <td>Contoh Kolom 1 B</td>
      </tr>
      </table>
      </center>

      Hapus
  5. Itu di masukan pertama kali kah??

    BalasHapus
    Balasan
    1. Tidak harus sob.. Yang penting saat ingin membuat tabel, pastikan sobat sudah dalam mode HTML

      Hapus
    2. https://drakorbi.blogspot.com/

      Hapus
  6. Mas kok di saya garis tabelnya ga muncul ya? kalo teks didalamnya sudah jadi tabel. tapi garinnuya ga ada? kira-kira apanya ya?

    BalasHapus
  7. Mas kok di saya garis tabelnya ga muncul ya? kalo teks didalamnya sudah jadi tabel. tapi garinnuya ga ada? kira-kira apanya ya?

    BalasHapus
  8. Bagus artikel nya gan..di tunggu artikel yang baru gan
    coba di kunjungi artikel saya gan^_^
    KLIK DI SINI

    BalasHapus
  9. Bagus banget artikel nya..

    Ternyata begitu bikin tabelnya, selama ini kesulitan saya..

    BalasHapus
  10. oalah mas aldi. terima kasih banyak yah..saya cudah coba trik beberapa. tetep ngga bisa. pake trik ini sukses..thank yah.

    BalasHapus
  11. Mas Aldi terima kasih banyak, tutorialnya sangat membantu. Izin shere di Google plus untuk dibaca ulang mas. Salam kenal.

    BalasHapus
  12. Terima kasih mas,, Artikelnya bermanfaat

    BalasHapus
  13. Mas, kalo buat tabel pake cara 1 di atas bisa bikin halaman postingan kalau di klik jadi lambat gak?[kalo tabelnya banyak] thanks ya...

    BalasHapus
  14. mantap bang https://www.terkreatif.com

    BalasHapus
  15. thank dah sharing ilmu tabnya broo...hehe

    BalasHapus
  16. sangat membant gan terima kasih

    BalasHapus
  17. This amount of growth in gamers should be seen within the revenues of an especially well monetizing sport like Slotomania. And truth that|the fact that} it isn’t is sort of|is kind of} worrisome for the king of Slots. The most downloaded titles within the US are Social Casino and 1xbet korea Poker/Card video games. Card video games are extremely popular in Asian international locations like India.

    BalasHapus

Tata Tertib Berkomentar :
1.) Berkomentarlah dengan sopan sesuai dengan topik artikel.
2.) Jangan sertakan link aktif dalam komentar, karena saya pasti akan mengunjungi balik blog sobat.
3.) Jika artikel ini bermanfaat bagi sobat, bagikan artikel ini ke teman-teman sobat melalui Facebook, Google+, Twitter dan lain lain, karena "berbagi itu indah" hehehe.

Terima kasih sudah berkunjung.