Trik Membentuk Tabel pada Postingan Blogger Lengkap

Sobat pernah berkunjung ke blog shop atau situs online shop? Umumnya pada blog online shop tertera daftar harga dalam bentuk tabel. Contoh ini mempermudah pengunjung buat mencari harga barang yang dia cari. Tabel merupakan sekumpulan gegevens atau berita yang tersusun dengan garis pembatas.

Tabel tidak Cuma bermanfaat buat menampilkan harga pada blog online shop. Tabel pula dapat bermanfaat buat menampilkan suatu berita atau keterangan tertentu. Sebagai akibatnya dengan tabel ini pengunjung mampu lebih gampang buat mendapatkan berita dari postingan kita. Kita dapat membentuk tabel dengan memakai perangkat lunak misalnya microsoft word atau microsoft excel. Tetapi, tentunya contoh tadi membentuk kita agak ribet akibat wajib menulis disoftware kemudian memindahkannya pada postingan Blogger.
Elemen dasar tabel HTML merupakan .
Nah, kalium ini kita bakal sama-sama belajar membentuk tabel memakai kode HTML.

Trik Membentuk Tabel pada Postingan Blog :

Buat memasukannya kedalam postingan blog, silahkan ganti mode compose, ke mode HTML

Pembuatan Tabel 2 Kolom :

Tambahkan kode dibawah ini & pastikan anda dalam mode HTML

<tabledangt;
<trdangt;
<tddangt;Contoh Kolom 1 Adanlt;/tddangt;
<tddangt;Contoh Kolom 1 Bdanlt;/tddangt;
</trdangt;
</tabledangt;

Maka hasilnya bakal sebagai :

Contoh Kolom 1 A

Contoh Kolom 1 B

Buat menambahkan 2 kolom lagi dibawahnya relatif menambahkan kode dibawah ini diatas kode </tabledangt; :

<trdangt;
<tddangt;Contoh Kolom 2 A </tddangt;
<tddangt;Contoh Kolom 2 B </tddangt;
</trdangt;

Sesudah ditambahkan maka kodennya nampak misalnya ini :

<tabledangt;
<trdangt;
<tddangt;Contoh Kolom 1 A </tddangt;
<tddangt;Contoh Kolom 1 B </tddangt;
</trdangt;
<trdangt;
<tddangt;Contoh Kolom 2 A </tddangt;
<tddangt;Contoh Kolom 2 B </tddangt;
</trdangt;
</tabledangt;

Serta hasilnnya bakal sebagai misalnya dibawah ini :

Contoh Kolom 1 A	Contoh Kolom 1 B
Contoh Kolom 2 A	Contoh Kolom 2 B

Buat menambahkan 2 kolom tabel dibawahnya lagi silahkan masukkan kode lagi misalnya diatas.

Pembuatan Tabel 3 Kolom :

Buat pembuatan tabel 3 kolom relatif menambahkan nama tabel, coba tambahkan kode dibawah ini pada mode html :

<tabledangt;
<trdangt;
<tddangt;Contoh Kolom 1Adanlt;/tddangt;
<tddangt;Contoh Kolom 1Bdanlt;/tddangt;
<tddangt;Contoh Kolom 1Cdanlt;/tddangt;
</trdangt;
</tabledangt;

Maka hasilnya sebagai :

Contoh Kolom 1A

Contoh Kolom 1B

Contoh Kolom 1C

Misalnya tadi, buat menambahkan 3 kolom lagi dibawahnya masukkan kode ini pada atas kode </tabledangt; :

<trdangt;
<tddangt;Contoh Kolom 2Adanlt;/tddangt;
<tddangt;Contoh Kolom 2Bdanlt;/tddangt;
<tddangt;Contoh Kolom 2Cdanlt;/tddangt;
</trdangt;

Maka penampakan kodenya sebagai misalnya :

<tabledangt;
<trdangt;
<tddangt;Contoh Kolom 1Adanlt;/tddangt;
<tddangt;Contoh Kolom 1Bdanlt;/tddangt;
<tddangt;Contoh Kolom 1Cdanlt;/tddangt;
</trdangt;
<trdangt;
<tddangt;Contoh Kolom 2Adanlt;/tddangt;
<tddangt;Contoh Kolom 2Bdanlt;/tddangt;
<tddangt;Contoh Kolom 2Cdanlt;/tddangt;
</trdangt;
</tabledangt;

Serta hasilnya sebagai :

Contoh Kolom 1A	Contoh Kolom 1B	Contoh Kolom 1C
Contoh Kolom 2A	Contoh Kolom 2B	Contoh Kolom 2C

Buat menambahkan 3 kolom tabel lagi dibawahnya, silahkan masukkan blablabla misalnya penerangan aku diatas.

Trik Memakai Merge Cell Pada Tabel Postingan Blog :

Buat memakai merge cell kita perlu menambahkan cosplan serta rowspawn.
Contoh Kode :

<tabledangt;
  <trdangt;
    <td colspan="2">mergecell1danlt;/tddangt;
    <tddangt;merge1danlt;/tddangt;
  </trdangt;
  <trdangt;
    <tddangt;merge2adanlt;/tddangt;
    <td rowspan="2">mergecell2danlt;/tddangt;
    <tddangt;merge2bdanlt;/tddangt;
  </trdangt;
  <trdangt;
    <tddangt;merge3adanlt;/tddangt;
    <tddangt;merge3bdanlt;/tddangt;
  </trdangt;
</tabledangt;

Serta hasilnya sebagai :

mergecell1		merge1
merge2a	mergecell2	merge2b
merge3a		merge3b

  

Update 08 Maret 2018: Trik Memberi Warna pada Tabel

Trik Memberi Warna pada Tabel

Agar tabel lebih menarik, kita dapat memberi warna pada tabel. Kita dapat memberi warna pada teks dalam tabel, ataupun pada background tabel. Dengan memberi warna, pengunjung bakal lebih tertarik serta tidak gampang bosan buat membaca wetsartikel pada blog kita. Berikut trik gampang memberi warna pada tabel.

Trik Memberi Warna pada Teks Tabel

Buat memberi warna pada teks dalam tabel, kita Cuma perlu menambahkan kode style="color:warna" pada dalam tag sebagai akibatnya sebagai warna">

(Ganti warna dengan nama warna yang diinginkan atau dengan kode warna html)

Seperti contoh, aku bakal memberi warna merah pada teks dalam tabel 2 kolom. Relatif dengan memasukkan kode misalnya pada atas pada teks yang bakal diberi warna.

<tabledangt;
<trdangt;
<td style="color:red">Contoh Kolom 1 Adanlt;/tddangt;
<tddangt;Contoh Kolom 1 Bdanlt;/tddangt;
</trdangt;
</tabledangt;

Maka hasilnya bakal misalnya pada bawah ini.

Contoh Kolom 1 A

Contoh Kolom 1 B

Trik Memberi Warna pada Background Tabel

Nyaris sama dengan trik memberi warna pada teks tabel, buat memberi warna pada background tabel, kita Cuma perlu menambahkan kode style="background-color:warna" pada dalam tag <tddangt; yang bakal diberi warna, sebagai akibatnya sebagai <td style="background-color:warna">

Seperti contoh, aku bakal memberi warna merah pada background dalam tabel 2 kolom.

<tabledangt;
<trdangt;
<td style="background-color:red">Contoh Kolom 1 Adanlt;/tddangt;
<tddangt;Contoh Kolom 1 Bdanlt;/tddangt;
</trdangt;
</tabledangt;

Maka hasilnya bakal misalnya pada bawah ini.

Contoh Kolom 1 A

Contoh Kolom 1 B

Silahkan sobat edit sendiri kode-kode yang sudah aku berikan, buat diterapkan dalam postingan blog sobat. Sekian dulu wetsartikel aku kalium ini. Semoga Bermanfaat.

Berbagi :