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