Kamis, 22 Juni 2017

Cara Membuat Tabel di Postingan Blogger

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
Sekian dulu artikel saya kali ini. Semoga Bermanfaat.

2 comments:

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.