CARANECOM

Caranecom is a Informative Blogging, place of Information and Learning

Cara Membuat Tabel Di Artikel Blog Lengkap Dan Mudah


Salam Blogger Pada kesempatan kali ini saya ingin berbagi tentang cara membuat kolom atau tabel pada postingan / artikel blog dengan sangat mudah, dimana informasi ini penulis dapatkan dari hasil keluyuran dan surfing di sana sini. Dan dari beberapa tips dan triks yang penulis gunakan adalah yang mungkin menurut penulis lebih mudah.


berikut adalah ilustrasi kolom atau tabel yang kita buat :

Kolom V 1 A Kolom V 1 B Kolom V 1 C
Kolom H 2 A Kolom H 2 B Kolom H 2 C
Kolom H 3 A Kolom H 3 B Kolom H 3 C 
Contoh tabel diatas adalah 3 kolom 3 baris :
<table border="1" style="width: 500px;">
<tr>
<td>Kolom V 1 A </td>
<td>Kolom V 1 B </td>
<td>Kolom V 1 C </td>
</tr>
<tr>
<td>Kolom H 2 A </td>
<td>Kolom H 2 B </td>
<td>Kolom H 2 C </td>
</tr>
<tr>
<td>Kolom H 3 A </td>
<td>Kolom H 3 B </td>
<td>Kolom H 3 C </td>
</tr>
</table>
Untuk mempraktekannya silahkan coba anda copy code diatas pada mode HTML kemudian lihat di mode Compose.

Kolom V 1 A
Contoh tabel diatas adalah 1 Kolom 1 baris :
<table border="1" style="width: 500px;">
<tr>
<td>Kolom V 1 A </td>
</tr>
</table>

Kolom V 1 A Kolom V 1 B
Contoh Tabel diatas adalah 1 Baris 2 Kolom :
<table border="1" style="width: 500px;">
<tr>
<td>Kolom V 1 A </td>
<td>Kolom V 1 B </td>
</tr>
</table>

Kolom V 1 A Kolom V 1 B
Untuk memberi warna seperti contoh diatas tinggal tambah  seperti dibawah ini :
<table border="1" style="width: 500px;">
<tr>
<td style="background-color: red;">Kolom V 1 A </td>
<td style="background-color: blue;">Kolom V 1 B </td>
</tr>
</table>


MC 1 MC a
MC 2 MC 0 MC b
MC 3 MC c
Untuk Membuat Merge Cell seperti tabel diatas adalah :
<table border="1" style="width: 500px;">
<tr>
<td colspan="2">MC 1</td>
<td>MC a</td>
</tr>
<tr>
<td>MC 2</td>
<td rowspan="2">MC 0</td>
<td>MC b</td>
</tr>
<tr>
<td>MC 3</td>
<td>MC c</td>
</tr>
</table>

Kolom V 1 A

Untuk membuat Tabel berada diposisi tengah bisa dilakukan dengan pemilihan align center untuk tulisan juga demikian.

Jika anda merasa ribet dengan kode tersebut silahkan anda buat dengan lebih mudah lagi tanpa coding dan bisa membuat tabel sesuai selera dari M.S Word atau excel kemudian Save As pada type web,page kemudian buka file yang sudah tersimpan tadi dengan klik 2x setelah terbuka tekan CTRL U pada keyboard kemudian copy dari kode <table> hingga </table>dan pastekan pada mode html.
Untuk lebih lengkapnya anda bisa lihat pada artikel dibawah ini :


Demikian artikel sederhana ini semoga bermanfaat
Salam Caranecom