Jumat, 23 Juli 2010

Cara Membuat Tabel Pada Postingan


Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML anda 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 :
  1. bordercolor --> warna dari garis tabel
  2. bgcolor --> warna dari background tabel
  3. cellpadding --> jarak antara tulisan dengan garis luar tabel
  4. cellspacing --> jarak antar tulisan
  5. border --> ketebalan garis pinggir tabel
  6. dotted --> garis titik putus-putus
  7. dashed --> garis datar putus-putus
  8. double --> garis rangkap dua
  9. align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
  10. width --> lebar tabel
  11. height --> tinggi tabel
Semoga tidak 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, anda 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, anda 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, anda 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>
<tr bgcolor="yellow">
<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 anda 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>
<tr bgcolor="yellow">
<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



maaf ya...klo hasilnya kurang bagus...maklum...postingnya sambil ngantuk berat...
mudah-mudahan anda bisa membuat yang lebih baik lagi...
selamat berkreasi..

0 komentar:

Ingin Artikel Seperti INi Langsung ke Email Anda? Masukan Alamat Email Anda Untuk Berlangganan. Gratis!

Alamat email

  © Blogger template 'A Click Apart' by Ourblogtemplates.com 2008

Back to TOP