Cara Membuat Tabel Di Blogger

Cara Membuat Tabel Dalam Postingan Di Blogger

Sebelumnya saya sudah menulis artikel mengenai Cara Membuat Tabel Di Blog Tanpa Repot Coding.Pada kesempatan ini saya akan memberikan tips & trik cara membuat tabel dalam postingan di blogspot dengan menggunakan kode HTML.

Cara Membuat Tabel Di Blog Blogger

Untuk Membuat tabel di blogger kita hanya memerlukan beberapa kode HTML saja,yang nantinya akan kita gunakan dalam pembuatan tabel,Berikut kode-kode HTML tersebut:

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

• Tag <table > digunakan untuk memulai tabel
• Tag <tr> adalah singkatan dari table row digunakan untuk membuat baris dari tabel
• Tag <td> adalah singkatan dari table data digunakan untuk menginput data ke tabel 

Beneran itu saja kode yang digunakan untuk membuat tabel?

Ya... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel,tapi ada sedikit kode tambahan sih.

Mari kita mulai praktek,silahkan sambil di fahami ya,soalnya nanti kalo terlalu detail artikelnya kepanjangan.

1.Membuat tabel 2kolom kesamping dan satu kolom ke bawah,maka kita cukup menuliskan kode HTML berikut.

<table width=”500” border=”1”> <tr> <td>Kolom 1</td> <td>Kolom 2</td> <tr/> </table>

dan hasilnya akan terlihat seperti ini.

Kolom 1

Kolom 2

2.Jika ingin merubahnya menjadi 3 kolom ke samping dan 1 kolom ke bawah anda cukup menambahkan kode <td> kolom tambahan atau kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini.

Kolom 1

Kolom 2

Kolom 2

3.Membuat tabel 2 kolom ke samping dan 2 kolom ke bawah,maka kita cukup menuliskan kode HTML berikut.

<table width="500" border="1"> <tr> <td>Kolom 1 A </td> <td>Kolom 1 B </td> </tr> <tr> <td>Kolom 2 A </td> <td>Kolom 2 B </td> </tr> </table>

Hasilnya seperti ini.

Kolom 1 A	Kolom 1 B
Kolom 2 A	Kolom 2 B

Jika ingin merubahnya menjadi 3 kolom ke samping dan 2 kolom ke bawah anda cukup menambahkan kode <td>Kolom tambahan 1,atau 2 </td> diantara <tr> dan </tr> pertama dan kedua

<table width="500" border="1"> <tr> <td>Kolom 1 A</td> <td>Kolom 2 A</td> <td>Kolom Tambahan 1</td> </tr> <tr> <td>Kolom 1 B</td> <td>Kolom 2 B</td> <td>Kolom Tambahan 2 </td> </tr> </table>

Maka hasilnya seperti ini.

Kolom 1 A	Kolom 2 A	Kolom Tambahan 1
Kolom 1 B	Kolom 2 B	Kolom Tambahan 2

4.Membuat tabel 3 kolom kesamping dan 3 kolom ke bawah.

Jika anda ingin membuat 3 kolom ke samping dan 3 kolom ke bawah cukup menambahkan kode ini sebelum kode </table>

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

Hasil kode HTML nya akan seperti ini.

<table width="500" border="1"> <tr> <td>Kolom 1 A </td> <td>Kolom 1 B </td> <td>Kolom 1 C </td> </tr> <tr> <td>Kolom 2 A </td> <td>Kolom 2 B </td> <td>Kolom 2 C </td> </tr> <tr> <td>Kolom 3 A </td> <td>Kolom 3 B </td> <td>Kolom 3 C </td> </tr> </table>

Dan hasil tabelnya akan terlihat seperti ini.

Kolom 1 A	Kolom 1 B	Kolom 1 C
Kolom 2 A	Kolom 2 B	Kolom 2 C
Kolom 3 A	Kolom 3 B	Kolom 3 C

Keterangan:

• Pada tulisan yang saya tulis di kolom 1,Kolom 1A,2A, dan seterusnya adalah tempat untuk memasukkan tulisan,Link,atau gambar anda silahkan ganti sesuai keperluan.
• sedangkan kode ini.

<table width="500" border="1">

• Kode yang saya beri warna merah "500" adalah lebar tabel tersebut anda bisa merubahnya menjadi 600px,700px dan sebagainya.Jika anda ingin membuat tabel selebar 600px anda cukup menulisnya 600 saja

Jika anda ingin mencoba praktek di rumah silahkan copy pastekan saja kode yang sudah saya tulis diatas,terserah mau pakai yang mana.

Namun setelah anda pasang kode tersebut dan hasilnya tidak sama dengan contoh di tabel blog ini, anda jangan heran itu permasalahannya hanya di CSS saja karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda,anda bisa memakai kode CSS ini.

th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

Jika anda sudah paham CSS silahkan bikin kode CSS sesuai selera anda.

Demikian tutorial mengenai cara membuat tabel dalam postingan blogger dengan menggunakan kode HTML.Semoga tutorial ini bermanfaat.

Subscribe to receive free email updates: