Web template with html table
wailynnooကျွန်တော်တို ့ 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 လေးရဲ့ပုံစံကတော့ဒီလိုရပါတယ်။
