Developing A Simple Website by yourself (Lesson 9)

![14-00-22-website-importance-for-business.jpg](https://steemitimages.com/DQmRBGSeYxMv9k9tdRHNYzGFSW8K75hozXZVdDLB9TgUpqK/14-00-22-website-importance-for-business.jpg) မဂၤလာပါTableမွာ row နဲ႔ column ဆိုပီး႐ွိတာသိပီးသားပါ။cellpadding တို႔ cellspacing တို႔လိုမ်ိဳး Attribute ေတြကိုလဲနားလည္ေလာက္ပီထင္ပါတယ္။ Cell တစ္ကြက္ခ်င္းစီျဖစ္တဲ့ td မွာလဲ Attribute ေတြ႐ွပါတယ္။

Td Attribute

cell ကြက္ေတြမွာပံုေတြထည့္ရင္ ကြၽန္ေတာ္တို႔ႀကိဳက္တဲ့ေနရာမွာထည့္လို႔ရပညတယ္။"aling" နဲ႔ "valing" ဆိုတဲ့ attribute ေတြကိုသံုးရမွာပါ။ aling - ကအလ်ားလိုက္အတြက္သံုးတာပါ။ပံုကို cell ကြက္ရဲ႕ center မွာေပၚခ်င္တာလား left မွာေပၚခ်င္တာလား right မွာေပၚခ်င္တာလားဆံုးျဖတ္တဲ့အခါမွာသံုးပါတယ္။ valing - ကcell ကြက္ရဲ႕ top, middle or bottom မွာေပၚေစခ်င္တဲ့အခါသံုးပါတယ္။ ![1.png](https://steemitimages.com/DQmRiejcdppdntuYtW8Mn7AUsMrLLLTwf2aHmPEatWJ3tJJ/1.png) အေပၚကနမူနာ code မွာဆိုရင္ width 600 နဲ႔ height 300 ႐ွိတဲ့ table တစ္ခုကိုေတြ႔ရမွာပါ။Line 4 မွာ td ဆိုပီး cell ကြက္တစ္ကြက္ကိုေတြ႔ရမွာပါ။အဲ့cell ကြက္မွာပံုတစ္ပံုထည့္ထားပါတယ္။ (ပံုထည့္ခ်င္ရင္ <img src="pic_name&extention"> နဲ႔ထည့္ရတာပါ။) အဲ့မွာကြၽန္ေတာ္တို႔ Attribute ေတြထည့္ထားပါတယ္။ aling မွာ center ေပးပီး valign မွာ middle ေပးထားတဲ့အတြက္ကြၽန္ေတာ္တို႔ထည့္လိုက္တဲ့ ပံုက အဲ့ cell ကြက္ရဲ႕ အလယ္တည့္တည့္မွာေပၚမွာပါ။က်န္တဲ့ td ေတြမွာလဲ တူညီတဲ့ပံုေတြထည့္ထားပီး attribute ကိုပဲေျပာင္းထားတာေတြ႔ရမွာပါ။ Output ကိုၾကည့္လိုက္ပါ။ ![2.png](https://steemitimages.com/DQmUYKafX5V91H85ZUrvmT1HuPb5b3TdLmXsNnw18b44REd/2.png) <table> tag မွာ ''frame'' ဆိုတဲ့ attribute ႐ွိပါတယ္။frame attribute က border aatribute နဲ႔မတူပါပူး။border attribute - က cell ကြက္တိုင္းကို vertical နဲ႔ horizontal တိုင္းေဘာင္ခတ္လိုက္တာပါ။ frame attribute - ကေတာ့tableတစ္ခုလံုးကိုေဘာင္ခတ္လိုက္တာပါ။table ထဲက cell ကြက္ေတြကိုေဘာင္မခတ္ေပးပါပူး။ ![3.png](https://steemitimages.com/DQmePKkjEZioVjUV3HremswcRZY4MxZwLQod8eEGh2Nafub/3.png) Line 7 နဲ႔ Line 16 မွာ frame attribute ကိုသံုးထားတာေတြ႔ရမွာပါ။border type ျဖစ္ျဖစ္ box type ျဖစ္ျဖစ္ output တူတာေတြ႔ရမွာပါ။ ![4.png](https://steemitimages.com/DQmSvof8d5WKbWVEKviHA6pauqyd4oVjvaZfGC5L1oHXMcX/4.png)

Cell Merge

Cell ကြက္ေတြတစ္ခုနဲ႔တစ္ခုေပါင္းတာကို Cell Merge လို႔ေခၚပါတယ္။cell ကြက္ေတြေပါင္းတယ္ဆိုတဲ့ေနရာမွာ column အတိုင္းေကာ row အတိုင္းေကာေပါင္းလို႔ရပါတယ္။ Table တစ္ခုမွာ ပထမ tr နဲ႔စဖြင့္ထားတဲ့ row မွာ td ႏွစ္ခု႐ွိရင္ row တစ္ခု column ႏွစ္ခု႐ွိတဲ့tableေပါ့။ ေနာက္ထပ္ tr နဲ႔ row တစ္ခုထပ္ေပါင္းခ်င္ရင္ အဲ့ row မွာလဲ td ႏွစ္ခု႐ွိရမွာပါ။ အဲ့က်ရင္ row ႏွစ္ခု column ႏွစ္ခု႐ွိတဲ့ table သြားပါလိမ့္မယ္။ ![5.png](https://steemitimages.com/DQmaXnKeUzjNnZaCa6CxufQxG5nBz2Fei9zZ2j4cS9xDfeM/5.png) အဲ့တာကို cell merge လုက္တဲ့နည္းနဲ႔ေပါင္းလို႔ရပါတယ္။ဥပမာ ပထမ row ကို ဒီတိုင္းပဲထားမယ္။ဒုတိယ row ရဲ႕ column ႏွစ္ခုကိုေပါင္းမယ္။အဲ့လိုဆိုရင္ အဲ့ table က ပထမ row မွာ column ႏွစ္ခု႐ွိပီး ဒုတိယ row မွာ column တစ္ထုပဲ႐ွိေတာ့မွာပါ။ row ကိုေပါင္းခ်င္လဲတူတူပါပဲ။

Column Merge

"colspan'' ဆိုတဲ့ attribute ကိုသံုးရမွာပါ။td tag ထဲမွာထည့္သံုးရမွာပါ။ ![6.png](https://steemitimages.com/DQmXKbkzTABsMoVJaCjjkpC41xUtJvG76sqZBjhpgCKksKV/6.png) အေပၚက code ေတြကိုၾကည့္လိုက္ရင္ Line 7 ကေန 17 ထိမွာ row တစ္ခုကို column 3 ခုနဲ႔ေတြ႔ရမွာပါ။ Line 18 ကေန 25 ထိမွာ row တစ္ခုထပ္ေတြ႔ရမွာပါ။အဲ့ row မွာ က်ေတာ့ td ႏွစ္ခုပဲ႐ွိပါတယ္။td ႏွစ္ခုဆိုေတာ့ cell ႏွစ္ကြက္ေပါ့။အဲ့ေတာ့ cell တစ္ကြက္ကဘယ္ေရာက္သြားလဲဆိုရင္ Line 19 မွာ colspan="2" ဆိုတဲ့attribute ကိုေတြ႔ရမွာပါ။အဲ့attribute သံုးလိုက္လို႔ cell 2 ကိုေရးလို႔မရေတာ့ပါပူး။ cell 1 က cell 2 ေနရာကိုယူသြားလို႔ပါ။cell သံုးခုလံုးေပါင္းခ်င္ရင္ colspan="3" လို႔ထညိ့ရပါတယ္။ ဒါက output ပါ ![7.png](https://steemitimages.com/DQmWADMtV4GHUAmugWMta6H99ZvHCzhz6qNNiUX9Y5RcSJy/7.png) ပိုနားလည္သြားေအာင္ ဥပမာ တစ္ခုထပ္ၾကည့္ပါမယ္။ ![8.png](https://steemitimages.com/DQmNZSFkXGLKTezVJN7PidXGbpiRM2tPUuCoEi7L5xmJY5u/8.png) Lin 7 ကေန 12 ထိ row တစ္ခု႐ွိတာေတြ႔ရမွာပါအဲ့ row မွာက td တစ္ခုပဲ႐ွိပါတယ္။ဒါေပမဲ့ အဲ့tdက colspan attribute ကိုသံုးပီးေတာ့ cell သံုးကြက္ကိုေပါင္းထားတာပါ။cell 3 ကြက္လို႔ဘာျဖစ္လို႔ေျပာလို႔ရလဲဆိုေတာ့ colspan value မွာ 3 ေရးထားလို႔ပါ။ အဲ့ေတာ့ ကြၽန္ေတာ္တို႔ကေနာက္ row ေတြကို ပံုမွန္တိုင္းဆက္ေရးမယ္ဆိုရင္ cell သံုးကြက္က႐ွိကို႐ွိရမွာပါ။ td သံုးခုေပါ့။Output ကိုၾကည့္ၾကပါမယ္။ ![9.png](https://steemitimages.com/DQmf7QX5a6csRhRbpKpJeZtC3NVsskRmRBiiJRmnC87MDhy/9.png) ဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ေနာက္ေန႔က်ရင္ Row Merge အေၾကာင္းဆက္ပါမယ္။ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္။ Written by @minthwayko MSC - 187