PHP කරා යමු - 18 (HTML)

කලින් පාඩමත් ටිකක් දිග වුණා වගේ. ඒත් මොනා කරන්නද. සම්පූර්ණ පාඩමක් නෙ ඒක. හැබැයි ඉතින් ඒ සම්බන්ධ ඔක්කොම දේවල් වගේ මම කියලා දුන්නා කියලයි හිතන්නේ. ඔයාල හිතනවා නම් මොනා හරි කොටසක් මග හැරුනාය කියලා අහන්න අමතක කරන්න එප. ඒ පාඩමින් පස්සේ මම රෑට කාලා තමයි ආවෙ මේ පාර ඇඳට, පස්සෙ නිදා ගන්නත් එක්කම, ලැප්ටොප් එකත් අතට අරන්. දැන් අපි පටන් ගන්න යන්නෙත් ටිකක් දරුණු පාඩමක් කියන්න පුළුවන්. කලින් පාඩමෙන් ඉගෙන ගත්තු දේවලුත් මෙකට අදාල කර ගන්න පුළුවන්. හැබැයි ලියන විදිය විතරයි, කේත නෙවෙයි. ඒ වගු (tables) අඳින හැටි HTML පාවිච්චි කර ගෙන. ටිකක් පැටලෙන සුළු, පැහැදිලි කරන්න අමාරු පාඩමක් මේ විදියට. උත්සාහයක් දරල බලමුකෝ.

වගු සම්බන්ධ හැම ටැග් ජාතියක්ම යුගල ඒවා. මම මුලින්ම කියලා දුන්න විදියේ, ඒ කියන්නේ අපේ රීති ටික හොඳින්ම භාවිතා වෙන්න ඕනි තැනක් තමා මේක. පලමු රීතිය නම් කොහොමත් රැකෙනවා නෙ. ඒත් දෙවෙනි රීතිය රකින්න ගියාම පැටලෙනවා. ඒ නිසා සිහියෙන් ඒක කරන්න ඕනෙ. ටැග් යුගලක් ඇතුලේ තවත් ටැග් යුගලක් යොදන එක තමා ඒ. වගු අඳිද්දී අපිට මොනා හරි වගුවේ කොටුවක ලියා ගන්න ඕනෙ නම්, ඒ තැනට වෙනකම්ම අපිට වගු සම්බන්ධ ටැග් යුගල අතරේ වගු සම්බන්ධ ටැග් යුගල්ම පාවිච්චි කරන්න සිද්ධ වෙනවා ඒ කොටුව ඇඳ ගන්නකම්ම. ඉතින් මේ ටැග් යුගල් මොනාද කියල අපි බලමු දැන්.

පළමු වන ටැග් යුගලේ, ඒ කියන්නේ ප්‍රධානම සහ පාදම වෙන ටැග් යුගල තමා "<table></table>" කියන ටැග් යුගල. මේ තමා පලමු තට්ටුව වගුවක (table එකක). පලමු තට්ටුව කීවේ, ඔයාලට මතකයි නේද සත් මහල් ප්‍රාසාදය ගැන මම කීවා. අන්න ඒ වගේ ඇඳෙන පලවෙනි තට්ටුව. සාමාන්‍යයෙන්, අපි වගුවක් කොළේක අඳිද්දී, ඒකේ පේළි වගේම තීරුත් තියෙනවනේ. එතකොට නම් අපි අඳින්නේ අපිට කැමති විදියට මුලින්ම පේළි හරි තීරු හරි ඇඳලා සිරස්ව හරි හරහට හරි ඉරි ගහලා කොටු තියෙන වගුවක් ඇඳ ගන්න එක නේ. ඒ අපේ කැමැත්ත. හැබැයි HTML වලදී, අපිට ඕනෙ ඕනෙ විදියට එහෙට මෙහෙට ඉරි ගහන්න බෑ. ඒක අඳින විදියක් තියෙනවා. ඒ විදියෙන් ඇන්ඳේ නැත්තම් අපිට හරි හමන් දෙයක් බ්‍රවුසරයෙන් බලා ගන්න බැරි වේවි. ඒ නිසා මෙන්න මේ පිළිවෙල තමා අපි අනුගමනය කරන්න ඕනෙ.

"<table></table>" ටැග් යුගලෙන් කියන්නේ අපි ඔන්න වගුවක් ඇන්දා කියලා. ඒ තමා වගුවේ වටේ මායිම. මීලඟට අපි අඳින්න ඕනේ පේළි නැත්තම් "rows". මේ පේළියක් හඳුන්වන්නේ table row එකක් හැටියට. ඒ තේරුමෙන්ම තමා මීට අදාළ ටැග් යුගලෙත් තියෙන්නේ. ඒ "<tr></tr>". මේක ලියැවෙන්නේ, "table" ටැග් යුගල ඇතුලේ. ඔන්න අපි දැන් පේළිත් ඇඳ ගත්තා. තවමත් අපිට වචන පෙලක්වත් ලියා ගන්න පුළුවන් කොටුවක් ඇඳුනේ නෑ. ඒකට අපි කරන්නේ මේ ඇඳපු පේළි වල කොටු අඳින එක; එහෙමත් නැත්නම් ඇඳපු පේළිය කොටු වලට වෙන් කරන එක. මීලඟට එන ටැග් යුගලේ ඒ නිසා ඇඳෙන්නේ මේ පේළියක් ඇතුලේ. ඒ කීවේ "<tr></tr>" ටැග් යුගල අතරේ. ඒ, "<td></td>" කියන ටැග් යුගල. ඔන්න ඔය ටැග් යුගල අතරේ විතරමයි වගුවක් ඇතුලේදී අපිට වචන, වාක්‍ය, පිංතූර, ඡේද එහෙම ලියන්න, අඳින්න පුළුවන් වෙන්නේ. මේ කොටුවකට කියන්නේ cell එකක් කියලා. ටැග් එකේ තේරුම ගත්තොත් ඒ "table data". ඒ කියන්නේ වගුවක දත්ත තියන්න පුළුවන් තැන කියන එකයි. හැබැයි, එක පේළියකට (row එකකට) කොටු (cells) ගොඩක් නැත්නම් "<td></td>" ටැග් යුගල ගොඩාක් එන්න පුළුවන් වගේම ලියන්න පුළුවන් බව මතක තියා ගන්න. ඒ වගේම, එක වගුවකට පේළි නැත්නම් "<tr></tr>" ටැග් යුගලත් ගොඩාක් එන්න පුළුවන්. ඔය විදියට අපිට පුළුවන් වගුවක් ගොඩ නගා ගන්න අපිට කැමති විදියට. අපි පේළියකදී අඳින කොටු වලින් කියැවෙන්නේ ඒ වගුවේ තීරු (columns) කියලා. අපිට පේළියෙන් පේළි‍ය තීරු ප්‍රමාණය වෙනස් ප්‍රමාණ වලින් ඇඳ ගන්නත් පුළුවන්. දැන් අපි බලමුකෝ මේ කියපු ටික ලීවම පෙනෙන්නේ කොහොමද කියලා.

<table>
<tr>
<td>Hello Sri Lanka</td>
</tr>
</table>

තීරු ගාන වැඩි කරලත් බලමු.
<table> <- table margin
<tr> <- row margin
<td>Hello Sri Lanka</td> <- table cell with some data in it
<td>Welcome My Friend</td> <- table cell with some data in it
<td>How are you?</td> <- table cell with some data in it
</tr> <- row margin
</table> <- table margin

ලියපු ටික පේන විදියත් බලන්න එපැයි. ඒ ටික බ්‍රවුසරයෙන් පේන්න ඕනේ මේ වගේ.

Hello Sri Lanka

Welcome My Friend

How are you?