ပို႕စ္ထဲမွာ ဇယားကြက္ ေဆာက္ၿပီး ထည့္တဲ့ အလြယ္နည္း ေလးကို ဒီေနရာမွာ ေဝမွ်ခ်င္ပါတယ္။ Share လုပ္တာေပါ့ဗ်ာ၊ ဆရာ လုပ္တာ မဟုတ္ရပါဘူးလို႕။ ၿပီးေတာ့လည္း ယခုပို႕စ္က မသိေသးသူေတြအတြက္ ရည္ရြယ္ျခင္း ျဖစ္ပါတယ္လို႕ ….။ ဤကား အစ ပထမ လွ်ာရွည္ျခင္း ျဖစ္ပါ၏ … :D

က်ေနာ္တို႕ ရုိးရုိး ဇယားကြက္တစ္ခုကို တည္ေဆာက္တဲ့အခါ ဇယားထဲမွာ Row က ဘယ္ႏွစ္ Row ထည့္မယ္။ ေကာ္လံက ဘယ္ႏွစ္ေကာ္လံ ထည့္မယ္ ဆိုၿပီး ထည့္သြင္း တည္ေဆာက္ၾကပါတယ္။ ဒီလိုပါပဲ။ Webpage ေပၚမွာ ဇယားကြက္ တည္ေဆာက္တဲ့ အခါမွာလည္း Row ေတြ၊ ေကာ္လံေတြကို ထည့္သြင္း စဥ္းစားၿပီးေတာ့ တည္ေဆာက္ၾကတာပါပဲ။

Row ေပၚေစဖုိ႕ ကုတ္တစ္ခုကို မွတ္ရပါမယ္။ ဒါကေတာ့ (<tr></tr>) ဆိုတဲ့ ကုတ္ပါပဲ။ ေကာ္လံ ေပၚေစဖို႕ မွတ္ရမယ့္ ကုတ္ကေတာ့ (<td></td>) ပဲ ျဖစ္ပါတယ္။ ေနာက္ထပ္ မွတ္ရမယ့္ ကုတ္ေတြကေတာ့ (<table></table>) နဲ႕ (<tbody></tbody>) တို႕ပဲ ျဖစ္ပါတယ္။ ဒါေလးေတြ မွတ္ၿပီးသြားရင္ ဇယားကြက္တစ္ခုကို ေကာင္းေကာင္းႀကီး တည္ေဆာက္လို႕ ရပါၿပီ။

ဇယားကြက္ ပံုစံ

ပထမဆံုး ဇယားကြက္ တစ္ခုကို တည္ေဆာက္တဲ့ အခါ (<table><tbody>) နဲ႕ စပါတယ္။ ဇယားကြက္ အဆံုးမွာ ထည့္ေပးရမွာကေတာ့ (</tbody></table>) ေတြပဲ ျဖစ္ပါတယ္။ ဒီ အစနဲ႕ အဆံုးၾကားထဲမွာေတာ့ Row ေတြ ေကာ္လံေတြ၊ စာသားေတြ၊ လင့္ခ္ေတြ၊ ပံုေတြ ထည့္သြင္းရပါတယ္။

Row တစ္ Row ထည့္မယ္ဆိုရင္ (<tr></tr>) ကို အစ နဲ႕ အဆံုးၾကားမွာ တစ္ခါ ေရးေပးရပါတယ္။ ေကာ္လံ တစ္ေကာ္လံ ထည့္မယ္ဆိုရင္ေတာ့ အစနဲ႕ အဆံုး ၾကားမွာ (<td></td>) ကို တစ္ခါ ထည့္ေပးရပါတယ္။ ဒါေပမယ့္ ေကာ္လံေတြကို Row အတြက္ ကုတ္ေတြ ျဖစ္တဲ့ ေထာင့္ကြင္း ႏွစ္ခုၾကားမွာ ထည့္ေပးရပါတယ္။ ဥပမာ အားျဖင့္ – (<tr><td></td></tr>) ဒီလိုပါ။ ဒါကေတာ့ Row တစ္ခု၊ ေကာ္လံ တစ္ခု အတြက္ပါ။

Row တစ္ခု ေကာ္လံ ႏွစ္ခု အတြက္ဆိုရင္ Row ကုတ္ၾကားထဲမွာပဲ ေနာက္ထပ္ ေကာ္လံ ကုတ္တစ္ခုကို ထပ္ထည့္ရပါတယ္။ ဥပမာ (<tr><td></td><td></td></tr>) ဒီလုိပါ။ ဒါကေတာ့ Row နဲ႕ ေကာ္လံ ထည့္ပံုပါ။ ေျပာရမယ္ဆိုရင္ ေကာ္လံ ဆိုတာ Row ထဲမွာ ထည့္ရတာပါ။ က်ေနာ္တို႕ ထည့္ခ်င္တဲ့ စာသားေတြကိုေတာ့ ေကာ္လံ ေထာင့္ကြင္း ႏွစ္ခုၾကားမွာ ထည့္ေပးရပါတယ္။ ဥပမာ (<td>အစမ္းစာ</td>) ဒီလိုပါ။

Row တစ္ခု၊ ေကာ္လံ ႏွစ္ခု ပါတဲ့ ဇယားကြက္ တစ္ခု ထည့္မယ္ဆိုရင္ ေရးရမယ့္ အျပည့္အစံု ကုတ္ေတြကို ေအာက္မွာ ပံုနဲ႕ ျပထားပါတယ္။

Row တစ္ခု၊ ေကာ္လံ ႏွစ္ခု ပါသည့္ ဇယားကြက္အတြက္ ကုတ္

Row ႏွစ္ Row ထည့္ခ်င္တယ္ဆိုရင္ အစနဲ႕ အဆံုး { <table></table> နဲ႕ <tbody></tbody> } ၾကားမွာ Row ကို ကိုယ္စားျပဳတဲ့ (<tr></tr>) ကို ႏွစ္ခါ ထည့္ရပါတယ္။ ၿပီးေတာ့မွ အဲ့ဒီ Row ေတြထဲမွာ ကိုယ္ထည့္မယ့္ ေကာ္လံ (<td></td>) ကို ႏွစ္ေကာ္လံ ထည့္မယ္ဆို ႏွစ္ခါ ထည့္ေပးပါ။ သံုးေကာ္လံ ထည့္မယ္ဆို သံုးခါ ထည့္ေပးပါ။

Row ႏွစ္ရုိး၊ ေကာ္လံ ႏွစ္ေကာ္လံ ပါသည့္ ဇယားကြက္ကုတ္

ဒီေနရာမွာ တစ္ခ်က္ သတိထားရမွာကေတာ့ အေပၚက Row ထဲမွာ ထည့္တဲ့ ေကာ္လံ အေရအတြက္နဲ႕ ေအာက္က Row ထဲမွာ ထည့္တဲ့ ေကာ္လံ အေရအတြက္ဟာ တူညီေနမယ္ဆိုရင္ေတာ့ ျပႆနာ မရွိႏိုင္ပါတယ္။ အကယ္၍ အေပၚက Row ထဲမွာ ႏွစ္ေကာ္လံ ထည့္ၿပီး ေအာက္က Row ထဲမွာ သံုးေကာ္လံ ထည့္ထားမယ္ ဆိုရင္ေတာ့ ဇယားကြက္က စနစ္ က်ေတာ့မွာ မဟုတ္ပါဘူး။

ဒီလိုမ်ိဳးပါ

“ယေန႕ပို႕စ္” မွာ က်ေနာ္ ထည့္သြင္းထားတဲ့ ဇယားကြက္ကုိ ၾကည့္ရင္ ေန႕ရက္ အလိုက္ ပို႕စ္ေတြကို ေကာ္လံ ေလးေကာ္လံ ခြဲၿပီး ထည့္ထားတာကို ေတြ႕ႏိုင္ပါတယ္။ ဒါေပမယ့္ ရက္စြဲ ထည့္ထားတဲ့ Row ကေတာ့ ေကာ္လံ တစ္ခုပဲ ပါရွိပါတယ္။ ဒါက ဘယ္လို လုပ္ရတုန္းဆိုရင္ သူ႕ေအာက္က Row ေတြက ေကာ္လံ ေလးေကာ္လံစီ ရွိတဲ့ အတြက္ colspan=“4” ဆိုတာေလးကို (<td>) အတြင္းထဲကို ေဟာဒီလို (<td colspan=“4”>) ဆိုၿပီး ထည့္ေပးလိုက္ပါတယ္။ ေအာက္က Row ေတြက ေကာ္လံ ၃ ေကာ္လံ ဆိုရင္ 4 ေနရာမွာ 3 ေပါ့ဗ်ာ။

Colspan ထည့္ၿပီး Row အတြင္းက ေကာ္လံေတြကို ညွိပံုပါ

ဒါဆိုရင္ အေပၚ Row နဲ႕ ေအာက္က Row ေတြကို colspan=“0” ဆိုတာေလး ထည့္ၿပီး ညွိဖို႕အတြက္ အဆင္ေျပသြားပါၿပီ။ ၿပီးေတာ့ က်ေနာ္တို႕ တည္ေဆာက္တဲ့ ဇယားကြက္က သူ႕ခ်ည္းထားရင္ border ေတြ မပါပါဘူး။ ဒါေၾကာင့္ ဇယားကြက္ကို ေဘာင္ခတ္ဖို႕၊ ေဘာ္ဒါ ထည့္ဖို႕အတြက္ အစဆံုး ကုတ္ထဲမွာ border=“1” ဆိုၿပီး ထည့္ေပးရပါတယ္။ 1 ေနရာမွာေတာ့ ထူထူထည့္ခ်င္ရင္ 2 ဒါမွ မဟုတ္ 3 စသည္ျဖင့္ ထည့္ႏိုင္ပါတယ္။

ဇယားကြက္အတြက္ ေဘာ္ဒါ ထည့္ပံုပါ

ဒီေလာက္ဆိုရင္ ဇယားကြက္တစ္ခုကို တည္ေဆာက္လို႕ ရသြားပါၿပီ။ ဒါေၾကာင့္ က်ေနာ္က Row သံုး Row ပါမယ္၊ ေကာ္လံက ႏွစ္ေကာ္လံစီ ပါမယ္၊ ဒါေပမယ့္ အေပၚဆံုး Row ထဲက ေကာ္လံမွာေတာ့ ေခါင္းစီးအတြက္ ေကာ္လံ တစ္ခုပဲ ထည့္မယ္၊ ဒီလို ဇယားကြက္ေလး တစ္ခုကို တည္ေဆာက္ျပပါမယ္။ ေအာက္က ဇယားကြက္အတြက္ ကုတ္ေတြပါပဲ။

+++++++++++++++++

<table border=“1”>
<tbody>
<tr>
<td colspan=“2”> မန္းဂဇက္ရြာသားအခ်ိဳ႕ </td>
</tr>
<tr>
<td> ဘီအီးသမား စိန္ဗိုက္ဗိုက္ </td>
<td> နဖူးေျပာင္ေျပာင္ အုေပ </td>
</tr>
<tr>
<td> ဖရဲသီး </td>
<td> ဘဲဥ </td>
</tr>
</tbody>
</table>

+++++++++++

ဒါကေတာ့ ေပၚမယ့္ ဇယားကြက္ပံုစံပါပဲ။
+++++++++++

မန္းဂဇက္ရြာသားအခ်ိဳ႕
ဘီအီးသမား စိန္ဗိုက္ဗိုက္ နဖူးေျပာင္ေျပာင္ အုေပ
ဖရဲသီး ဘဲဥ

+++++++++++
:D :D :D :D :D

အေပၚကေတာ့ ဇယားကြက္ကို တည္ေဆာက္ရမယ့္ ကုတ္ေတြရဲ႕ အသံုးျပဳပံုပါပဲ။ ပို႕စ္အတြင္း ထည့္ဖို႕အတြက္ ပို႕စ္အသစ္တင္မယ့္ ေနရာကို သြားပါ။ ၿပီးရင္ ညာဖက္နားမွာ Visual နဲ႕ HTML ဆိုၿပီး ရွိပါတယ္။ ေအာက္မွာ ပံုနဲ႕ ျပထားပါတယ္။ Visual ဆိုတာကေတာ့ တင္ေနက် ပံုစံအတုိင္း ပို႕စ္တင္စတိုင္ေပါ့ဗ်ာ။ HTML ဆိုတာကေတာ့ ကုတ္ေတြနဲ႕ တင္တဲ့စတုိင္လို႕ပဲ အလြယ္မွတ္ႏိုင္ပါတယ္။ ခု က်ေနာ္တို႕က ဇယားကြက္ကို ကုတ္ေတြနဲ႕ ထည့္မွာဆိုေတာ့ တင္ေနက် Visual စတိုင္နဲ႕ တင္လို႕ ရမွာမဟုတ္ပါဘူး။ HTML စတိုင္နဲ႕ တင္ၾကရပါမယ္။ ဒါေၾကာင့္ HTML ဆိုတာေလးကို ႏွိပ္ပါ။

Visual နဲ႕ HTML

Visual မွာ ေတြ႕ရတဲ့ စတိုင္

HTML မွာ ေတြ႕ရတဲ့ စတုိင္

အဲ … တစ္ခု ေျပာဖို႕ ေမ့ေနပါတယ္။ ဒါကေတာ့ … က်ေနာ္တို႕ ပို႕စ္ထဲမွာ ထည့္မယ့္ ဇယားကြက္အတြက္ ကုတ္ေတြ ေရးတာကိုေတာ့ Notepad ထဲမွာ အရင္ ေရးပါ။ ၿပီးမွ ထည့္တာက ပိုေကာင္းပါတယ္။ ပထမဆံုး ဇယားကြက္ပါတဲ့ ပို႕စ္တင္ေတာ့မယ္ ဆိုရင္ ေရးစရာ ရွိတဲ့ စာေတြကို ရုိးရုိး စတုိင္ျဖစ္တဲ့ Visual ထဲမွာပဲ ေရးပါ။ အားလံုး ၿပီးသြားၿပီ ဆိုေတာ့မွ HTML ကို ႏွိပ္ပါ။ အဲ့ဒီအခါမွာ ကိုယ္ေရးထားတဲ့ စာေတြနဲ႕ ေရာၿပီး အျခား ေထာင့္ကြင္းေတြပါ ပါေနပါလိမ့္မယ္။ ပါပါ မပါပါ ကိစၥ မရွိပါဘူး။ ဖ်က္ေတာ့ မပစ္နဲ႕ေနာ္

Table ကို Notepad နဲ႕ အရင္ ေရးထားပါ

အဲ့ဒီလို ေရးစရာ ရွိတာ ေရးၿပီးလို႕ HTML ကို ေျပာင္းၿပီးသြားရင္ ကိုယ္ဇယားကြက္ ထည့္မယ့္ ေနရာကို သြားပါ။ ၿပီးရင္ Notepad ထဲမွာ ေရးထားတဲ့ ဇယားကြက္ ကုတ္ေတြကို copy, paste လုပ္လိုက္ပါ။ ၿပီးရင္ Visual ကို ျပန္ႏွိပ္လိုက္ပါ။ ဒီအခါ ေစာေစာက ကိုယ္ေရးလိုက္တဲ့ ကုတ္ေတြက ဇယားကြက္ အသြင္နဲ႕ ေပၚေနတာကို ေတြ႕ရပါလိမ့္မယ္။ ဒီအခါမွာ ဇယားကြက္ထဲက စာေတြကို အလယ္ပို႕တာ၊ ေဘးပို႕တာေတြကို ကိုယ္ပို႕ခ်င္တဲ့ စာကို Select မွတ္ၿပီး လုပ္ႏိုင္ပါတယ္။ စကားမစပ္ ထပ္ေျပာရရင္ Comment ထဲမွာ ကိုယ္ထင္ရွားခ်င္တဲ့ စကားလံုးကို အနက္ေရာင္ ျခယ္ခ်င္ရင္ “<b>အနက္ေရာင္ျခယ္မယ့္စာလံုး</b>” ဒီလုိ ေရးပါလို႕။

ဟိုေရးဒီေရး ေလ်ာက္ေရးလိုက္တာ ပို႕စ္လည္း နည္းနည္း ရွည္သြားၿပီ။ ဒီေတာ့ ဒီေလာက္ပါပဲလို႕။ အကယ္၍ စိတ္ဝင္စားလို႕၊ ကိုယ္တိုင္ အစမ္း လုပ္ၾကည့္ၿပီးလို႕ မရွင္းတာမ်ား၊ လြဲေနတာေတြမ်ား ျဖစ္ခဲ့၊ ရွိခဲ့ရင္ ေအာက္က Comment ထဲမွာ ေျပာႏိုင္၊ ေမးႏိုင္ပါသည္ ဆိုတဲ့ အေၾကာင္း ေျပာရင္း ……

 

အားလံုးကို ခ်စ္တဲ့ ……

အံစာတံုး

 

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

has written 306 post in this Website..

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