HTML Table ගැන ඉතිරිය...

ඉතින් කොහොමද? කාලෙකින් නේද? කියලා වැඩක්නෑ වචනේ පරිසමාර්ථයෙන්ම මාස ගානකට පස්සේ වගේ මේ පැත්තේ ආවේ...  ඒත් ඔයාලානම් ඇවිත් ගිහින් තිබුනා කියලා දැක්කා..  ඒ හැමොටම ගොඩාක් ස්තූතියි බ්ලොගය තනි නොකලාට..

එදා අන්තිමට මම කීවානේද ටේබල් ගැන තව ටිකක් කියන්න තියනවා කියලා..  හ්ම්...  ඒ ටික තමා දැන් කියලා දෙන්න යන්නේ..  විශේෂයෙන් මේ කියලා දෙන ටික ටේබල් එක්ක ලොකු වැදගත්කමක් තියනවා..  මොකද දන්නවාද? සරල වෙබ් අඩවියකදී ටේබල් මගින් කරන්න පුළුවන් කාර්යය අති විශාලයි..  ඒක නිසා ඔයාලට ටේබල් වලට තියෙන මේ ගුණාංග (Attribute) කිහිපය ගැන කියලා දෙන්නම ඕනි..
ඒවා තමයි මේවා...


 # Border
   # Cellspacing
   # Cellpadding
   # Cell Merging

Border
   Border කියන එක ටේබල් වලදී හරි වැදගත්..  මොකද අපි මේකට අගයක් නොදුන්නොත් බොල්ඩර් එකට ඔටෝම අගයක් ගන්නවා..  ඒක සංඛ්‍යාත්මකව නොපෙන්නුවාට වෙබ් අඩවිට බ්‍රව්සරය තුළ දිස්වෙද්දී ඒහි යම් අගයක් අරගෙනයි තියෙන්නේ..  විශේශයෙන් ටේබල් මගින් වෙබ් අඩවියේ ලේඅවුට් () සකසා ගැනීමේදී Border=“0“ ලෙස ලබාදීම සිදු කළ යුතුයි..  නැතිනම් අපිට අවශ්‍ය ආකාරයට ටේබල් එක නිර්මාණය කරගැනීමේ අපහසුතා මතු වෙන්න පුළුවන්.. (මේක පැරණි වෙබ් බ්‍රව්සර් වල තියන දොශයක්)
ඒනිසා මේ ආකාරයට මේ Attribute එක භාවිතා කරන්න පුළුවන්

<table width="300" border="1"> </table> 

Cellspacing
   Cellspacing කියන්නේ සෙල් (Cell) දෙකක් අතර පවතින පරතරයයි..

<table width="300" border="1" cellspacing="20">


මේ ආකාරයට මෙය සාදාගතහැකීයි..  layout සෑදීමකදී හෝ යම් අවස්ථාවකදී මෙය අනවශ්‍ය යැයි  තීරණය කළේනම් මෙම අගය  “0“ ලෙස ලබාදෙන්න. එවිට මෙම පරතරය නැතිවී යයි.. 


Cellpadding
   Cellpadding යනුවෙන් හැදින්වෙන්නේ  Cell එකක බෝඩරය හා වගුව Cell එක තුළ ඇති දත්තයන් (content)  අතර ඇති දුරයි...

<table width="300" border="1" cellpadding="20"> මෙලෙස මේ සදහා අගයන් ලබාදීමෙන් බෝඩරය හා කන්ටෙන්ට් අතර ඇති දුර වෙනස් කරගත හැකිය... 

Cell Merging
    Cell Merging යනු සෙල් දෙකක් හො වැඩි ගනනක්  එකිනෙකට යාකරගැනීමයි මෙහිදී cell කිහිපයක් merge කිරීමෙන් පසුවද නිර්මාණය වන්නේ තවත් එක් cell එකක් පමණි..  නමුත් merge කරන ලද cell කිහිපයේ විශාලත්වට එම තනි cell එකට ලැබේ...

මෙම Attribute එක භාවිතා කිරීම පිලිබදව උදාහරණ ඇසුරින් සාකච්චා කරමු..

01. Column දෙකක් Merge කිරීම
   මේ සදහා පළමුව පහත පරිදි ටේබල් එක සකසා ගන්න...


<table width="300" border="1">
     <tr>
          <td> a </td>
          <td> b </td>
          <td> c </td>
     </tr>
     <tr>
          <td> d </td>
          <td> e </td>
          <td> f </td>
  </tr>
</table>

දැන් කල යුත්තේ  a හා b යන  cell  දෙක එක් කිරීමය ඒ සදහා පළමුවෙන්ම  "a" ට අදාල  <td> Tag එකට colspan නැමති Attribute  එක එක්කරගෙන  එහි අගය ලෙස "2" ලබාදෙන්න.

<td colspan="2">a</td>

දැන්
          <td colspan="2"> a </td>
          <td> b </td>
          <td> c </td>
මෙම නිල් පැහැයෙන් දක්වා ඇති Tag දෙක මකා ඉවත් කරන්න... 


අවසන් ප්‍රථිඵලය 

<table width="300" border="1">
     <tr>
           <td colspan="2"> a b </td>
          <td> c </td>
     </tr>
     <tr>
          <td> d </td>
          <td> e </td>
          <td> f </td>
  </tr>
</table>



colspan නැමති Attribute  එක මගින් ඒක් වියයුතු Column ගණන තීරණය කරයි...

02. Row දෙකක්  Merge කිරීම

<table width="300" border="1">
     <tr>
          <td> a </td>
          <td> b </td>
          <td> c </td>
     </tr>
     <tr>
          <td> d </td>
          <td> e </td>
          <td> f </td>
  </tr>
</table>


මෙහි රො  Row   ඇති පළමු කොළම් දෙක Merge  කරමු..
මේ සදහා rowspan නැමති Attribute එක භාවිතා කරයි...

මෙහිදීද කළ යුත්තේ ඉහතපරිදිම පළමු  Row  එකෙහි ඇති පළමු Column එක හා දෙවන  Row  එකෙහි ඇති පළමු Column එක , යන දෙකඑකිනෙකට Merge  කිරීමයි. මෙහිදී පළමු  Row  එකෙහි ඇති පළමු Column එකට (a) ට rowspan   නැමති Attribute එක යොදා එහි අගය දෙකක් ලෙස ලබා දෙනන.

<td rowspan="2">ad</td>


දැන්  දෙවන  Row  එකෙහි ඇති පළමු Column එක (d) මකා ඉවත් කරගන්න.

අවසන් සැකසුම මෙලෙස වේ..

<table width="300" border="1">
     <tr>
          <td rowspan="2">ad</td>
          <td> b </td>
          <td> c </td>
     </tr>
     <tr>
          <td> e </td>
          <td> f </td>
  </tr>
</table>
 දැන් බලන්න ලැබුණු අවසන් ප්‍රථිඵල දිහා..  මම හිතනවා වැදගත් දෙයක් තමා අද ඔයාලා ඉගනගත්තේ කියලා... ටේබල් වල ප්‍රයෝජන ගැන අපි මීට කළින් පොස්ට් එකේදී කථා කළානේ..  ඉතින් ඒ කියපු ප්‍රයෝජන නිවැරදිව ගන්නනම් මේවා ගැන හොද අවබෝධයක් තියෙන්න ඕනි... එහෙනම් ඔයාලට තියෙන ගැටළු එහෙම , හොද නරක එහෙම කමන්ට් විදිහට එකතු කරන්න අමතක කරන්න එපා.. ඔයාලට සුභ දවසක්... !!!