Membuat Tabel di Blog

Pembuatan table dalam blog terkadang memang harus digunakan. Misalkan saja kita ingin memposting artikel tentang sebuah data, kode warna, dsb. Bagi anda yang sudah lama berkecimpung di dunia blogger mungkin sudah di luar kepala untuk membuat table, untuk itu pada postingan kali ini saya tujukan kepada blogger pemula yang belum begitu familiar dengan kode untuk pembuatan tabel, pada intinya hanya mengulang saja ^^,. Berikut ini contoh-contoh pembuatan table.

1. Tabel 1 kolom
   
   Kodenya:
   
   

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

   
   Hasilnya:
   
   

   Kolom 1

2. Tabel 2 kolom
   
   

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

   
   Hasilnya:
   
   

   Kolom 1

   Kolom 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag td menentukan kolom
3. Tabel 2 baris
   
   

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

   
   Hasilnya:
   
   

   Baris 1

   Baris 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag tr menentukan Baris
4. Tabel 1 Kolom 2 Baris
   
   

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

   
   Hasilnya:
   
   

   Kolom 1	Baris 1
   	Baris 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag rowspan berfungsi untuk penggabungan cell dalam satu kolom dan angka 2 pada rowspan menentukan jumlah cell yang digabung
5. Tabel 1 Baris 2 Kolom
   
   

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

   
   Hasilnya:
   
   

   Baris 1
   Kolom 1	Kolom 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag colspan berfungsi untuk penggabungan cell dalam satu baris dan angka 2 pada colspan menentukan jumlah cell yang digabung
6. Penggunaan Tag cellpadding dan bgcolor
   
   

   <table border="1" cellpadding="10">
   <tr><td bgcolor="#ff9900">Tabel</tr>
   </table>

   
   Hasilnya:
   
   
   
   
   

   Tabel

   
   * Dari kode di atas dapat diambil kesimpulan jika tag cellpadding berfungsi untuk memberi jarak text dengan border dan angka 10 pada cellpadding menentukan jarak antara text dengan border(dalam satuan px)
   * tag bgcolor berfungsi untuk memberi background warna pada cell




7. Penggunaan tag width, cellspacing, dan align
   
   

   <table border="1" cellspacing="10">
   <tr><td width="200" align="center">Lebar Kolom ini 200px</td>
   <td width="150" align="center">Lebar Kolom ini 150px</td></tr>
   </table>

   
   Hasilnya:
   
   

   Lebar Kolom ini 200px

   Lebar Kolom ini 150px

   
   * Dari kode di atas dapat diambil kesimpulan jika tag cellspacing berfungsi untuk memberi jarak antar cell dan angka 10 pada cellspacing menentukan jaraknya(dalam satuan px)
   * tag align berfungsi untuk mengatur posisi text pada cell pada area horizontal (left,center,right)




8. Penggunaan tag height dan valign
   
   

   <table border="1" valign="middle">
   <tr><td height="100">Tabel</tr>
   </table>

   
   Hasilnya:
   
   
   
   
   

   Tabel

   
   * Dari kode di atas dapat diambil kesimpulan jika tag valign berfungsi untuk mengatur posisi text pada area vertical (top,middle,bottom)
   * tag height berfungsi untuk menentukan tinggi cell (dalam satuan px)

Catatan:
&187; Memberi angka 0 pada border berfungsi untuk mengilangkan border.

     Saya rasa cukup sekian dulu tutorial kali ini. Selanjutnya anda bisa berkreasi sesuai keinginan anda. Semoga bermanfaat.... ^^,

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts: