Thursday, September 15, 2016
HTML Table
ဒီအခန္းမွာေတာ့ HTML Table ေတြတည္ေဆာက္ပံုကိုုရွင္းျပသြားပါမယ္၊ အေရးၾကီးပါတယ္၊ သင့္၀က္ဆိုက္တစ္ခုလံုးကို HTML Table ေတြနဲ႔ပဲ
တည္ေဆာက္ႏိုင္ပါတယ္၊ Table ေတြကိုတည္ေဆာက္ရာမွာ <table> အဖြင့္နဲ႔ </table> အပိတ္ tags ေတြကိုအသံုးျပဳျပီးတည္ေဆာက္ရပါတယ္၊ ျပီးရင္
table row ေတြကိုတည္ေဆာက္ရတယ္၊ ဒီ့အတြက္ သံုးရမွာကေတာ့ <tr> အဖြင့္နဲ႔ </tr> အပိတ္တို႔ပါ၊ သူတို႔ကေတာ့
အလွ်ာလိုက္အတန္းေတြကိုျဖစ္ေပၚေစပါတယ္၊ ျပီးရင္ေတာ့ table data ေတြကိုတည္ေဆာက္ရပါတယ္၊ table data ေတြကိုတည္ေဆာက္ဖို႔သံုးတဲ့ HTML
Tag ကေတာ့ <td> အဖြင့္နဲ႔ </td> အပိတ္တို႔ပါ၊ ရွဳပ္မသြားေအာင္တစ္ဆင့္စီစျပီးရွင္းသြားမယ္၊
ပထမအဆင့္
table တစ္ခုကိုတည္ေဆာက္ဖို႔အတြက္ HTML table tags ေတြျဖစ္တဲ့ <html> နဲ႔ </html> တို႔ကိုေရးရမယ္၊ ေအာက္က အတိုင္း
<table>
</talbe>
ဒုတိယ အဆင့္
table တစ္ညေဆာက္ဖို႔အတြက္ အရင္ဆံုး table row တစ္ခုကိုတည္ေဆာက္လိုက္မယ္၊ table row ေတြက သင့္ရဲ့ table မွာအလွ်ားလိုက္ပံုစံမ်ိဳးရွိတယ္၊
အခု row တစ္ခုပဲတည္ေဆာက္ၾကည့္မယ္၊ ဒီ့အတြက္ <tr> အဖြင့္နဲ႔ </tr> အပိတ္တို႔ကိုေရးမယ္၊ ေအာက္က အတိုင္း၊
<table>
<tr>
</tr>
</table>
အထက္က လို table row ကိုတည္ေဆာက္ျပီးသြားရင္ table data ကိုတည္ေဆာက္မယ္၊
တတိယအဆင့္
table data ကိုတည္ေဆာက္ဖို႔အတြက္ <td> အဖြင့္နဲ႔ </td> အပိတ္တို႔ကိုထည့္ရမယ္၊ ေအာက္က အတိုင္း
<table border= "1">
<tr>
<td> </td>
</tr>
</table>
အထက္ က အတိုင္းေရးလိုက္ရင္ေတာ့ table row တစ္ခုနဲ႔ table data တစ္ခုတို႔ပါတဲ့ table ကိုတည္ေဆာက္ျပီးသြားပါပီ၊ ၾကည့္ရတာ
အဆင္ေျပသြားေအာင္ table data ထဲမွာ စာတစ္ေၾကာင္းေလာက္ေရးလိုက္ပါ၊ <td> Arsenal </td> လို႔ေရးလိုက္၊ ဒါဆိုရင္ေအာက္က ပံုအတိုင္း table data ထဲမွာ စာတစ္ေၾကာင္းေလာက္ေရးလိုက္ပါ၊ <td> Arsenal </td> လို႔ေရးလိုက္၊ ဒါဆိုရင္ေအာက္က ပံုအတိုင္း table တစ္ခုကိုရမယ္၊
အထက္က လို table တစ္ခု ရပီ ဒါေပမယ့္ မလွေသးဘူး၊ (ေဟ့ လွဖို႔ေတာ့မပူနဲ႔ 72coder က သင့္ကို dynamic website ေတြဆြဲတဲ့နည္းပါသင္ေပးမွာ၊
လွလြန္းလို႔ သင့္၀က္ဆိုက္က အသက္ေတြေတာင္၀င္လာေစရမယ္၊ အခု ေတာ့ အေျခခံ ျဖစ္တဲ့ HTML အဆင့္ကိုေလ့လာေနတာဆိုေတာ့ စိတ္ေရွာ့ထားဦး)
အထက္မွာ table tage ကို Attribute အျဖစ္ border = “1” ထည့္ထားတယ္၊ သူမပါရင္ table ေတာ့ျဖစ္တယ္ ဒါေပမယ့္ ဇယားကြက္ကိုျမင္ရမွာမဟုတ္လို႔ ၊
သင္ ဇယားကြက္ရဲ့ border ေတြကိုၾကီးခ်င္တယ္ဆိုရင္လဲ ၾကီးႏိုင္ပါတယ္၊
အထက္က table ကိုပဲ table data တစ္ခုထပ္ထည့္ၾကမယ္၊ <td>VS</td> လို႔ထည့္လိုက္ေအာက္က အတိုင္း
<table border= "1">
<tr>
<td>Arsenal</td>
<td>VS</td>
</tr>
</table>
အထက္က အတိုင္း ေရးျပီး Run လိုက္ရင္ေအာက္က ပံုမ်ိဳးရရွိမယ္၊
အထက္က ပံုမ်ိဳးရရွိရင္ျဖင့္ေနာက္ထပ္ table data ထပ္ထည့္အံုးမယ္၊ <td>Cheasel</td> လို႔ထည့္လိုက္၊ ေအာက္က အတိုင္း၊
<table border= "1">
<tr>
<td>Arsenal</td>
<td>vs</td>
<td>Cheasel</td>
</tr>
</table>
အထက္က အတိုင္းေရးလိုက္ရင္ ျဖင့္ ေအာက္က ပံုအတိုင္း သင့္ဆြဲလိုက္တဲ့ table ကိုရရွိမယ္၊
အထက္က မွာ သင္ေပးခဲ့တဲ့ပံုမွာ <tr> ဆိုတဲ့ table row tags ကိုတစ္ခါပဲသံုးခဲ့တယ္၊ ဒါေၾကာင့္ အလွ်ားလိုက္တစ္ေၾကာင္းပဲ ရွိတယ္၊ ဒါေပမယ့္ table data
ဆိုတဲ့ html tag ကိုေတာ့ သံုးၾကိမ္ေတာင္သံုးခဲ့တယ္၊ ဒါေၾကာင့္ column ၃ ခုရွိေနတာ၊ ေသခ်ာမွတ္ပါ၊ table row က
အလွ်ားလိုက္အတန္းရွည္ကိုကိုစားျပဳျပီး table data က column ေတြကိုကိုစားျပဳတယ္ဆိုတာ၊
အခု အထက္က ကုတ္ကိုပဲ ေနာက္ထပ္ table row တစ္ခုနဲ႔ table data သံုးခု ထပ္ထည့္ၾကည့္မယ္၊ table rwo အသစ္ထည့္ဖို႔အတြက္ ေအာက္က
အတိုင္းေရး
<tr>
<tr>
အထက္ကအတိုင္း table row ထည့္ျပီးသြားရင္ table data သံုးခုထည့္မယ္၊ ေအာက္မွာ နာမည္ေတြနဲ႔ တကြ
<tr>
<td> liverpool </td>
<td> vs </td>
<td> Manchester U </td>
</tr>
အထက္က အတိုင္း table rwo သံုးခုနဲ႔ table data သံုးခုကိုထည့္ျပီးသြားရင္ျဖင့္ သူတို႔ကို အထက္မွာေရးခဲ့တဲ့ table ရဲ့ </tr>
အပိတ္ေအာက္မွာသြားထည့္ ေအာက္က အတိုင္း၊
<html>
<head>
<title>Firstwebpage</title>
</head>
<body>
<table border= "1">
<tr>
<td>Arsenal</td>
<td>vs</td>
<td>Cheasel</td>
</tr>
<tr>
<td> liverpool </td>
<td> vs </td>
<td> Manchester U </td>
</tr>
</table>
</body>
</html>
အထက္က အတိုင္း အားလံုးေရးျပီးသြားရင္ ေအာက္က ပံုအတိုင္းအေျဖထြက္မယ္၊
အထက္က ဥပမာ မွာ table row ႏွစ္ခုျဖစ္သြားတယ္၊ ဒါေၾကာင့္ အလွ်ားလိုက္ မ်ဥ္း ႏွစ္ေၾကာင္းပါလာတာ၊ table data ကေတာ့ အားလံုးေပါင္း 6
ခု၊ ပထမ table rwo ထဲမွာ သံုးခု၊ ဒုတိယ table row ထဲမွာသံုးခု
အထက္က ဥပမာ ကေတာ့ table row နဲ႔ table data တည္ေဆာက္ပံုပါ၊ ဒါေပမယ့္ တကယ္ မျပည္စံုးေသးဘူး၊ table ေတြက တကယ့္ကို
တည္ေဆာက္ရတာ လြယ္တယ္၊ ဒါေပမယ့္ table nesting လုပ္တဲ့အခါ မေရာသြားေအာင္သတိထားရမယ္၊ အထက္က ဥပမာ မွာ table ထဲမွာပဲ
border ထည့္ထားတယ္၊ အက်ယ္ ေတြ အျမင့္ ေတြျဖစ္တဲ့ attribute ေတြလဲထည့္လို႕ရတယ္၊ အထက္က <table > အဖြင့္နဲ႔ </table> ပိတ္က
အဖြင့္မွာ width = “400” လို႔ထည့္လိုက္ၾကည့္ပါ၊ <table width = “400”> ဒါဆိုရင္ေတာ့ table အရြယ္ အစား
ပိုက်ယ္သြားတာကိုေတြ႔ရမယ္၊ ေအာက္က အတိုင္း၊
အထက္က ဥပမာမွာပဲ ေပၚဆံုးမွာ ေနာက္ထပ္ table rwo တစ္ခုနဲ႔ table data တစ္ခုထပ္ထည့္မယ္၊ အခု table rwo ကိုစထည့္မယ္၊ ေအာက္က
အတိုင္း
<tr>
</tr>
အထက္က လို table row ကိုထည့္ျပီးသြားရင္ table data ကိုထပ္ထည့္မယ္၊ သံုခုေနာ္ ေအာက္က အတိုင္း
<tr>
<td> a </td>
<td> Tonight Matches </td>
<td> </td>
</tr>
အထက္မွာေတာ့ table rwo တစ္ခုနဲ႔ table data တစ္ခုတို႔ကိုထပ္ထည့္လိုက္ျပီ၊ အခု အဲ့ဒီ့ ကုတ္ေတြကို ေပၚက ကုတ္ေတြအားလံုးရဲ့ အဖြင့္ <table
width= “400” border= “1”> ရဲ့ ေအာက္မွာသြားထည့္လိုက္ ေအာက္က အတိုင္း၊
<html>
<head>
<title>Firstwebpage</title>
</head>
<body>
<table width= "400"border= "1">
<tr>
<td> a </td>
<td> Tonight Matches </td>
<td> b</td>
<td> </td>
</tr>
<tr>
<td>Arsenal</td>
<td>vs</td>
<td>Cheasel</td>
</tr>
<tr>
<td> liverpool </td>
<td> vs </td>
<td> Manchester U </td>
</tr>
</table>
</body>
</html>
အထက္က HTML Document ကို Run လိုက္ရင္ျဖင့္ ေအာက္က အတိုင္း သင့္၀က္ဆိုက္ရဲ့စာမ်က္ႏွာကိုရမယ္၊
ေနာက္တစ္ခန္းမွာ table ေတြနဲ႔ ပတ္သတ္တဲ့ အျခားနည္းပညာေတြကိုလဲေလ့လာၾကပါမယ္
ယခုဘေလာ့သည္မိတ္ေဆြမ်ားထံမွျပန္လည္မွ်ေ၀ထားပါသည္ကၽြန္ေတာ္ပိုင္ေနရာေလးမ်ား
ေရာင္ျပန္ေလးစာေပသို႔ဒီမွာသြားပါ
18+တို႔ဆံုဆည္းရာသို႔ဒီမွာသြားပါ
****အဆင္မေျပမႈ႔တစ္စံုတစ္ရာရွိပါက****
Facebook Account ျဖစ္တဲ႔
ေအာက္ပါပံုေလးကိုႏွိပ္ျပီးေ၀ဖန္အၾကံေပးႏိုင္ပါတယ္
@@@@စာေပ၀ါသနာပါရင္ကၽြန္ေတာ့္ရဲေရာင္ျပန္ေလး-စာေပ PageကိုLikeႏွိပ္ထားပါဦး@@@@
