Sabtu, 07 Maret 2009

Membuat Tabel


Kali ini kita akan belajar
membuat tabel di blog, sebenarnya membuat tabel sangat mudah, asalkan kita mengetahui kode-kode HTML. 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


Nah,....begitu...tu..
Sebelumnya saya juga bingung, baca saja sudah bingung, apalagi buatnya. Tapi kalau ada niat dan kemauan pasti jadi deh..( Wah...malah ceramah..)

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



0 komentar:

Posting Komentar