Cara Membuat Tabel di Blog

Cara Membuat Tabel di Blog. Cara Membuat Tabel di Blog sebenarnya tidak terlalu sulit, hanya membutuhkan sedikit kode HTML saja. Akan tetapi, bagi pemula akan dianggap sedikit ribet dan sulit. Jika setelah membaca postingan ini masih saja kesulitan, kalian dapat menggunakan Cara Membuat Tabel di Blog Menggunakan Google Docs atau Cara Membuat Tabel di Blog tanpa Coding.

Pada dasarnya membuat tabel cukup dengan perintah <table> ..... </table> yang di dalamnya terdapat beberapa atribut berikut ini:

bordercolor = warna garis tabel
bgcolor = warna background tabel
cellpadding = jarak antara tulisan dengan garis luar tabel
cellspacing = jarak antar tulisan
border = ketebalan garis pinggir tabel
dotted = garis titik putus-putus
dashed = garis datar putus-putus
double = garis rangkap dua

Berikut ini contoh pertama paling simpel:

<table width="250" border="1">
<tr>
<td>

(Di sini isi tabel)

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

Hasilnya :

Di sini isi tabel

Dalam contoh di atas, tulisan tampak rapat ke kiri. Untuk merubah tepat berada di tengah-tengah dengan menambahkan elemen align="center"

Contohnya :

<table width="250" border="1">
<tr>
<td align="center">

(Di sini isi tabel)

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

Hasilnya menjadi seperti ini:

Di sini isi tabel

Angka border dapat diganti sesuai selera. Misalnya angka border diganti 7, seperti ini:

<table width="250" border="7">
<tr>
<td align="center">

(Di sini isi tabel)

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

Maka hasilnya seperti ini:

Di sini isi tabel

Bagaimana cara membuat tabel menjadi 2 kolom? Caranya hanya menambahkan elemen yang sama dibawahnya, seperti ini contohnya:

<table width="350" border="7">
<tr>
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

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

Hasilnya seperti ini:

Kolom 1 Baris 1

Kolom 2 Baris 1

 

Kemudian untuk membuat 3 baris berikut ini caranya:

<table width="400" border="1">
<tr>
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr>
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr>
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

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

Hasilnya seperti ini:

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

Agar semakin menarik, terkadang border dan backround diberikan warna tertentu. Untuk menambahkan warna pada border dan background tabel hanya menyisipkan kode seperti berikut ini:

<table width="400" border="1" bordercolor="blue">
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr bgcolor="yellow">
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

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

Lihat hasilnya:

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

Kemudian untuk membuat garis tabel putus-putus dengan cara menambahkan dotted atau dashed:

<table width="400" border="1" bordercolor="blue" style="border-style:dashed; border-collapse:collapse">
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr bgcolor="yellow>
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

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

Berikut ini hasilnya:

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

Sudah siap membuat tabel di blog? Enjoy with BER-BAGI.blogspot.com