Cara Membuat Tabel di Postingan Blogger Lengkap

Baca Juga

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.

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

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.