Cara membuat tabel sederhana pada postingan blog

Membuat tabel sederhana untuk sebuah postingan blog, tidak perlu menggunakan css dan tidak perlu edit template, namun karakter templet anda mungkin berbeda dan akan menghasilkan hasil yang berbeda juga.

ok berikut adalah tutorial dasar membuat table sederhana pada postingan blog.

Tabel Satu kolom Tanpa Border

1 kolom tanpa garis

HTML / doble click to select

<table> <tbody> <tr><td> 1 Kolom tanpa garis</td> </tr> </tbody></table>

Tabel Satu Kolom Dengan Border

1 Kolom

HTML / doble click to select

<table border="1"> <tbody> <tr><td>1 Kolom</td> </tr> </tbody></table>

Hanya menambahkan border="1" didepan kata table, untuk ketebalan border kalian bisa ubah angka satu ke angka yang lebih besar.

Tabel Satu Kolom Dengan Ukuran Tertentu

1 Kolom 150px

HTML / doble click to select

<table border="1" style="width: 150px;"> <tbody> <tr><td>1 Kolom</td> </tr> </tbody></table>

Dan yang ini juga sama kalian tinggal menambahkan kode style="width: 150px;" didepan kata table, dan ukurannya juga bisa kalian ubah sesuai selera menggunakan pixel (px) persentase (%) atau otomatis (auto).

Tabel Dua Kolom

kolom 1

Kolom 2

HTML / doble click to select

<table border="1"> <tbody> <tr><td >Kolom 1</td><td >Kolom 2</td> </tr> </tbody></table>

Disini hanya menambahkan kode <td>Kolom 2</td> diatas kode </tr> dan Kalian bisa menambahnya sampai beberapa kolom.

Tabel Dua Kolom & Dua Baris

Kolom 1	Kolom 2
Baris 1	Baris 2

HTML / doble click to select

<table border="1"> <tbody> <tr> <td >Kolom 1</td> <td >Kolom 2</td> </tr> <tr> <td >Baris 1</td> <td >Baris 2</td> </tr> </tbody></table>

Kalian tinggal salin dari Tag <tr> sampai </tr> Kemudian paste di atas tag </tbody> dan kalian bisa tambahkan hingga beberapa baris.

Tabel Dengan MergeCell Diatas dua Kolom dan Dua Baris.

MergeCell
Kolom 1	Kolom 2
Baris 1	Baris 2

HTML / doble click to select

<table border="1"> <tbody> <tr> <td colspan="2">Kolom 1</td> </tr> <tr> <td>Kolom 1</td> <td>Kolom 2</td> </tr> <tr> <td>Baris 1</td> <td>Baris 2</td> </tr> </tbody></table>

Utuk menambahkan MergeCell kalian hanya perlu copas kode <tr><td>Kolom 1</td></tr> dengan satu kolom dibawah tag <table border="1">dengan menambahkan colspan="2" di depan tag <td Tempel Disini> dan jika ingin menambah kolom dibawah MergeCell ubah nilai menjadi 3 atau lebih tergantung berapa banyak kolom dibawahnya.

Contoh : 1 MergeCell 3 Kolom 3 Baris maka akan tampil seperti ini.

MergeCell
Kolom 1	Kolom 2	Kolom 3
Baris 1	Baris 2	Kolom 3

Yang saya tandai merah adalah yang saya tambahkan dari kode tabel sebelumnya

HTML / doble click to select

<table border="1"> <tbody> <tr> <td colspan="3">Kolom 1</td> </tr> <tr> <td>Kolom 1</td> <td>Kolom 2</td> <td>Kolom 3</td> </tr> <tr> <td>Baris 1</td> <td>Baris 2</td> <td>Baris 3</td> </tr> </tbody></table>

Tabel Dengan MergeCell Diatas Dan Ditengah

mergecell Atas
Kolom Kiri	mergecell Bawah	Kolom Kanan
Baris Kiri		Baris Kanan

HTML / doble click to select

<table border="1"> <tbody> <tr> <td colspan="3">mergecell Atas</td> </tr> <tr> <td>Kolom Kiri</td> <td rowspan="2">mergecell Bawah</td> <td>Kolom Kanan</td> </tr> <tr> <td>Baris Kiri</td> <td>Baris Kanan</td> </tr> </tbody></table>

Untuk table ini saya menambahkan kode ini <td rowspan="2">mergecell Bawah</td> di tengah tag kolom kiri dan kanan. Ubah nilai row jika kalian menambah kolom atau baris.

Menambahkan Warna Pada Kolom.

KOLOM DENGAN WARNA

HTML / doble click to select

<table border="1"> <tbody> <tr> <td style="background-color: blue;">KOLOM DENGAN WARNA</td> </tr> </tbody></table>

Untuk menambahkan warna lalin cukup menambahkan kode style="background-color: blue;" didepan tag <td> contoh <td Tempel Disini> untuk warna terserah kalian sesuai selera.

Dan kalian bisa merangkai tabel kalian dengan bentuk warna baris & kolom sesuai kebutuhan. Contoh disini saya akan misalkan ingin memposting sebuah produk dan memasukan ditel produk pada tabel.

ABC
abc	IMG
ABC DEF GHI JKL
KETERANGAN : kolom keterangan

Untuk ukuran teks posisi dan warna teks kalian bisa mengaturnya di opsi blog masing-masing, demikianlah tutorial yang saya bisa berikan tentang membuat tabel sederhana ini.