Cara Membuat Tabel Di Postingan Blog

Cara Mudah Membuat Tabel Di Postingan Blog - Pada postingan kali ini saya akan share tutorial blogger mengenai cara membuat tabel di postingan blog. Pernahkan anda melihat tabel dalam postingan blog shop? tabel ini sangat berguna untuk blog shop sebagai daftar harga barang yang dijual di blog shop tersebut, tidak hanya untuk blog shop tabel ini juga berguna untuk postingan blog lainnya, seperti tabel yang anda lihat di laman tukar link di blog ini.

Contoh Tabel Di Laman Tukar Link Blog Mas Aldi

Beberapa blogger mungkin agak kesusahan untuk membuat tabel tersebut, namun sebenarnya membuat tabel itu sangatlah mudah. Dalam membuat tabel kita cuma memerlukan kode :

<table> & </table>
<tr> & </tr>
<td> & </td>

Yap, cukup menggunakan kode di atas untuk membuat tabel, namun tentunnya ada tambahan kode lainnya.
Ok, mari kita langsung ke tutorialnya, tolong disimak baik2 tutorial ini agar anda mudah dalam mempraktekkannya.

Cara Mudah Membuat Tabel Di Postingan Blog :

Untuk memasukannya kedalam postingan blog, silahkan ganti mode compose, ke mode html.

Pembuatan Tabel 2 Kolom :
Coba 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

Untuk menambahkan kolom lainnya, silahkan utak atik sendiri kodenya :D
Jika anda kebingungan, silahkan bertanya dengan berkomentar dipostingan ini.
Sekian dulu postingan saya tentang cara membuat tabel pada postingan blog, semoga postingan kali ini bermanfaat bagi anda. :)

Cara Membuat Tabel Di Postingan Blog 2014-11-30T15:09:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous