Cara Membuat Tabel Dalam Postingan Blog

 Kita bisa membuat tabel dengan menggunakan software seperti microsoft word atau microsoft excel. Namun, tentunya hal tersebut membuat kita agak ribet karena harus memindahkannya lagi kedalam postingan Blog.

 Pada kesempatan kali ini saya akan memberikan panduan tentang bagaima cara untuk membuat tabel dalam postingan di blog.

 Untuk membuat tabel di blog kita hanya memerlukan beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

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

table : Bagian dari tabel bisa dimodifikasi dengan warna,panjang lebarnya dan style bordernya.
tr : Merupakan baris pada tabel.
td : Merupakan kolom pada tabel.

Sekarang kita akan mencoba membuat tabel 2 kolom, maka kita cukup menuliskan kode HTML nya seperti ini.

<table width="550" border="1">
<tr>
<td>Kolom Satu </td>
<td>Kolom Dua </td>
</tr>
</table>

Maka tampilannya akan terlihat seperti ini.

Jika ingin menambah kolom menajdi 3 atau 4 cukup tambahkan <td> Kolom Ketiga </td> sebelum kode </tr></table> jadi hasil tampilannya akan seperti ini.

Untuk 3 Kolom Begini Kode HTMLnya<br />
<table width="550" border="1">
<tr>
<td>Kolom Satu </td>
<td>Kolom Dua </td>
<td>Kolom Ketiga </td>
</tr>
</table><br />
Untu 4 Kolom
Begini kode HTMLnya<br />
<table width="550" border="1">
<tr>
<td>Kolom Satu</td>
<td>Kolom Dua</td>
<td>Kolom Ketiga</td>
<td>Kolom Keempat</td>
</tr>
</table>

Jadi tampilannya akan terlihat seperti ini.

Selanjutnya kita akan mencona membuat tabel 2 kolom kesamping dan 2 kolom kebawah.

<table width="550" border="1">
<tr>
<td>Kolom Satu A </td>
<td>Kolom Satu B </td>
</tr>
<tr>
<td>Kolom Dua A </td>
<td>Kolom Dua B </td>
</tr>
</table>

Maka tampilnnya akan terlihat seperti ini.

Jika 3 kolom kesamping dan 2 kolom kebawah,cukup menambahkan kode <td>Kolom Ekstra</td> diantara kode <tr> dan </tr> pertama dan kedua.

<table width="550" border="1">
<tr>
<td>Kolom Satu A</td>
<td>Kolom Dua A</td>
<td>Kolom Ekstra 1</td>
</tr>
<tr>
<td>Kolom Satu B</td>
<td>Kolom Dua B</td>
<td>Kolom Ekstra 2 </td>
</tr>
</table>

Jadi tampilannya akan terlihat seperti ini.

Membuat 3 kolom kesamping dan 3 kolom kebawah,anda cukup menambahkan kode ini sebelum kode </table>.

<tr>
<td>Kolom Tiga A </td>
<td>Kolom Tiga B </td>
<td>Kolom Tiga C </td>
</tr>

Maka tampilan kode HTMLnya seperti ini.

<table width="550" border="1">
<tr>
<td>Kolom Satu A </td>
<td>Kolom Satu B </td>
<td>Kolom Satu C </td>
</tr>
<tr>
<td>Kolom Dua A </td>
<td>Kolom Dua B </td>
<td>Kolom Dua C </td>
</tr>
<tr>
<td>Kolom Tiga A </td>
<td>Kolom Tiga B </td>
<td>Kolom Tiga C </td>
</tr>
</table>

Dan tampilannya akan terlihat seperti ini.

Tabel dengan background warna warni 2 kolom dan 5 baris dengan posisi huruf di tengah.

<table width="550" border="1">
<tr><td align="center" bgcolor="yellow">Kolom 1</td><td align="center" bgcolor="green">Kolom 2</td></tr>
<tr><td align="center" bgcolor="red">Baris ke 2</td><td align="center" bgcolor="blue">Baris ke 2</td></tr>
<tr><td align="center" bgcolor="#00FFFF">Baris ke 3</td><td align="center" bgcolor="#FF7F50">Baris ke 3</td></tr>
<tr><td align="center" bgcolor="#ADFF2F">Baris ke 4</td><td align="center" bgcolor="#FF1493">Baris ke 4</td></tr>
<tr><td align="center" bgcolor="#bffaff">Baris ke 5</td><td align="center" bgcolor="#40FF1F">Baris ke 5</td></tr>
</table>

Maka Tampilannya akan terlihat seperti ini.

table widh=”550″ : lebar dari tabel tersebut,anda bisa menyesuaikan dengan selera anda.
Kolom Satu, Kolom Satu A : Tempat untuk memasukkan tulisan,keterangan ataupun link.

Mungkin hasilnya tidak akan sama dengan contoh tabel yang di atas dikarenakan setiap template CSSnya berbeda beda.Selamat mencoba.