Developing A Simple Website by yourself

Developing A Simple Website by yourself (Lesson 11)

မဂၤလာပါ။အခုသင္ခန္းစာမွာ rowspan နဲ႔ colspan ကိုသံုးပီး website တစ္ခုရဲ႕ နမူနာ layout တစ္ခုခ်ပံုကိုျပသြားမွာပါ။
ဒီေနရာမွာသိထားရမွာက webpage ေတြကိုတည္ေဆာက္တဲ့ေနရာမွာ Table နဲ႔ Frame ကိုသံုးပိီးတည္ေဆာက္မွာပါ။
Table ကေတာ့သင္ပီးပါပီ။Frame ကTable ပီးမွသင္ေပးပါမယ္။
အဲ့ေတာ့ Table ကိုသံုးပီး code ေတြေရးလိုက္ရင္ Webpage တစ္ခုရဲ႕ Layout ေကာင္းေကာင္းေပၚလာတာကိုေတြ႔ရမွာပါ။

ဒါက ကြၽန္ေတာ္တို႔ေရးခ်င္တဲ့ Website ရဲ႕ Layout ပံုစံပါ။အဲ့Layout တစ္ခုလံုးကို Table နဲ႔ေရးထားတာပါ။
ပံုကိုၾကည့္လိုက္ရင္ Row 8 ခုနဲ႔ Column 2 ခုကို Rowspan နဲ႔ Colspan သံုးပီးေရးထားတာေတြ႔ရမွာပါ။
ကဲ အထဲမွာပါတဲ့ code ေတြကိုေလ့လာၾကည့္ရေအာင္ဗ်ာ။

Table တစ္ခုကို width height border attribute ေတြနဲ႔စဖြင့္ထားတာကိုေတြ႔ရမွာပါ။width နဲ႔ height မွာ px နဲ႔ေရးထားတဲ့အတြက္ browser က်ဥ္းက်ဥ္းက်ယ္က်ယ္ မူလ size နဲ႔ ပဲ႐ွိေနမွာပါ။
% နဲ႔ေရးရင္ေတာ့ browser size အတိုင္း အက်ဥ္းအက်ယ္လုပ္သြားမွာပါ။
align မွာ center ေရးထားတဲ့ အတြက္ TD တစ္ခုျခင္းစီက စာေတြက သူ႔ cell ကြက္ရဲ႕ အလယ္ကိုေရာက္ေနမွာပါ။
Line 7 မွာ tr ဆိုပီး row တစ္ခုစဖြင့္ထားနာေတြ႔ရမွာပါ။ height ကို လဲ 150 px ေပးထားပါတယ္။td မွာ က်ေတာ့ colspan="2" ဆိုပီးေရးထားတဲ့အတြက္ column ႏွစ္ခုကိုေပါင္းလိုက္ပါတယ္။အဲ့တာေၾကာင့္ေနာက္ေရးမဲ့ row ေတြမွာ column ႏွစ္ခုက႐ွိကို႐ွိရမွာပါ။မ႐ွိေစခ်င္ရင္ colspan ကို ျပန္သံုးေပးရပါမယ္။ဒီအခ်က္ကအေရးႀကီးပါတယ္။ျမင္ေအာင္ၾကည့္ပါ။

Line 11 မွာ tr တစ္ခုထပ္ဖြင့္ထားပါတယ္။Height ကေတာ့ အေပၚကေကာင္ထက္နည္းပါတယ္။ Column ႏွစမခုမ႐ွိေစခ်င္လို႔ colspan ကိုသံုးထားတာေတြ႔ရမွာပါ။

Line 15 မွာ row တစ္ခုစထားတာေတြရမွာပါ။အဲ့row မွာ td ႏွစ္ခုပါပါတယ္။
ပထမ td ရဲ႕ width က 180px ပါ။ဒုတိယ td ရဲ႕ width က 620pxပါ။ႏွစ္ခုေပါင္းရင္ 800px ရပါတယ္။ကြၽန္ေတာ္တို႔ Table စစခ်င္းက widthကလဲ 800px ဆိုတာ Line 5 မွာေတြ႔ရမွာပါ။
ဒုတိယtd မွာ rowspan="4" ဆိုပီးေတာ့ သံုးထားတဲ့အတြက္ေၾကာင့္ ဒီrowကေနစပီးေတာ့ ေနာက္ထပ္ 3 row တိတိ ေနရာယူမွာျဖစ္ပါတယ္။အေပၚဆံုးမွာ႐ွိတဲ့ Output ပံုေလးကိုၾကည့္လိုက္ရင္ေတာ့နားလည္မွာပါ။

ဒီေနရာကေတာ့႐ွင္းသြားေလာက္ပီထင္ပါတယ္။ Row တစ္ခုစီဖြင့္လိုက္တယ္ Attribute ေပးလိုက္တယ္။Colspan နဲ႔ column ကိုတစ္ခုတည္းျဖစ္ေအာင္လုပ္ထားတာေတြ႔ရမွာပါ။

ဒါကcode အစအဆံုးပံုပါ။

ကဲ့ကြၽန္ေတာ္တို႔ရဲ႕codeေတြေရးလို႔ပီးပါပီ။Run ၾကည့္လိုက္ရင္ အေပၚဆံုးက Output Layout ပံုေလးထြက္ေနမွာပါ။
အဲ့ေတာ့ webpage တစ္ခုရဲ႕ Layout ကို Table သံုးပီး တည္ေဆာက္သြားတာကိုေတြ႔ရမွာပါ။အေပၚကကြၽန္ေတာ္တို႔တည္ေဆာက္ခဲ့တဲ့Layoutမွာ ပံုေတြထည့္တာတို႔ Color ေတြထည့္တာတို႔ Link ေတြထည့္တာတို႔လုပ္လိုက္ရင္ ပီးျပည့္စံုတဲ့ Webpage တစ္ခုရပါပီ။

ကဲဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္။

Written by @minthwayko
MSC - 187