အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္” ဆိုတဲ့ ပထမဆံုးပို႕စ္မွာ 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 ကို တန္ဆာပလာေတြ ထည့္ၿပီး အေခ်ာသတ္ၾကတာေပါ့။

ေရးသားသူ – အံစာတံုး

About မဟာရာဇာ အံစာတံုး

has written 306 post in this Website..

အခ်ိဳ႕ေသာ အရာေတြဟာ "ေျပာင္" ၿပီးရင္ ျပန္ေကာင္းဖို႕ မလြယ္ဘူး။ အခ်ိဳ႕အရာေတြ က်ေတာ့ တစ္မ်ိဳး။ "ေျပာင္" ၿပီးရင္ ပိုပို ေကာင္းလာတတ္တဲ့ အမ်ိဳး။ ႏႈတ္ခမ္းေမြး ေျပာင္ေအာင္လို႕ ရိတ္တယ္။ ရိတ္ေလ .. သန္ေလပဲ။ ထိပ္ေျပာင္လို႕ ဆံပင္ သန္ေအာင္ လုပ္တယ္။ မလြယ္ျပန္ဘူး။ ဒီသေဘာ .. ဒီသေဘာ။