web ඉගෙන ගනිමු - 5 පාඩම

අපි කිව්වා වගේ මේ පාර අපි කථා කරන්නේ table හැ‍ද‍ෙන හැටි

 table හදන්න ගන්නෙ <table> </table> tag ඒක.
මේ කොටස අැතුලෙ තමයි table ඒක පවතින්නේ...

table ඒකක් වුනාම table raws තියෙන්න ඔින. table columns තියෙන්න ඔින, ඒ වගේම table data තියෙන්න ඔිනේ.
table raw වලට <tr></tr> කියන tag ඒක පාවිච්චි වෙන්නෙ. columns නම් html වලදි auto recognize කරගන්නවා. table headers වලට පාවිච්චි වෙන්නෙ <th></th> කියන tag ඒක. table data වලට ගන්නෙ <td></td>.  අපි බැලුවොත් මේ table වල codings තියෙන්නෙ කොහොමද කියලා...

<table border="1">
      <tr>
              <th> Name</th>
              <th>Age</th>
              <th>Address</th>
      </tr>
      <tr>
             <td>Aruna</td>
             <td>40</td>
             <td>Ampara</td>
      </tr>
</table>

මේ code ඒක browser ඒකේ වැඩ කරන්නෙ පහත දක්වලා තියෙන විදියට...

The Table

මේකෙ table tag ඒකේ පාවිච්චි වෙන මූලික attributes තමයි width, border, id වගේ දේවල්.

තවත් වැදගත් කාරනාවක් තමයි colspan සහ rawspan ...

colspan වලින් කෙරෙන්නෙ ඒකම row ඒකේ තියෙන columns දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
      <tr>
              <th> Name</th>
              <th colspan="2">Address</th>
             
      </tr>
      <tr>
             <td>Aruna</td>
             <td>Anuradhapura</td>
             <td>Ampara</td>
      </tr>
</table>

Colspan Mode

rowspan වලින් කෙරෙන්නෙ ඒකම column ඒකේ තියෙන raws දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
      <tr>
              <th> Name</th>
              <td>Aruna</td>
      </tr>
      <tr>
             <th rowspan="2">Address</th>
             <td>Anuradhapura</td>
      </tr>
      <tr>
              <td>Ampara</td>
      </tr>
</table>

Rowspan mode

අපි ඊලග පාර ඉදන් CSS කථා කරමු...