ဘေလာ႔ဂ္တြင္ ဇယားကြက္ေလးမ်ား ထည္႔သြင္းျခင္း...

Contributor: ရန္ေအာင္

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ. ကၽြန္ေတာ္လည္း နည္းပညာေဆာင္းပါးေလးေတြ မေရးျဖစ္တာ ၾကာပါျပီ. ခုမွပဲ စိတ္ျပန္လည္လာလုိ႔ ျပန္ေရးျဖစ္ေတာ႔မယ္ဗ်ာ.

ဒီတစ္ခါေတာ႔ ဘေလာ႔ဂ္မွာ ဇယားကြက္ေလးေတြ တင္တာကုိ ေျပာျပခ်င္ပါတယ္. HTML နားလည္ျပီးသားသူူေတြေရာ၊ သိပ္မသိေသးတဲ႔သူေတြပါ နားလည္သြားေအာင္ တတ္ႏုိင္သေလာက္ အရွင္းဆုံးပုံစံနဲ႔ ေဆြးေႏြးသြားပါမယ္.

Table ဆုိတာ ဇယားကြက္ေလးေတြေပါ႔ဗ်ာ. ရွင္းပါတယ္ေနာ္.



ဇယားကြက္ေလးေတြကုိ ရည္ရြယ္ခ်က္အမ်ိဳးမ်ဳိးနဲ႔ ဥာဏ္ရွိသလုိ အသုံးျပဳႏုိင္ၾကပါတယ္. တစ္ခ်ိဳ႔က Table လုပ္တဲ႔ Coding ေလးေတြ သိျပီးသားျဖစ္ေနေပမယ္႔ လက္ေတြ႔တင္လုိက္ေတာ႔ ပုိ႔စ္နဲ႔ Table ၾကားမွာ White Space ေတြ အမ်ားၾကီးျဖစ္ျပီး ကုိယ္႔ရဲ႔ ပုိ႔စ္ေလး အရုပ္ဆုိးေနတာကုိ ၾကဳံေတြ႔ဖူးၾကမွာပါ. အဲဒီ႔လုိမျဖစ္ေအာင္ ဘယ္လုိကာကြယ္ရမလဲ ဆုိတာကိုပါ ထည္႔ေျပာသြားပါမယ္ ခင္ဗ်ာ.

ကဲ. စလုိက္ၾကရေအာင္လား.

<center>
<table border="1">
<tr>
<td>ေခါင္းစဥ္ (၁)</td><td> ေခါင္းစဥ္ (၂)</td><td> ေခါင္းစဥ္ (၃)</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>
</center>

အဲဒါဆုိရင္ ေအာက္ပါ Table ေလးကို ရပါျပီ. ဒါေပမယ္႔ Table ေလးရဲ႔ အေပၚမွာ အျဖဴေရာင္ကြက္လပ္ၾကီးေပၚေနတာကုိ ေတြ႔ရပါလိမ္႔မယ္. အဲဒါဘာလုိ႔လဲဆုိေတာ႔ Blogger က ခင္ဗ်ား Enter Key တစ္ခ်က္ႏွိပ္ျပီး ေနာက္တစ္လုိင္း ဆင္းလုိက္တုိင္း <br/> ဆုိတဲ႔ Tag ေလးကို Auto ထည္႔ထည္႔ေပးသြားပါယ္. ဒါေၾကာင္႔ Line Break ေလးေတြ ျဖစ္လာျပီး ပို႔စ္နဲ႔ ဇယားကြက္ေလးၾကားထဲမွာ White Space ၾကီး ျဖစ္ေပၚလာရတာပါ.

ေခါင္းစဥ္ (၁)	ေခါင္းစဥ္ (၂)	ေခါင္းစဥ္ (၃)
row 1 col 1	row 1 col 2	row 1 col 3
row 2 col 1	row 2 col 2	row 2 col 3

ကဲ. အဲဒါကုိ ဘယ္လုိေဖ်ာက္ၾကမလဲ ဆုိေတာ႔ ဒီလုိေဖ်ာက္ပါခင္ဗ်ာ.

အခုေပးမယ္႔ HTML Codes ေလးေတြကုိ ခင္ဗ်ားရဲ႔ ဇယားကြက္ေလး မစတင္ခင္မွာ ထည္႔ေပးလုိက္ပါ. ဇယားကြက္ေလးေတြက တစ္ခုထက္ပုိေနခဲ႔ရင္ေတာ႔ ေနာက္တစ္ခု မစတင္ခင္ အခ်ိန္တုိင္းမွာ ထည္႔ေပးသြားပါ.

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

...the Coding for your Table goes here...

ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး. ျပီးသြားရင္ </div> Tag ေလးနဲ႔ ျပန္ပိတ္ေပးရပါမယ္.

အဲဒါပါပဲ ခင္ဗ်ာ.

Table ကုဒ္ဒင္းေလးတည္ေဆာက္ပုံကုိ အေသးစိတ္ ရွင္းျပပါမယ္.

<center> ဆုိတာကေတာ႔ Table ေလးကို အလယ္မွာ ေပၚခ်င္လု႔ိ Alignment လုပ္ေပးထားတာပါ. <table border= “1”> ဆုိတာကေတာ႔ Table Border အထူအပါးကို ေျပာပါတယ္. နံပါတ္ၾကီးလာရင္ ပုိျပီးေတာ႔ ထူလာပါမယ္.

<tr> ဆုိတာကေတာ႔ Table Row လုိ႔ ဆုိလုိပါတယ္. <td> ဆိုတာကေတာ႔ Table Data ပါ.

<tr> တစ္ခု စီဟာ Row တစ္ခုစီကုိ ကုိယ္စားျပဳပါတယ္. <tr> တစ္ခုယူျပီးသြားရင္ <td> ေတြ လုိက္ထည္႔လုိ႔ရပါတယ္. <td> တစ္ခုစီဟာ Column တစ္ခုစီကုိ ကုိယ္စားျပဳသြားပါတယ္.

ဥပမာ. ကၽြန္ေတာ္တုိ႔ 3x4 Table တစ္ခု တည္ေဆာက္ေတာ႔မယ္ ဆုိပါစုိ႔ဗ်ာ.

Row 3 ခု နဲ႔ Column 4 ခု ရွိရပါမယ္ေနာ္. အဲဒါဆုိရင္ ဒီလုိတည္ေဆာက္ပါမယ္. မိမိရဲ႔ Coding မွာ <tr> Tag အဖြင္႔အပိတ္ သုံးစုံရွိရပါမယ္. <tr> Tag တစ္ခုစီတုိင္းအတြက္ <td> Tag အဖြင္႔အပိတ္ ေလးစုံစီ ရွိရပါမယ္. ဒါမွ 3x4 Table ျဖစ္ပါမယ္.

<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>
</table>
</center>

အဲဒါဆုိရင္ Row တစ္ခု ျပီးသြားပါျပီ. Table Data Cell ေလးခုယူထားတဲ႔အတြက္ Column ေလးခုရွိတယ္လုိ႔ မွတ္ယူႏုိင္ပါတယ္. သေဘာေပါက္ေလာက္ပါျပီေနာ္.

ကၽြန္ေတာ္တုိ႔ရဲ႔ Table မွာ Row 3 ခု ရွိရမွာ ျဖစ္တဲ႔အတြက္ စုစုေပါင္း <tr> Tag သုံးခုတဲြစီ ရွိရပါမယ္.

ေနာက္တစ္ခုထပ္ထည္႔ျပီေနာ္.

<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>

<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>

</tr>
</table>
</center>

ေတြ႔တယ္ေနာ္.

ေနာက္တစ္ခုထပ္ထည္႔ပါမယ္.

<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>

<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>
</tr>

<tr>
<td>We</td>
<td>Row</td>
<td>Till</td>
<td>We Die!!!</td>
</tr>

</table>
</center>

ရရွိလာမယ္႔ Table ေလးကေတာ႔ ဒီလုိေလးပဲ ျဖစ္ပါတယ္ခင္ဗ်ာ.

We	Are	Greatest	Bloggers
We	Never	Give up	Our Fight!
We	Row	Till	We Die!!!

ကဲ. ဒီေလာက္ဆုိရင္ Table Coding ေလးအေၾကာင္း နားလည္ေလာက္ျပီလုိ႔ ယူဆပါတယ္. ဆက္ျပီးေတာ႔ Advanced Level ေလးေတြကုိ သြားလုိက္ရေအာင္ေနာ္.

ကၽြန္ေတာ္အစမ္းလုပ္ၾကည္႔ထားတဲ႔ ဇယားကြက္ေလးေတြကုိ ရႈစားေတာ္မူၾကပါ.

<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

<h3>ဇယား (၁)</h3>


<table border ="1">
<tr>
<td>ပင္မဘေလာ႔ဂ္</td>
<td>သီခ်င္းဘေလာ႔ဂ္</td>
<td>အေထာက္အကူျပဳဘေလာ႔ဂ္</td>
</tr>
<tr>
<td><a href="http://yanaung.blogspot.com" target="_blank">ရန္ေအာင္</a></td>
<td><a href="http://rhythmcorner.blogspot.com" target="_blank">သံစဥ္လႈိင္း</a></td>
<td><a href="http://mmbloggershelpdesk.blogspot.com" target="_blank">Bloggers Helpdesk</a></td>
</tr>
</table>

<h3>ဇယား (၂) </h3>
ဒါကေတာ႔ ဇယားကြက္ေလးေတြရဲ႔ infrastructure ကို ပုံစံလုပ္ျပထားတာပါ. Row ေတြ၊ Column ေတြ ဘယ္လုိ ေရတြက္ရတယ္ဆုိတာ သိေအာင္ေပါ႔.

<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>

</div>
</center>

ဒီလုိေလးျမင္ရပါမယ္ ခင္ဗ်ာ.

ဇယား (၁)

ပင္မဘေလာ႔ဂ္	သီခ်င္းဘေလာ႔ဂ္	အေထာက္အကူျပဳဘေလာ႔ဂ္
ရန္ေအာင္	သံစဥ္လႈိင္း	Bloggers Helpdesk

ဇယား (၂)

ဒါကေတာ႔ ဇယားကြက္ေလးေတြရဲ႔ infrastructure ကို ပုံစံလုပ္ျပထားတာပါ. Row ေတြ၊ Column ေတြ ဘယ္လုိ ေရတြက္ရတယ္ဆုိတာ သိေအာင္ေပါ႔.

Heading 1	Heading 2	Heading 3
row 1 col 1	row 1 col 2	row 1 col 3
row 2 col 1	row 2 col 2	row 2 col 3

<table border="1"> ေနရာမွာ 1 အစား နံပါတ္ေလးေတြ ေျပာင္းထည္႔ၾကည္႔ႏုိ္င္ပါတယ္.

ဒီလုိစမ္းၾကည္႔မယ္ဗ်ာ.

ဇယား (၁)

table border Value ကုိ နံပါတ္ 8 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...

ပင္မဘေလာ႔ဂ္	သီခ်င္းဘေလာ႔ဂ္	အေထာက္အကူျပဳဘေလာ႔ဂ္
ရန္ေအာင္	သံစဥ္လႈိင္း	Bloggers Helpdesk

ဇယား (၂)

table border Value ကုိ နံပါတ္ 15 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...

ပင္မဘေလာ႔ဂ္	သီခ်င္းဘေလာ႔ဂ္	အေထာက္အကူျပဳဘေလာ႔ဂ္
ရန္ေအာင္	သံစဥ္လႈိင္း	Bloggers Helpdesk

ဇယား (၃)

table border Value ကုိ နံပါတ္ 24 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...

ပင္မဘေလာ႔ဂ္	သီခ်င္းဘေလာ႔ဂ္	အေထာက္အကူျပဳဘေလာ႔ဂ္
ရန္ေအာင္	သံစဥ္လႈိင္း	Bloggers Helpdesk

ကဲ. Table ေလးေတြကုိ ဆက္ျပီး ကလိလုိက္ၾကရေအာင္.

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center>
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</center>

အဲဒါဆုိရင္ Table ေလးရဲ႔ ေနာက္မွာ အေရာင္ေလးေတြ ရလာပါလိမ္႔မယ္. Color လုိခ်င္ရင္ blue, green စသည္ျဖင္႔ ရိုက္ထည္႔လုိ႔ ရႏုိင္သလုိ မိမိႏွစ္သက္ရာ Color Coding ေလးမ်ားကုိလည္း အစားသြင္းႏုိင္ပါေသးတယ္. ဒီေနရာမွာ Color Codes ေလးေတြ ရႏုိင္ပါတယ္ ခင္ဗ်ာ.

A background color:

First	Row
Second	Row

ဒီတစ္ခါက်ေတာ႔ ေနာက္ခံပုံေလးေတြ ထည္႔ၾကည္႔ပါမယ္

<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<h4>A background image:</h4>
<table border="1"
background=" http://www.fileden.com/files/2007/9/23/1451933/cool_bg_blue_background.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</div>
</center>

အဲဒါဆုိရင္ေတာ႔ Table ေလးေတြရဲ႔ ေနာက္မွာ မိမိၾကိဳက္နွစ္သက္ရာ ပုံေလးေတြ ထည္႔သြင္းအလွဆင္ျခယ္ႏုိင္ပါျပီ. မိမိတင္ခ်င္တဲ႔ ပုံေလးေတြကုိ File Hosting Site တစ္ခုခုမွာ တင္ျပီးေတာ႔မွ လင္႔ခ္ထုတ္ယူဖုိ႔ကိုေတာ႔ မေမ႔ပါနဲ႔ေနာ္. File Hosting လုပ္နည္းကုိ မသိရင္ ဒီေနရာမွာ ေရးခဲ႔ျပီးပါျပီ. ေလ႔လာႏုိင္ပါတယ္ ခင္ဗ်ာ.

A background image:

First	Row
Second	Row

ကုိယ္႔ရဲ႔လုိအပ္ခ်က္ေပၚ မူတည္ျပီး ဒီပုိ႔စ္ေလးကုိ အက်ိဳးရွိစြာ အသုံးခ်ႏုိင္ၾကမယ္လုိ႔ ေမွ်ာ္လင္႔မိပါေၾကာင္း….

Acknowledgement:

ဒီေနရာက ပုိ႔စ္ေလးကုိ အေျခခံျပီး သင္႔ေတာ္သလုိ ျဖည္႔စြက္ ေရးသားပါတယ္ ခင္ဗ်ာ.

ခင္မင္ေလးစားလ်က္

ရန္ေအာင္