HTML Tabel Techniques (3)

ကဲ .. အရင္ပို႔စ္မွာ ေအာက္က ဇယားေလးကို Next Post အေနနဲ႔ ေရးျပထားခဲ့ပါတယ္ ..

ေခါင္းစဥ္
စာရင္း(၁)	စာရင္း(၂)
စာရင္းလိမ္(၁)	စာရင္းလိမ္(၂)

သူ႕ရဲ႕ သက္ဆိုင္ရာကုဒ္ေတြကို မေျပာခင္ ဇယားမွာပါတဲ့ အေျခအေနေတြကို အရင္ဆံုး ေတြးၾကည့္ရေအာင္ ...

႐ိုး႐ိုးေလးၾကည့္လိုက္မယ္ဆိုရင္ေတာ့ ဇယားမွာ တိုင္ (column) အေပၚဆံုးကတစ္ခု ေအာက္က ႏွစ္ခုနဲ႔ အတန္း (row) သံုးတန္းပါတယ္လို႔ ျမင္ရမွာပါ ..
အဲဒါေၾကာင့္ ကုဒ္ေရးတဲ့အခါ ႐ိုး႐ိုးပဲ .. ဒီလိုေရးၾကည့္မယ္ ..

<table border="5" bordercolor="red">
    <tr>
        <td>ေခါင္းစဥ္</td>   ===> ဒါက အေပၚဆံုးက တိုင္တစ္ခုအတြက္
    </tr>
    <tr>
        <td>စာရင္း(၁)</td>
        <td>စာရင္း(၂)</td>   ===> ဒါက တိုင္ႏွစ္တိုင္ပါတဲ့ ဒုတိယတန္း
    </tr>
    <tr>
        <td>စာရင္းလိမ္(၁)</td>
        <td>စာရင္းလိမ္(၂)</td> ===> ဒါက တိုင္ႏွစ္တိုင္ပါတဲ့ တတိယတန္း
    </tr>
</table>

ကဲ .. အဲဒီလိုစဥ္းစားၿပီး ကုဒ္ေတြကို ေရးလိုက္ရင္ result က ဒီလိုထြက္လာမယ္ ..

ေခါင္းစဥ္
စာရင္း(၁)	စာရင္း(၂)
စာရင္းလိမ္(၁)	စာရင္းလိမ္(၂)

ဇယားေတာ့ ျဖစ္သြားတယ္ ဒါေပမယ့္ ေခါင္းစဥ္အျဖစ္ရွိေနရမယ့္ ပထမဆံုးအတန္းႀကီးက ပထမတိုင္အျဖစ္နဲ႔ပဲ ရပ္တည္ေနၿပီး ပထမတန္း ဒုတိယတိုင္ကေတာ့ ေနရာလြတ္ႀကီးျဖစ္သြားတယ္ .. တစ္ကယ္ေတာ့ HTML ရဲ႕သေဘာအရ . ဇယားအယူအဆမွာ ကၽြန္ေတာ္တို႔ရဲ႕ အျမင္နဲ႔ ေတာ္ေတာ္ႀကီး ကြာဟေနပါတယ္ .
HTML အယူအဆကို ေျပာရမယ္ဆို .. “ေခါင္းစဥ္” လို႔ေပးထားတဲ့ တိုင္ (column) ႀကီးရဲ႕ေအာက္မွာ တိုင္ (column) ႏွစ္ခုကပ္ေနတယ္လို႔ ယူဆေပးရမွာျဖစ္ပါတယ္ ..
ကဲ .. အဲဒီေတာ့ တိုင္တစ္တိုင္ရဲ႕ေအာက္မွာ တိုင္အေရအတြက္ကပ္ဖို႔ ကုဒ္တစ္မ်ိဳးလိုလာပါတယ္ ..
အဲဒီကုဒ္ကေတာ့ မခက္ပါဘူး .. colspan="n" ပါ .. n ေနရာမွာ ကိုယ္ႀကိဳက္သေလာက္  အေရအတြက္ ထည့္ႏိုင္ပါတယ္ .. col ဆိုတာက column (တိုင္) ကိုၫႊန္းတာျဖစ္ၿပီး span ဆိုတာကေတာ့ တြယ္ကပ္တာ ကပ္ေျမွာင္တာကို ၫႊန္းတာျဖစ္ပါတယ္ .. ပထမဆံုးတန္းမွာပဲ တိုင္ႏွစ္တိုင္ကို တစ္တိုင္တည္းျဖစ္ေအာင္ ေပါင္းရမွာမို႔ တိုင္ေတြေပါင္းစည္းတဲ့ကုဒ္ <br /> ကိုထည့္ရမယ္ (br နဲ႔ / ၾကားမွာ Space bar တစ္ခ်က္ျခားပါတယ္ .. “ေခါင္းစဥ္” ဆိုတဲ့စာကို ေခါင္းစဥ္အျဖစ္နဲ႔ သိသာေအာင္ <h3></h3> တစ္စံုထည့္ရပါမယ္ ..
ကဲ .. အဲဒီေတာ့ ဇယားမွာ တိုင္ႏွစ္တိုင္ တြယ္ကပ္ေနတာျဖစ္လို႔ colspan="2" လို႔ ေရးထားတာျဖစ္ပါတယ္ တိုင္ႏွစ္တိုင္လံုးမွာ တန္းႏွစ္တန္းစီျဖစ္ေနလို႔ <tr></tr> ႏွစ္စံုပါရမယ္ေပါ့ ..
ကုဒ္ေတြကို တစ္ခုခ်င္းခြဲထုတ္စဥ္းစားမယ္ဆိုရင္

• ဇယားမို႔ ထိပ္ဆံုးမွာ <table> နဲ႔ဖြင့္ၿပီး ေနာက္ဆံုးမွာ </table> နဲ႔ ပိတ္ထားမယ္ ..
• ပထဆံုးတန္းအတြက္က <tr>နဲ႔စ ၿပီး </tr>နဲ႔ဆံုးရမယ္
• အဲဒီပထမဆံုးတန္းမွာ တိုင္ႏွစ္တိုင္ကို တစ္တိုင္တည္းျဖစ္ေအာင္ ေပါင္းစည္းမွာမို႔ <br /> ကပ္ထည့္ရမယ္
• ေနာက္ .. ဒုတိယ အတန္းအတြက္က<tr> နဲ႔ ျပန္စၿပီး တိုင္ႏွစ္တိုင္ထည့္မွာမို႔ <td></td> ႏွစ္စံုေရးရမယ္ </tr> နဲ႔ ျပန္ပိတ္ေပးရမယ္
• တတိယ အတန္းအတြက္ <tr> နဲ႔စ တိုင္ႏွစ္တိုင္အတြက္ <td></td> ႏွစ္စံု .. </tr> ျပန္ပိတ္

ကုဒ္ေတြအားလံုးေပါင္းလိုက္ေတာ့ ဒီလိုျဖစ္သြားမယ္

<table border="5" bordercolor="GREEN">
       <tr>
          <td colspan="2"><h3>
              <br />ေခါင္းစဥ္</h3>
          </td>
      </tr>
      <tr>
          <td>စာရင္း(၁)</td>
          <td>စာရင္း(၂)</td>
       </tr>
       <tr>
          <td>စာရင္းလိမ္(၁)</td>
          <td>စာရင္းလိမ္(၂)</td>
       </tr>
</table>

ဟုတ္ၿပီ .. ထပ္ခ်ဲ႕ၿပီး စဥ္းစားမယ္ .. colspan="2" အစား "3" နဲ႔အထက္ ေျပာင္းၾကည့္လိုက္ရင္ .. တိုင္အေရအတြက္က သံုးခုျဖစ္သြားမွာေပါ့ ..
ကုဒ္က ဒီလိုျဖစ္သြားမယ္

<table border="5" bordercolor="GREEN">
  <tr>
        <td colspan="3"><h3>
           <br />ေခါင္းစဥ္</h3>
        </td>
   </tr>
   <tr>
         <td>စာရင္း(၁)</td>
         <td>စာရင္း(၂)</td>
    </tr>
    <tr>
          <td>စာရင္းလိမ္(၁)</td>
          <td>စာရင္းလိမ္(၂)</td>
       </tr>
     <tr>
          <td>စာရင္းမေပၚ(၁)</td>
          <td>စာရင္းမေပၚ(၂)</td>
      </tr>
</table>

Result အေနနဲ႔က ဒီလိုထြက္လာမယ္ ..

ေခါင္းစဥ္
စာရင္း(၁)	စာရင္း(၂)
စာရင္းလိမ္(၁)	စာရင္းလိမ္(၂)
စာရင္းမေပၚ(၁)	စာရင္းမေပၚ(၂)

ကဲ .. colspan ဟာ ကပ္ပါးတိုင္ေတြကိုၫႊန္းတာဆိုရင္ ကပ္ပါးတန္းအတြက္ေရာ မရွိဘူးလား ..
ရွိပါတယ္ . သူတို႔အတြက္ ကုဒ္ကေတာ့ rowspan ျဖစ္သြားပါမယ္ .. က်န္တာေတြကေတာ့ row အတြက္ <tr></tr> နဲ႔ column အတြက္ <td></td> ဆိုၿပီး တြက္ခ်က္ေရးသားသြား႐ံုပါပဲ ..
ေအာက္က ဇယားကိုၾကည့္ပါ ..

ေခါင္းစဥ္	စာရင္း(၁)
	စာရင္း(၂)

ကဲ .. သံုးသပ္ၾကည့္ရေအာင္ ..
row (တန္း) ႏွစ္တန္းပါလို႔ <tr></tr> ႏွစ္စံုပါမယ္ ..
column (တိုင္) ကလည္း ႏွစ္တိုင္ပါတာမို႔ <td></td> ႏွစ္စံုပါမယ္ ..
“ေခါင္းစဥ္” ဆိုတဲ့ cell ကို row ႏွစ္ခုက span အျဖစ္ လာကပ္မွာမို႔ rowspan="2" လို႔ ထည့္ရမယ္ ..
ကဲ .. အဲဒီေတာ့ ကုဒ္အားလံုးက ဒီလိုျဖစ္သြားမယ္

<table border="5" bordercolor="red">
   <tr>
      <td align="center" rowspan="2">ေခါင္းစဥ္</td>
            <td>စာရင္း(၁)</td>
   </tr>
<tr>
            <td>စာရင္း(၂)</td>
   </tr>
</table>

အဲဒီမွာ ကၽြန္ေတာ္ align="center" ကိုထည့္သံုးထားတာက “ေခါင္းစဥ္” ဆိုတဲ့ content ကို အလယ္မွာေပၚေစခ်င္လို႔ ထည့္သံုးထားတာပါ .. အဲဒီလို အလုပ္မ႐ႈပ္ခ်င္ဘူးဆိုရင္ ေခါင္းစဥ္အျဖစ္ အလယ္မွာထားခ်င္တဲ့ cell ေတြတိုင္းအတြက္ <td နဲ႔ /td> ေတြအစား <th နဲ႔ /th> ေတြကို ေျပာင္းသံုးလိုက္တာနဲ႔ ေခါင္းစဥ္အျဖစ္သတ္မွတ္ၿပီး စာလံုးေတြကို Bold ျခယ္တာေတြ Center မွာထားေပးတာေတြကို အလိုလို command ေပးၿပီးသားျဖစ္သြားပါမယ္ ..
rowspan အတြက္ ပိုၿပီးလြယ္တယ္ .. ဘာျဖစ္လို႔လဲဆိုေတာ့ rospan ကို အဲဒီေနရာမွာတင္ Value ေျပာင္းလဲသတ္မွတ္ေပးလိုက္တာနဲ႔ က်န္တဲ့ row အေရအတြက္ကို ႀကိဳက္သေလာက္ တိုးခ်ဲ႕ ဆြဲယူလို႔ ရသြားပါတယ္ ..
ေအာက္မွာ <th> ကိုသံုးၿပီး rowspan အေရအတြက္ ေျပာင္းထည့္ျပထားပါတယ္ ..
ဒါက ေျပာင္းလဲလိုက္တဲ့ ကုဒ္ပါ

<table border="5" bordercolor="red">
  <tr>
       <th rowspan="5">th သံုးထားတဲ့ေခါင္းစဥ္</th>
       <td>td သံုးတဲ့ cell (၁)</td>
  </tr>
  <tr>
       <th>th သံုးတဲ့ cell(၁)</th>
  </tr>
  <tr>
       <td>td သံုးတဲ့ cell(၂)</td>
  </tr>
  <tr>
       <th>th သံုးတဲ့ cell(၂)</th>
  </tr>
  <tr>
       <td>td သံုးတဲ့ cell(၃)</td>
  </tr>
</table>

ရလာတဲ့ Result က ဒီလိုျဖစ္သြားပါမယ္ ..

th သံုးထားတဲ့ေခါင္းစဥ္	td သံုးတဲ့ cell (၁)
	th သံုးတဲ့ cell(၁)
	td သံုးတဲ့ cell(၂)
	th သံုးတဲ့ cell(၂)
	td သံုးတဲ့ cell(၃)

ကဲ .. ဒီပို႔စ္ကို ဒီမွာပဲ နားပါရေစ ...

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



အိုင္တီမုဆိုး