Developing A Simple Website by yourself

minthwayko (47)in #myanmar • 6 years ago

Developing A Simple Website by yourself (Lesson 10)

မဂၤလာပါ။အရင္တစ္ပါတ္ကမၿပီးေသးတဲ့ cell merge အေၾကာင္းဆက္ပါမယ္။

Row Merge

Column ေတြကိုဘယ္လိုေပါင္းရမယ္ဆိုတာ အရင္အပါတ္ကတင္ခဲ့ပါတယ္။
အခု Row ေတြကို merge လုပ္တဲ့ေနရာကလဲ Column ကို mrege လုပ္နည္းနဲ႔တူတူပါပဲ။
ကြၽန္ေတာ္တို႔ Column ေတြကို Merge လုပ္တဲ့အခါ "colspan" ကိုသံုးခဲ့ပါတယ္။Row ေတြကို Merge လုပ္တဲ့အခါ
ေတာ့ "rowspan" ကိုသံုးပါတယ္။
နမူနာ ျပထားတာ ကိုၾကည့္ပါမယ္။

ဒါက႐ိုး႐ိုး 2 row 2 column 4 cell table တစ္ခုပါ။
အဲ့ဒီမွာ႐ွိတဲ့ cell 1 ႏွစ္ခုကို တစ္ခုတည္းျဖစ္ဖို႔အတြက္ row merge ကိုသံုးရပါမယ္။

အေပၚကနမူနာ code မွာ tr ႏွစ္ခု႐ွိပါတယ္။ပထမ tr မွာ td ႏွစ္ခု႐ွိပါတယ္။
ပထမ tr ရဲ႕ td မွာ rowspan="2" ဆိုပီးေရးထားတာေတြ႔ရမွာပါ။အဲ့code ကိုသံုးလိုက္တဲ့အတြက္ ေနာက္ထပ္ေရးမဲ့ tr ရဲ႕ ပထမ td အကြက္ကိုပါေနရာယူလိုက္မွာျဖစ္ပါတယ္။ဒုတိယ tr မွာ td တစ္ခုပဲေရးထားတာေတြ႔ရမွာပါ။

ဒါက output ပါ။
Rowspan လုပ္တယ္ဆိုတာ သူ႔ေအာက္တည့္တည့္က row ရဲ႕ column ကိုေပါင္းလိုက္တာပါ။အေပၚကနမူနာမွာ row ႏွစ္ခု column ႏွစ္ခု cell ေလးခု႐ွိတယ္ ။rowspan ကိုသံုးပိီး row ႏွစ္ခုရဲ႕ ပထမ column ကိုေပါင္းလိုက္တယ္။ အဲ့ေတာ့ ဒုတိယ row မွာ cloumn ကတစ္ခုပဲ႐ွိေတာ့တယ္။
အဲ့တာကို ကြၽန္ေတာ္တို႔က ဒုတိယ row မွာ cloumn ႏွစ္ခုထည့္ပီးစမ္းၾကည့္ၾကပါမယ္။(ပိုနားလည္ေအာင္လုပ္တာပို႐ႈပ္သြားပီထင္တယ္ 😛)

Rowspan လုပ္မယ္ဆို႔ ဒုတိယ tr မွာ td ႏွစ္ခုပဲ႐ွိရမွာပါ။Output ကိုၾကည့္ရေအာင္။

ဒုတိယ row မွာ column ေနာက္တစ္ခုထပ္ေရးလိုက္တဲ့အတြက္ cell ကြက္ကတစ္ေနရာစာပိုသြားပါတယ္။ပံုမွန္ဆိုဒိီTable မွာက column cell က ႏွစ္ကြက္ကဲ႐ွိရမွာကို သံုးကြက္႐ွိသြားတာပါ။
အဲ့တာေၾကာင့္ ပထမ row မွာ cell တစ္ကြက္လြတ္က်န္ေနတာကိုေတြ႔ရမွာပါ။

ဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ေနာက္တစ္ခါက်ရင္ rowspan နဲ႔ colspan ေပါင္းသံုးၿပီးေတာ့ ေရးျပပါမယ္။ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္။

Written by @minthwayko
MSC - 187

#website #knowledge #technology #creation