Cara Membuat Tabel

Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML sobat sudah bisa membuat sebuah tabel. Lagi-lagi kode HTML, yah begitulah namanya juga blog pasti selalu berhubungan dengan kode ribet yang satu ini. Untuk membuat tabel cukup dengan perintah <table> ..... </table> yang didalamnya terdapat atribut sebagai berikut :

• bordercolor --> warna dari garis tabel
  
  
• bgcolor --> warna dari 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

• align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
  
  
• width --> lebar tabel
  
  
• height --> tinggi tabel

Bingung ya, begini contoh pertama yang paling simple :

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

Isi Tabel

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

Hasilnya :

Isi Tabel

Tampak tulisan rapat kiri dengan dinding garis tabel, sobat bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"

Contohnya :

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

Isi Tabel

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

Hasilnya :

Isi Tabel

Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :

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

Isi Tabel

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

Hasilnya:

Isi Tabel

Untuk menambah kolom menjadi 2, sobat tinggal 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 :

Kolom 1 Baris 1

Kolom 2 Baris 1

Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :

<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 :

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

Untuk menambahkan warna pada border dan background tabel, sobat tinggal menyisipkan kode seperti berikut :

<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>

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

Untuk garis tabel yang putus - putus, bisa sobat tambahkan dotted atau dashed.
Bisa kan ? ga bisa ya, oke deh saya kasih contoh satu lagi :

<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>

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

Selamat Mencoba !! kreasikan sendiri tabelnya ya..

Oleh : Dody FariaL Pada hari Sabtu, Mei 02, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :