ကၽြန္ေတာ္တို ့ Html table ကို သံုးၿပီး web template တစ္ခုကိုတည္ေဆာက္ၾကည့္ၾကရေအာင္ပါ။
ကၽြန္ေတာ္တို႔ တည္ေဆာက္မယ့္ site မွာ header ပါမယ္။ left navigation ပါမယ္။ footer ပါမယ္။
ဒီလိုပံုစံမ်ိဳးပါ။


ကၽြန္ေတာ္တို႔ browser screen ႀကီးတစ္ခုလံုးကို table တစ္ခုလိုသေဘာထား ၾကည့္လိုက္ပါ။
ကၽြန္ေတာ္တို႔ table မွာ row က သံုးခု column ကႏွစ္ခုပါပါမယ္။
ပထမ row မွာ column ကတစ္ခုဘဲပါတဲ့အတြက္ ကၽြန္ေတာတို႔ colspan=”2″ လို႔ထည့္ေပးရမွာျဖစ္ၿပီး တတိယ row မွာလည္း colspan=”2″ ပါပါမယ္။ အဲဒီေတာ႔ code က ဒီလိုရပါတယ္။

<html >
<head>
<title>Web template with Html table</title>
</head>

<body>
<table width=”800″ border=”1″ align=”center”>
<tr height=”120″ >
<td colspan=”2″>header </td>
</tr>
<tr height=”350″>
<td width=”200″>left navation</td>
<td width=”600″>content</td>
</tr>
<tr height=”50″>
<td colspan=”2″>footer</td>
</tr>
</table>
</body>
</html>

ကၽြန္ေတာ္တို႔ဒီ html code ကို Notepad မွာ႐ုိက္ၿပီး folder အလြတ္တစ္ခုထဲမွာ home.html ဆိုၿပီး save လုပ္လိုက္ပါ။ ၿပီးရင္ ခုဏ save လုပ္ထားတဲ့ file ကို double click ေခါက္ၿပီး run ၾကည့္ပါ။ ကၽြန္ေတာ္တို႔ရဲ႕ site design ကို အၾကမ္းျပင္း ေတြ႕ရပါလိမ့္မယ္။ အဲဒီမွာ table ရဲ႕ width ကို 800 လို႔ ေပးထားထားတဲ႔အတြက္ ကၽြန္ေတာ္တို႔ site ဟာ browser မွာ 800 pixel အက်ယ္ယူထားပါလိမ့္မယ္။ကိုယ္လိုသေလာက္ ထားႏုိင္ပါတယ္။ border ကို 1 ေပးထားတာကေတာ႔ ကၽြန္ေတာ္တို႔ site ရဲ႕ပံုစံကိုျမင္သာေအာင္ပါ။ ေနာင္မလိုေတာ႔ပါဘူး။

အခုကၽြန္ေတာ္တို႔ရဲ႕ header ေနရာမွာကၽြန္ေတာ္တို႔ရဲ႕ company header ပံုကိုထည့္ပါမယ္။ ကိုယ္ရဲ႕ company header ပံုဟာ ကၽြန္ေတာ္တို႔ရဲ႕ home.html နဲ႔ folder တစ္ခုထဲမွာရွိရပါမယ္။ ပံုကို table cell ရဲ႕ size အတိုင္း width 800 pxiel နဲ႔ height 120 pixel ဖန္တီးထားရင္ေတာ႔ ပိုေကာင္းပါ။ size အနည္းငယ္ကြာေနရင္လည္း image tag မွာ size ထည့္ေပးလို႔ရပါတယ္။
<img src=”gwc.png” width=”800″ height=”120″> ဆိုတဲ့ image ထည့္တဲ႔ tag နဲ႔ image ကဲ႔ source ကိုေပးပါမယ္။ အခုကၽြန္ေတာ္တို႔ရဲ႕ code က ေအာက္ပါအတိုင္းရပါမယ္။

<html >
<head>
<title>Web template with Html table</title>
</head>
<body>
<table width=”800″ border=”1″ align=”center”>
<tr height=”120″ >
<td colspan=”2″><img src=”gwc.png” width=”800″ height=”120″> </td>
</tr>
<tr height=”350″>
<td width=”200″>left navigation</td>
<td width=”600″>content</td>
</tr>
<tr height=”50″>
<td colspan=”2″>footer</td>
</tr>
</table>
</body>
</html>
browser screen မွာ ဒီလိုပံုစံျမင္ရပါလိမ့္မယ္။

ၿပီးရင္ left navigation မွာ ကၽြန္ေတာ္တို႔ site က အျခား page ေတြနဲ႔ link ခ်ိတ္ဖို႔အတြက္ menu ေလးတစ္ခုအျဖစ္ဖန္တီးပါမယ္။
ဒီလိုဖန္တီးဖို႔အတြက္ <ul> tag နဲ႔ <a> tag ကိုသံုးပါမယ္။
left nagivation ဆိုတဲ႔ table colum ကဒီလိုျဖစ္သြားပါမယ္။

<td valign=”top” width=”200″>
<ul>
<li><a href=”#”>haperlink one</a></li>
<li><a href=”#”>haperlink two</a></li>
<li><a href=”#”>haperlink three</a></li>
<li><a href=”#”>haperlink four</a></li>
<li><a href=”#”>haperlink five</a></li>
</ul>
</td>
ဒီေနရာမွာ valign ကို top ထားေပးရပါမယ္။ ဒါမွဒီ column ထဲက အေၾကာင္းအရာေတြဟာ အေပၚကေနစၿပီးေပၚပါမယ္။
# ရဲ႕ေနရာမွာေတာ႔ ကၽြန္ေတာ္တို႔ link ခ်ိတ္ခ်င္တဲ့ page ရဲ႕ file name ကို ေရးရပါမယ္။ ဥပမာ။ ။ about.html ဆိုတာမ်ိဳးေပါ႔။ hyperlink one ေနရာမွာေတာ႔ About Our Company ဆိုတာမ်ိဳးေပါ႔။ ဒါဆိုကၽြန္ေတာ္တို႔ coding က ဒီလိုရပါမယ္။

<html >
<head>
<title>Web template with Html table</title>
</head>
<body bgcolor=”#CCCCCC”>
<table bgcolor=”#FFFFFF” width=”800″ border=”0″ align=”center”>
<tr height=”120″ >
<td colspan=”2″><img src=”gwc.png” width=”800″ height=”120″> </td>
</tr>
<tr height=”350″>
<td valign=”top” width=”200″>
<ul>
<li><a href=”#”>haperlink one</a></li>
<li><a href=”#”>haperlink two</a></li>
<li><a href=”#”>haperlink three</a></li>
<li><a href=”#”>haperlink four</a></li>
<li><a href=”#”>haperlink five</a></li>
</ul>
</td>
<td valign=”top” width=”600″>content</td>
</tr>
<tr height=”50″>
<td bgcolor=”#FF9900″ valign=”middle” colspan=”2″><center><a href=”http://webtut.6te.net”>Created by : Wai Lynn Oo</a></center>    </td>
</tr>
</table>
</body>
</html>
တျခားထပ္ျဖည့္ထားတာေလးေတြကေတာ႔ ကၽြန္ေတာ္ရွင္းမျပလည္း html ရရင္နားလည္မယ္ထင္ပါတယ္။ မလည္တာရွိရင္လည္း ေမးထားခဲ့ေပါ႔။ကၽြန္ေတာ္တို႔ site ေလးရဲ႕ပံုစံကေတာ႔ဒီလိုရပါတယ္။

About wailynnoo

wailynn oo has written 57 post in this Website..

I am a blogger.