Cara Membuat Tabel Di Postingan Blogger Panduan Lengkap Terbaru

Cara Membuat Tabel Di Postingan Blogger Panduan Lengkap Terbaru - apa kabar para pembaca mamang obet ? semoga baik baik saja , pada kesempatan ini mamang akan membahas cara membuat tabel di postingan blog dengan mudah . pastinya sobat pernah berkunjung ke blog toko online atau spesifikasi teknologi ? biasanya di sana tertera daftar harga yang berbentuk tabel .

Hal ini untuk mempermudah bagi pengunjungnya untuk mencari harga barang yang ia cari . Tabel adalah sekumpulan data atau informasi yang tersusun dengan garis pembatas. 

Tabel tidak hanya berguna untuk menampilkan harga pada blog online shop . tapi 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 HTML membuat table itu adalah <table></table>. Nah , pada kesempatan ini mamang akan membahasnya secara rinci di artikel ini menggunakan kode HTML .

Cara Membuat Tabel Di Postingan Blog

Untuk memasukan tabel / membuat tabel di postingan blog , silahkan ganti mode compose ke mode HTML .

Pembuatan Tabel 2 Kolom

Masukkan kode dibawah ini & pastikan anda dalam mode HTML 

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> :

HTML<tr>
<td>Contoh Kolom 2 A </td>
<td>Contoh Kolom 2 B </td>
</tr>

Setelah ditambahkan maka kodennya nampak seperti ini : 

HTML<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 :

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> :

HTML<tr>
<td>Contoh Kolom 2A</td>
<td>Contoh Kolom 2B</td>
<td>Contoh Kolom 2C</td>
</tr>

Maka penampakan kodenya menjadi seperti :

HTML<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 : 

HTML<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

Cara Membuat 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.

HTML<table>
<tbody>
<tr>
<td style="color: red;">Contoh Kolom 1 A</td>
<td>Contoh Kolom 1 B</td>
</tr>
</tbody></table>

Maka hasilnya akan seperti di bawah ini.

Contoh Kolom 1 A

Contoh Kolom 1 B

Cara Memberi Warna Pada Backround 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.

HTML<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 Cara Membuat Tabel Di Postingan Blogger Panduan Lengkap Terbaru , Semoga Bermanfaat Bagi Anda :) .

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: