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.

12 comments:

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

    BalasHapus
  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. Terimakasih.. tulisannya sangat bermanfaat..
    My blog

    BalasHapus
  4. 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
  5. 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
  6. 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

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.