Developing A Simple Website by yourself (Lesson 8)
မဂၤလာပါ။ဒီေန႔ေတာ့ Table အေၾကာင္းေလးပဲဆက္တင္သြားပါမယ္။
Table ကိုသံုးပီးေတာ့စာရင္းေလးတစ္ခုလုပ္ၾကည့္ပါမယ္။
အေပၚက code ေတြကိုၾကည့္လိုက္ရင္ table ရဲ႕ width ကို 100 %ေပးထားပါတယ္။ % နဲ႔ေပးထားတံအတြက္ေၾကာင့္
Browser ခ်ံဳလိုက္ရင္ လိုက္က်ဥ္းသြားပီး။Browser ခ်ဲ့လိုက္ရင္လိုက္က်ယ္သြားပါလိမ့္မယ္။
Line 5 မွာ tr tag နဲ႔ row တစ္ခုဖန္တီးထားတာေတြ႔ရမွာပါ။အဲ့row မွာ Name ရယ္ Age ရယ္ Gender ရယ္ကို ထင္ထင္႐ွား႐ွားျမင္ရေအာင္ th tag ကိုသံုးထားပါတယ္။(ဒီေနရာမွာ td tag ကိုသံုးရင္ output ပံုလိုထြက္မွာမဟုတ္ပါပူး။မိမိကိုယ္တိုင္စမ္းသပ္ၾကည့္ပါ။)
ေနာက္ထပ္ Line 10 Line 15 Line 20 မွာ row တစ္ခုစီေရးထားတာကိုေတြ႔ရမွာပါ။
ဒါဆိုကြၽန္ေတာ္တို႔ေရးထားတာက row 4 ခုနဲ႔ column 3 ခုပါတဲ့ Table တစ္ခုျဖစ္သြားပါပီ။
(အေပၚကcodeေတြရဲ႕output ကိုၾကည့္လိုက္ရင္ လူသံုးေရာက္ရဲ့ နာမည္ရယ္ အသက္ရယ္ လိင္အမ်ိဳးစားရယ္ပါတဲ့စာရင္းတစ္ခုေပါ့။table ကို ကြၽန္ေတာ္တို႔က စာရင္းလုပ္တဲ့ေနရာမွာသံုးမွာမဟုတ္ပါပူး။စာရင္းလုပ္ခ်င္ရင္ Excel ကိုသံုးမွာေပါ့။အခုေရးေနတဲ့ နမူနာ code ေတြက Table Tag ကိုသံုးတတ္ေအာင္လို႔ပါ။)
Table's Attribute
ကြၽန္ေတာ္တို႔ အေပၚက ေရးခဲ့တဲ့ နမူနာ code မွာ border ေလးေတြထည့္ၾကည့္ရေအာင္။
Border ထည့္ဖို႔အတြက္ code က
<table border="x"> ပါ။
x ေနရာမွာ 1 ကေနစပိီးထည့္လို႔ရပါတယ္။ႀကီးေလထူေလေပါ့။
ကဲ အေပၚက code မွာ border="1" ဆိုပီးထည့္ၾကည့္ရေအာင္ဗ်ာ။
border="1" ဆိုတဲ့ attribute ထည့္လိုက္တဲ့အတြက္ table ထဲမွာေရးထားတဲ့ th နဲ႔ td တစ္ခုျခင္းစီကို ေဘာင္ခတ္ေပးလိုက္ပါတယ္။
Border မွာ color ေလးထည့္ၾကည့္ပါမယ္။သံုးရမဲ့ attribute က
bordercolor="color_name" ပါ။
အေရာင္ထည့္တဲ့ေနရာမွာ နာမည္နဲ႔ျဖစ္ျဖစ္ hex code နဲ႔ျဖစ္ျဖစ္ထည့္လို႔ရပါတယ္။
border ကို 1 မထားပဲ 10 လို႔ထား ထားပါတယ္။အဲ့ေတာ့မွ သိသာမွာမို႔လို႔ပါ။
color ကို red လို႔ထားထားပါတယ္။
Cell Spacing
Cell Spacing ဆိုတာက cell တစ္ခုနဲ႔တစ္ခုၾကားအကြာအေဝးပါ။td or th ကို cell ကြက္လို႔ေခၚပါတယ္။ အဲ့ေတာ့ cell spacing မ်ားေလေလ cell ကြက္တစ္ခုနဲ႔တစ္ခု ေနရာက်ဲေလေလပါပဲ။
သူအတြက္codeကေတာ့
cellspacing="x" ပါ။xေနရာမွာ 1 ကေနစပီးထည့္ႏိုင္ပါတယ္။
မ်က္လံုးထဲျမင္သြားေအာင္ နမူနာ code ေလးေတြၾကည့္ၾကရေအာင္ဗ်ာ။
ဒါက cellspacing="10" နဲ႔ထားထားတာပါ။cellspacing မထားတဲ့ output ေတြနဲ႔ ယွဥ္လိုက္ရင္ ကြဲေနတာေတြ႔ရမွာပါ။
cellspacing="10" ေနရာမွာ
cellspacing="100" လို႔ေရးပီးစမ္းၾကည့္လိုက္ရင္ cell ကြက္တစ္ခုနဲ႔တစ္ခုေတာ္ေတာ္ေလးကြာသြားတာကိုေတြ႔ရမွာပါ။
Cell padding
cell padding attribute ကက်ေတာ့
cell ကြက္ထဲမွာေရးထားတဲ့စာနဲ႔ cell ကြက္ border နဲ႔ကိုခြာေပးတာျဖစ္ပါတယ္။
cellpadding မ်ားေလ စာကအတြင္းကိုဝင္ေလ ျဖစ္ပါတယ္။
သူ႔အတြက္ code ကေတာ့
cellpadding="x" ပါ။
Color
အေပၚမွာ border ကို color ထည့္လို႔ရတာျပခဲ့ပီးပါပီ။ cell ကြက္တစ္ကြက္ခ်င္းစီကို color ထည့္ခ်င္ရင္လဲရပါတယ္။ဒါမွမဟုတ္ row တစ္ခုလံုးကိုထည့္ခ်င္ရင္လဲရပါတယ္။
သံုးရမဲ့ attribute က bgcolor ပါ။
Table တစ္ခုလံုးကိုေနာက္ခံ color ထည့္ခ်င္ရင္
< table bgcolor="color_name">
ဆိုပီးေရးရမွာပါ။
Row မွာပဲ ထည့္ခ်င္ရင္ tr tag ထဲမွာ bgcolor ကိုထည့္သံုးရမွာပါ။
Cell တစ္ကြက္တည္းမွာပဲသံုးခ်င္ရင္
td or th ထဲမွာထည့္သံုးရမွာပါ။
နမူနာ code ကိုၾကည့္လိုက္ပါ။
Line 4 မွာ table တစ္ခုလံုးအတြက္ color ထားထားပါတယ္။
Line 5 မွာ 1st row အတြက္ color ထားထားပါတယ္။
Line 11 မွာ cell တစ္ကြက္အတြက္ပဲ color ထားထားပါတယ္။
Output ကိုၾကည့္လိုက္ရင္႐ွင္းသြားမွာပါ။
ကြၽန္ေတာ္တို႔အေနနဲ႔ table နဲ႔ cell ေတြရဲ႕ background color ကိုေျပာင္းႏိုင္ေပမဲ့ text ေတြရဲ႕ color ကိုက်ေတာ့ font tag နဲ႔ပဲေျပာင္းလို႔ရပါတယ္။
သူ႔ရဲ႕ code ကေတာ့
<font color="color_name">Text</font> ပါ။
ဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးပါ။
Written by 
MSC - 187