အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၃
မဟာရာဇာ အံစာတံုး“အိတ်ချ် … ထီ … အန်မ် … အယ်လ်” ဆိုတဲ့ ပထမဆုံးပို့စ်မှာ HTML အခြေခံလေးကို ပြောခဲ့ပါတယ်။ ဒုတိယဖြစ်တဲ့ “အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၂” ဆိုတဲ့ ပို့စ်မှာတော့ စာလုံးပုံစံတွေနဲ့ ပုံထည့်သွင်းတာကို ပြောခဲ့ပါတယ်။ အခုပို့စ်မှာတော့ Web Page ပေါ်မှာ ဇယားကွက် (table) တည်ဆောက်တာကို ပြောပေးသွားပါမယ်။
WebPage ပေါ်တွင် ဇယားကွက်(table) တည်ဆောက်ပုံ
ကျနော်တို့ Webpage ပေါ်မှာ ဇယားကွက် တစ်ဆောက်ဖို့အတွက်ဆိုရင် <table> </table> ဆိုတဲ့ Tag ကို အသုံးပြုပါတယ်။ ဒါပေမယ့်လို့ ဇယားကွက် ဆောက်တဲ့အခါ အဲဒီ tag ကြီးပဲ သီးသန့် မနေပါဘူး။ ဇယားကွက် ဖြစ်တဲ့အတွက် row တို့ colum တို့အတွက်ပါ အဲဒီ table tag အတွင်းထဲမှာ ထည့်သွင်း ရေးသားရပါတယ်။ row အတွက် အဖွင့်နဲ့ အပိတ် tag က <tr> </tr> ဖြစ်ပြီး၊ colum အတွက် အဖွင့်နဲ့ အပိတ် tag တွေကတော့ <td> </td> တို့ပဲ ဖြစ်ပါတယ်။
ကျနော်တို့ စမ်းရေးကြည့်ကြရအောင်။ ပထမဆုံး စရေးဖို့အတွက် notepad ကို ဖွင့်ပြီး html နဲ့ body အဖွင့်နဲ့ အပိတ် tag တွေကို ရေးလိုက်ပါ။ ဒီနေရာမှာ တစ်ခုလောက် ကြားဖြတ်လေး ပြောချင်တာ ရှိပါတယ်။ ဒါကတော့ ကျနော်တို့ ပထမတုန်းက save ထားတဲ့ html document တွေကို browser မှာ run ကြည့်တဲ့အခါ browser ရဲ့ tab bar မှာ အဲဒီ html document ရဲ့ တည်နေရာ (location) ပေါ်နေပါလိမ့်မယ်။ အဲဒီ browser tab bar မှာ တည်နေရာ စာတွေအစား ကိုယ်ပေးချင်တဲ့ စာသား ပေးချင်တယ် ဆိုရင်တော့ html အဖွင့် tag ရဲ့ အောက်မှာ <title> </title> ဆိုတဲ့ tag ကို ထည့်သွင်း ရေးသားရမှာဖြစ်ပြီး ကိုယ်ထည့်ချင်တဲ့ စာသားကို အဲဒီ tite tag နှစ်ခုကြားမှာ ထည့်သွင်း ပေးရမှာပဲ ဖြစ်ပါတယ်။ ဥပမာအားဖြင့် – <title> testing html </title> ။
ကဲဗျာ .. အပေါ်က အကြောင်းကို ပြန်ဆက်လိုက်ကြရအောင်။ Notepad ကို ဖွင့်ပြီး html, body tag တွေ ရေးပြီးသွားရင် body အဖွင့် tag ရဲ့ အောက်မှာ table အဖွင့်နဲ့ အပိတ် tag ကို ရေးပါ။ ဒီနေရာမှာ ကျနော်တို့က ဇယားကွက် ရေးတာ ဖြစ်တဲ့အတွက် table အဖွင့် tag ရဲ့ အတွင်းထဲမှာ border=”1” ဆိုပြီး border ကို ထည့်သွင်း ရေးပေးရပါမယ်။ အဲဒီထဲက 1 ဆိုတဲ့ နေရာမှာတော့ ကိုယ်ကြိုက်တဲ့ အရွယ်အစားကို ပြောင်းလဲနိုင်ပါတယ်။ ပြီးရင် table အဖွင့် tag ရဲ့ အောက်မှာ row တစ်ခု ဆောက်မှာဖြစ်လို့ အဲဒီ row အတွက် tr အဖွင့်နဲ့ အပိတ် tag ကို ရေးရပါမယ်။ ပြီးသွားရင် အဲဒီ row ထဲမှာ colum ထည့်သွင်းမှာ ဖြစ်တဲ့အတွက် colum အတွက်ဖြစ်တဲ့ td အဖွင့်နဲ့ အပိတ် tag ကို tr အဖွင့် tag ရဲ့ အောက်မှာ ရေးသားလိုက်ပါ။ အပြည့်အစုံကတော့ ဒီလိုလေးပါ။
<html>
<title> testing html </title>
<body>
<table border=”1”>
<tr>
<td>
Testing Html
</td>
</tr>
</table>
</body>
</html>
ဒီလို ရေးပြီးရင် ထုံးစံအတိုင်း နာမည် တစ်ခုခုပေး၊ .html ခံပြီး Save လိုက်ပါ။ ပြီးရင် run ကြည့်လိုက်ပေါ့။ Webpage ပေါ်မှာ ပေါ်မယ့် ပုံစံကတော့ ဒီလိုပါ။
| Testing Html |
အခုဟာက colum တစ်ခုထဲမှာ row တစ်ခုပဲ ထည့်ထားတာပါ။ နောက်ထပ် row တစ်ခု ထပ်ထည့်ချင်ရင်တော့ ပထမ ထည့်သွင်းထားတဲ့ td အဖွင့်နဲ့ အပိတ် tag ရဲ့ အောက်မှာ နောက်ထပ် td အဖွင့်နဲ့ အပိတ် tag ကို ထပ်ထည့် ရေးသားပေးရပါမယ်။ ဥပမာအားဖြင့် –
<table border=”1”>
<tr>
<td> Testing Html-1 </td>
<td> Testing Html-2 </td>
</tr>
</table>
ဒါဆို colum နှစ်ခု ဖြစ်သွားတာကို တွေ့ရပါလိမ့်မယ်။ ဒီနည်းအားဖြင့် colum တွေ ထပ်ထည့်သွားလို့ ရနိုင်ပါတယ်။ Row တစ်ခု ထပ်တိုးဖို့အတွက်ဆိုရင် ပထမ ရေးထားတဲ့ tr အပိတ် tag ရဲ့အောက်မှာ tr အဖွင့်နဲ့ အပိတ် tag ထပ်ရေးသားရမှာဖြစ်ပြီး အဲဒီ tr tag ထဲမှာ colum tag ဖြစ်တဲ့ td tag ကို ထည့်သွင်း ရေးသားရမှာပဲ ဖြစ်ပါတယ်။ နမူနာအားဖြင့် ဒီလိုပါ။
<table border=”1”>
<tr>
<td> Testing Html-1 </td>
<td> Testing Html-2 </td>
</tr>
<tr>
<td> Testing Html-3 </td>
<td> Testing Html-4 </td>
</tr>
</table>
ဒီနေရာမှာ တစ်ခု ပြဿနာရှိတာကတော့ အပေါ် row ထဲက colum အရေအတွက်နဲ့ အောက် row ထဲက colum အရေအတွက် မတူရင် ကျနော်တို့ ပြုလုပ်ထားတဲ့ ဇယားကွက်က ကွက်တိကွက်ကြား ဖြစ်နေနိုင်ပါတယ်။ ဒါကို ညှိဖို့အတွက် colspan=”” ဆိုတာလေးကို သုံးရပါမယ်။
ဥပမာအားဖြင့် ကျနော်တို့က အပေါ်က row ထဲမှာ colum က (၁) ခုပဲထည့်ပြီး အောက်က row ထဲမှာတော့ colum က (၃) ခု ထည့်သွင်းမယ် ဆိုပါစို့။ ဒါကို ဒီအတိုင်း ရေးလိုက်မယ်ဆိုရင် အပေါ် row ထဲမှာထည့်ထားတဲ့ colum က ရှေ့ဆုံးမှာ အကွက်တစ်ကွက် အနေနဲ့သာ ပေါ်နေမှာ ဖြစ်ပါတယ်။ အောက်က colum က (၃) ခု ဖြစ်နေပြီး၊ အပေါ်က colum ကတော့ (၁) ခုပဲ ရှိတဲ့အတွက် အပေါ်က row ထဲမှာ အကွက် (၂) ကွက်က လွတ်နေပါလိမ့်မယ်။ ဒါကို မလွတ်အောင် row အပြည့် နေရာယူချင်တယ် ဆိုရင် အဲဒီ (၁) ခုပဲရှိတဲ့ colum အဖွင့် td tag ထဲမှာ colspan=”3” ဆိုပြီး ထည့်သွင်း ရေးသားပေးရပါတယ်။ 3 ဆိုတာက သူ့အောက်က row ထဲမှာ colum က (၃) ခု ရှိနေလို့ပဲ ဖြစ်ပါတယ်။ ဒီနေရာမှာ row က (၅) ခု ရှိနေမယ်ဆိုပါစို့။ ဒါဆို colspan=”5” ဆိုပြီး ကဏန်းပြောင်းပေးရပါတယ်။ ဥပမာကတော့ ဒီလိုပါ။
<table border=”1”>
<tr>
<td colspan=”3”> Testing Html </td>
</tr>
<tr>
<td> Testing Html-1 </td>
<td> Testing Html-2 </td>
<td> Testing Html-3 </td>
</tr>
</table>
Webpage ပေါ်မှာ ပုံစံကတော့ ဒီလိုပါ …။
| Testing Html | ||
| Testing Html-1 | Testing Html-2 | Testing Html-3 |
ဒါလောက်ဆိုရင်တော့ table တစ်ခုကို အကြမ်းအားဖြင့် တည်ဆောက်လို့ ရသွားပါပြီ။ နောက်တော့မှ ကျနော်တို့ Table ကို တန်ဆာပလာတွေ ထည့်ပြီး အချောသတ်ကြတာပေါ့။
ရေးသားသူ – အံစာတုံး
7 comments
water-melon
May 6, 2012 at 4:46 pm
တောင်မရေ
အခုမှမေးချင်လို့အေ့
save ပြီးလို့ ပြန်ကြည့်ချင်ရင်
Mozilla Firefox နဲ့ကြည့်ရမှာလား
internet explorer နဲ့ကြည့်ရမှာလားအေ့
နောက်မှ E-book လုပ်ပေးနော် တောင်မ
ရန်ကုန်ရောက်မှ ပြုစုပါမယ် ထန်းလျက်စက်ရုံပိုင်ရှင်လေး
အဟိ အဟိ
မဟာရာဇာ အံစာတုံး
May 6, 2012 at 4:51 pm
ကြိုက်တဲ့ Browser နဲ့ ကြည့်လို့ရတယ် ဗြဲသီးရဲ့ …
အဲ .. ကို ကတော့ Firefox ကို အသုံးများတယ် ..
တစ်လေတစ်လေ IE က သိပ်မလန်းချင်ဘူး ..
ဗြဲသီးရဲ့ ကွန်ပျူတာမှာ Firefox ကို default browser အဖြစ်ထားရင် အဲဒီ html document လေးက Frefox ပုံစံလေးနဲ့ ဖြစ်နေလိမ့်မယ် ..
ဒါဆို docuble click နှိပ်လိုက်ရုံပဲ ..
သူ့ဟာသူ firefox နဲ့ ပွင့်လာလိမ့်မယ် …
ဗိုက်ကလေး
May 6, 2012 at 6:34 pm
အခြေခံသိပ်မရှိလို ့ ပြန်ဆွေးနွေးဖို ့အင်အားမရှိသေးပါဘူး အူးလေးဒေါင့်ရာ
နောက်အပိုင်းတွေ မသိတာမေးပါ့မယ်..
ဒါဟာ..တန်ဘိုးကြီးလှတဲ့ တျူတိုရီရယ်လေး ဖြစ်ပါသောကြောင့် အူးလေးဒေါင့်ကြီး ထန်းလျက်စက်ရုံမှ ချိစ် စက်ရုံအဖြစ်
မြှင့်တင်ထုတ်လုပ်နိုင်ပါစေလို ့ ဆုတောင်းပေးပါတယ်ခင်ညား..
windtalker
May 6, 2012 at 7:09 pm
ဟယ်လို တက်စတင်း ၊ ဟယ်လို တယ်စတင်း
ကြားလား ကြားလား ၊ မကြားရသေးလို ့ ပြေးစမ်းကြည့်ပြီ မဟာအံကြီးရေ ။
ဗိုက်ကလေး
May 6, 2012 at 7:55 pm
အူးလေးက အတက်ကြီးဘီဆိုတော့ နားလေးနေလို ့မကြားရတာနေမှာပေါ့ဂျ
windtalker
May 6, 2012 at 8:00 pm
ဟယ် ၊ အူးလေး အတက်ကြီးတာ သူလေး ဘယ်တုန်းက သိသွားပါလိမ့် ၊ ဟင့် ရွာထဲတောင် နေရမှာ လန် ့လာဘီ ….
ကောင်းမြတ်သူ
May 7, 2012 at 3:39 pm
အားပေးလျက်ပါ။ table အချောသတ်ကို မျှော်နေတယ်ခင်ဗျ….