Wednesday, March 3, 2010

Membuat tabel diblog

T utorial html kali ini penulis ingin menunjukkan cara membuat table diblog.Membuat table tidaklah rumit jika menggunakan perisian programmi... thumbnail 1 summary
Tutorial html kali ini penulis ingin menunjukkan cara membuat table diblog.Membuat table tidaklah rumit jika menggunakan perisian programming seperti Nvu,frontage atau Dreamweaver.Tetapi perisian seperti itu hanya digunakan semasa membuat website atau minisite.Untuk pengguna blog, nak atau pun tak nak,wajib pelajari kod html "table"nya jika nak menggunakan table di dalam blog.Oklah let's learn the tutorial table dibawah.

Secara asasnya,konsep table mestilah ada row="TR" dan colum="TD".Seperti jadual wakru zaman persekolahan dulu.Ada masa,hari dan subjek.Tag "TR"(table row) dan tag "TD"(table colom/data) mesti diapplikasikan dengan tag ...

Baiklah, mari kita buat table ringkas yang mengandungi 4 nama orang dan extension nombornya.Lihat contoh dibawah...
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827
Kodnya:
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Untuk tablenya kelihatan menarik, kita akan tambah attribute "border" dan juga lebar table(width).
border = dalam nilai px / %
width = dalam nilai px / %

contoh :
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Kodnya :
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Sekarang kita hiasi tablenya dengan warna dan juga align teksnya supaya berada ditengah kotak table.
attribute warna = "bgcolor=kod warna"
attribute align = "TD align=left/center/right"

contoh:
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Kodnya :
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Jika anda perhatikan table ini, nampak seperti tidak lengkap kerana tiada tajuknya.Tajuk ini kita namakan Table header.Attribute table header adalahTH.

contoh :
Name Extension
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Kodnya :
Name Extension
Deenoh 1493
Zahari 3829
Ismail 8372
Haiqal 4827

Sekarang, dengan lebih detail lagi kita boleh tambah tajuk utama table tersebut menggunakan fungsi "Caption".Disamping itu, tajuk header "TH" boleh diletakkan di ruangan table row"TR" atau table colum"TD" atau kedua-duanya.Lihat contoh dibawah..

JADUAL WAKTU

10 am - noon noon - 2 pm 2 pm - 4 pm
Monday Home Ec Math Geography
Wednesday History Social Studies P.E.
Friday Music Peace Studies +Sleep

Kodnya :
JADUAL WAKTU
  10 am - noon noon - 2 pm 2 pm - 4 pm
Monday Home Ec Math Geography
Wednesday History Social Studies P.E.
Friday Music Peace Studies Sleep

Oklah..rasanya cukup takat ni aje.Jejari penulis pun rasa sebal semacam.Sebenarnya banyak lagi yang penulis ingin isikan dalam tutorial buat table ini.Kita akan bersambung nanti..tunggu..