HTML Tabel Techniques (1)

ကၽြန္ေတာ္ .. ဒီပို႔စ္ကေနစၿပီး Table နဲ႔ဆိုင္တဲ့ HTML ကုဒ္ေတြအေၾကာင္းကို မွ်ေ၀တင္ျပသြားမွာပါ (ကၽြန္ေတာ္ ေလ့လာထားသေလာက္ကို ကၽြန္ေတာ္ေလ့လာခဲ့ရတဲ့ သင္႐ိုးအတိုင္း မွ်ေ၀ေပးမွာျဖစ္ၿပီး ကၽြန္ေတာ္ စမ္းသပ္ထားသမွ်ေတြကိုေတာ့ သင္႐ိုးနဲ႔အတူ ထည့္သြင္းမွ်ေ၀ေပးသြားမွာပါ)

ကဲ .. စ လိုက္ၾကစို႔ ..


HTML နဲ႔ပတ္သက္တဲ့ Table အမ်ိဳးအစားေတြဟာ သိပ္ကို မ်ားျပားပါတယ္ .. ဒါေပမယ့္ .. Table ဆိုင္ရာ HTML ကုဒ္ကေတာ့ အေျခခံအားျဖင့္ (၃) မ်ိဳးပဲ ရွိပါတယ္ .. အဲဒါေတြကေတာ့

1. Table Tags
2. Row Tags
3. Cell Tags

အဲဒီ (၃) မ်ိဳးပါ ..

(1) Table Tags ဆိုတာကေတာ့ Table ႀကီးတစ္ခုလံုးကို Table အျဖစ္သတ္မွတ္ေဖာ္ျပဖို႔ Command ေပးမယ့္ ကုဒ္ပါ .. အဲဒီကုဒ္ကေတာ့ ဒီလိုပါ ..

<table> xxx </table>   (ကုဒ္ေတြရဲ႕ အဖြင့္သေဘာ[ <> ]နဲ႔ အပိတ္ [ </> ]သေဘာကိုေတာ့ အရင္က ကၽြန္ေတာ္တင္ျပခဲ့တဲ့ Marquee Techniques နဲ႔ဆိုင္တဲ့ Post ေတြမွာ ျပန္ၿပီး ေလ့လာလိုက္ပါ ..

(2) Row Tags ကေတာ့ Table ထဲမွာ ရွိေနတဲ့ အတန္းအေနအထားအတြက္ ျဖစ္ပါတယ္ .. သူ႕အတြက္ ကုဒ္ကေတာ့ ဒီလိုပါ ..

<tr> xxx </tr>

(3) Cell Tags ဆိုတာကေတာ့ Table ထဲမွာရွိတဲ့ အခန္း (အကြက္) ေတြအတြက္ ကုဒ္ကိုေျပာတာပါ .. အဲဒါအတြက္ ကုဒ္ကေတာ့ ဒီလိုပါ ..

<td> xxx </td>

ေအာက္က နမူနာ ကုဒ္ကုိၾကည့္ပါ

<table>
  <tr>
    <td>နမူနာ</td>
    <td>ဥပမာ</td>
 </tr>
 <tr>
    <td>သာဓက</td>
    <td>Example</td>
 </tr>
</table>

အဲဒီကုဒ္ရဲ႕ ရလာဒ္က ဒီလိုထြက္လာပါမယ္ ..

နမူနာ	ဥပမာ
သာဓက	Example

ကဲ .. သံုးသပ္ၾကည့္ရေအာင္ ..
ေရွ႕ဆံုးနဲ႔ ေနာက္ဆံုးမွာရွိေနတဲ့ <table> နဲ႔ </table> ဆိုတဲ့ ကုဒ္ေတြက Table အျဖစ္သတ္မွတ္ခုိင္းတဲ့ အဖြင့္ကုဒ္နဲ႔ အပိတ္ကုဒ္ပါ
<tr> နဲ႔ </tr> အဖြင့္အပိတ္ ႏွစ္စံုထားထားတာက Table ထဲမွာ အတန္း ( row ) ႏွစ္ခုပါမယ္လို႔ သတ္မွတ္လိုက္တာပါ ..
<td> နဲ႔ </td> ဆိုတဲ့ အဖြင့္အပိတ္ေလးေတြကေတာ့ Table ထဲမွာ ရွိေနမယ့္ အခန္းေတြကို ကိုယ္စားျပဳတာပါ .. <tr> ႏွစ္စံုမို႔ အတန္းႏွစ္တန္းရွိမယ္ .. <td> ေလးစံုမို႔ ဇယားကြက္ စုစုေပါင္း ေလးခုရွိမယ္ .. ( ကုဒ္ေတြကို သူ႕အဆင့္နဲ႔သူ ေနရာ အတိုးအေလ်ာ့ေလးေတြနဲ႔ ထားထားတာကေတာ့ ျမင္သာေအာင္ ေရးျပထားတာပါ .. ဒီအတိုင္းတစ္တန္းတည္းပဲ ဆက္ေရးသြားလည္း ရပါတယ္ .. ရလာဒ္မေျပာင္းပါဘူး .. တစ္ကယ္တမ္းေရးၾကေတာ့မယ္ ဆိုရင္လည္း အခုလိုေလး ခြဲခြဲျခားျခားေလး ေရးထားရင္ လိုအပ္လို႔ စစ္ေဆးျပဳျပင္ရေတာ့မယ္ဆိုရင္ အလြယ္တကူ ရွာေဖြႏိုင္တာေပါ့ .. )

ဒါေပမယ့္ .. ကၽြန္ေတာ္ေရးလိုက္တဲ့ Table က စာသားသက္သက္ Table ပဲျဖစ္ေနၿပီး ေဘာင္(border) ေတြ မပါေတာ့ ၾကည့္လို႔ အဆင္မေျပပါဘူး .. အဲဒါေၾကာင့္ .. border အတြက္ အခုလို သတ္မွတ္ေပးလိုက္ပါမယ္

<table border=1>
  <tr>
    <td>နမူနာ</td>
    <td>ဥပမာ</td>
 </tr>
 <tr>
    <td>သာဓက</td>
    <td>Example</td>
 </tr>
</table>

သူ႕အတြက္ ရလာဒ္ကေတာ့ ဒီလိုျဖစ္သြားပါမယ္ ..

နမူနာ	ဥပမာ
သာဓက	Example

ကဲ .. Table တစ္ခုေတာ့ ပီပီျပင္ျပင္ ျဖစ္သြားၿပိေပါ့ .. အဲဒီထဲကမွ border=1 ကိုပဲ .. ကိုယ္ႀကိဳက္တဲ့ ပမာဏထားၿပီး ဇယားကို လိုသလို ျပင္ဆင္႐ံုပါပဲ .. ဥပမာေပါ့ ..

<table border=10>
  <tr>
    <td>နမူနာ</td>
    <td>ဥပမာ</td>
 </tr>
 <tr>
    <td>သာဓက</td>
    <td>Example</td>
 </tr>
</table>

အဲဒီလိုလုပ္ပစ္လိုက္ရင္ ရလာဒ္က ဒီလိုထြက္သြားေရာ ..

နမူနာ	ဥပမာ
သာဓက	Example

ကဲ . ဒီေန႔ေတာ့ အျမည္းသေဘာနဲ႔ .. ဒီမွာတင္ ရပ္လိုက္ပါရေစ ..

နည္းပညာလမ္းေၾကာင္းေပၚက သူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

Next Post	For Table
Border Color	Changing Codes