Bagaimana membuat Table diblog

.

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 <TABLE>...</TABLE>

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:
<TABLE>
<TR> <TD>Deenoh</TD> <TD>1493</TD> </TR>
<TR> <TD>Zahari</TD> <TD>3829</TD> </TR>
<TR> <TD>Ismail</TD> <TD>8372</TD> </TR>
<TR> <TD>Haiqal</TD> <TD>4827</TD> </TR>
</TABLE>

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 :
<TABLE width="300" border="1">
<TR> <TD>Deenoh</TD> <TD>1493</TD> </TR>
<TR> <TD>Zahari</TD> <TD>3829</TD> </TR>
<TR> <TD>Ismail</TD> <TD>8372</TD> </TR>
<TR> <TD>Haiqal</TD> <TD>4827</TD> </TR>
</TABLE>

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 :
<TABLE width="300" border="1" bgcolor="black">
<TR bgcolor="green"> <TD align="center">Deenoh</TD> <TD align="center">1493</TD>
</TR>
<TR bgcolor="yellow"> <TD align="center">Zahari</TD> <TD align="center">3829</TD> </TR>
<TR bgcolor="blue"> <TD align="center">Ismail</TD> <TD align="center">8372</TD>
</TR>
<TR bgcolor="white"> <TD align="center">Haiqal</TD> <TD align="center">4827</TD>
</TR>
</TABLE>

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 :
<TABLE width="300" border="1" bgcolor="black">
<TR bgcolor="white"> <TH>Name</TH> <TH>Extension</TH> </TR>
<TR bgcolor="green"> <TD align="center">Deenoh</TD> <TD align="center">1493</TD>
</TR>
<TR bgcolor="yellow"> <TD align="center">Zahari</TD> <TD align="center">3829</TD> </TR>
<TR bgcolor="blue"> <TD align="center">Ismail</TD> <TD align="center">8372</TD>
</TR>
<TR bgcolor="white"> <TD align="center">Haiqal</TD> <TD align="center">4827</TD>
</TR>
</TABLE>

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 :
<TABLE align="center" width="450" border="1" >
<CAPTION align="top"><b>JADUAL WAKTU</b></caption>
<TR> <TD>&nbsp;</TD>
<TH>10 am - noon</TH>
<TH>noon - 2 pm</TH>
<TH>2 pm - 4 pm</TH>
</TR>

<TR> <TH>Monday</TH>
<TD>Home Ec</TD>
<TD>Math</TD>
<TD>Geography</TD>

<TR> <TH>Wednesday</TH>
<TD>History</TD>
<TD>Social Studies</TD>
<TD>P.E.</TD>

<TR> <TH>Friday</TH>
<TD>Music</TD>
<TD>Peace Studies</TD>
<TD>Sleep</TD>

</TABLE>

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

Mungkin artikel dibawah yang sedang anda cari



2 comments:

Hasanudin Bin Zaini berkata...

Sangat membantu.Tkasih

Mohd Anuar Nordin berkata...

tq....info yang sangat membantu....

www.nuaz252.blogspot.com

:)) ;)) ;;) :D ;) :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Catat Ulasan

Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.

 

Pelawat

free counters
BlogInfoTips

Pengikut

Recent Comments

Powered by Deenoh

© Copyright 2007-2009. Blog tutorial . All rightsreserved | Bloginfotips.com is proudly powered by Blogger.com | Template redesign by Deenoh