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

අපි වගුවක් නම් ඇන්දා ඒත් කෝ ඒකෙ වටේ ඉරි? අපි ලියපු වචන ඛණ්ඩ තුන එක දිගට පේළියට තියෙනවා විතරයි නේද පේන්නේ? හරි ඒකට කරන්න දෙයක් තියෙනවා. ඒ වගුවක් අඳිද්දී අපි පාවිච්චි කරන ඇට්‍රිබියුට් කීපයක්ම තියෙනවා ඒ වගුව හැඩ වැඩ කරන්න. ඒ කියන්නේ "table" ටැග් එකට වගේම අනික් ටැග් වලටත් හැඩ වැඩ වෙන්න උදව් වෙන ඇට්‍රිබියුට් කීපයක්ම තියෙනවා. අපි දැන් ඒවා ගැන දැන ගනිමු.

මුලින්ම "table" ටැග් එකට විතරක් අදාල ඇට්‍රිබියුට් ගැන හොයල බලමුකෝ.

border - අපි අඳින වගුවේ නැත්නම් "table" එකේ දාරයේ ඝනකම කොච්චරද, සීමාවේ මහත කොච්චරද කියන එක තමා මේ ඇට්‍රිබියුට් එකට දෙන 0 (zero) ත් ඊට ඉහල පූර්ණ සංඛ්‍යා වලිනුත් අපිට බලා ගන්න පුළුවන් වෙන්නේ.

cellspacing - අපි වගුවේ කොටු අඳින කොට, එහෙමත් නැත්නම් පේළි තීරු වලට වෙන් කරද්දි, ඒ එක එකක් කොටු (cells) අතරේ ඉඩ කොච්චර තියෙන්න ඕනෙද කියලයි මේකෙන් කියැවෙන්නේ. දෙන අගයන් 0 (zero) සිට ඉහලට පූර්ණ සංඛ්‍යා. වගුවේ දාරයේ ඉඳන් කොටු වලට තියෙන දුරත් මේකම වෙන්න පුළුවන්.

cellpadding - වගුවේ ඇඳපු කොටු වල තියෙන අන්තර්ගතයට, එහෙමත් නැත්නම් කොටු ඇතුලේ ලියන දේවල් වලට කොටුවේ මායිමේ හෙවත් දාරයේ (border) ඉඳන් තියෙන දුරට තමා මෙහෙම කියන්නේ. ඒකටත් දෙන්නේ 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යා.

"tr" ටැග් එකට විතරක් විශේෂ වුණු ඇට්‍රිබියුට් නම් නැහැ. තියෙන්නේ අනිත් ටැග් දෙකේම තියෙන ඒවායෙනුත් කීපයක්. ඒ ගැන පොදු ටැග් වල ඇට්‍රිබියුට් ගැන හොයලම දැන ගමු.

අනිත් ටැග් ජාති දෙකටත් තියෙන පොදු ටැග් තමයි මේ තියෙන්නේ.

align - තිරස් අතට සමබර වෙන්න ඕනෙ කොයි පැත්තටද කියලා මේකට දෙන අගයන් තමා left (වමට), right (දකුණු අතට), center (මැදට). "td" ටැග් එකට විතරක් justify කියන එකත් තියෙනවා.

height - කොච්චර උස වෙන්න ඕනිද කියන එකයි. අගයන් විදියට දෙන්න ඕනි 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යාවල්.

width - කොච්චර පළල වෙන්න ඕනිද කියන එකයි. අගයන් විදියට දෙන්න ඕනි 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යාවල්. මේක අදාළ "table" සහ "td" ටැග් වලට විතරයි.

bgcolor - පසුබිමේ පාට, වර්ණය මොකක් විය යුතුද කියලා මේකට දෙන අගයන් ගැන අපි කලින් වතාවකදි ඉගෙන ගත්තා. ඒ ඕනෙ විදියකින් මේකට අගයක් දෙන්න ඔයාලට පුළුවන්.

background - පසුබිමට අපි පිංතූරයක් දානවා නම් මේ ඇට්‍රිබියුට් එකට අගයක් විදියට පිංතූරයක පාත් (path) එක එහෙමත් නැත්නම් පිංතූරයක් තියෙන තැනට ලිපිනය දෙන්න පුළුවන්.

bordercolor - දාරයේ නැත්නම් මායිමේ පාට, වර්ණය මොකක් විය යුතුද කියලා මේකට දෙන අගයන් ගැන අපි කලින් වතාවකදි ඉගෙන ගත්තා. ඒ ඕනෙ විදියකින් මේකට අගයක් දෙන්න ඔයාලට පුළුවන්.

"tr" ටැග් එකේ තියෙන ඇට්‍රිබියුට් වර්ග ටිකත් බලා ගන්නකෝ එහෙනම්.
align, height, bgcolor, bordercolor

මීලඟට "td" ටැග් එකට විතරක් අදාල ඇට්‍රිබියුට් ගැන හොයල බලමු.

valign - කොටුවක (cell) ලියන දේවල් කොටුව ඇතුලේ සිරස් අතට සමබර කිරීම තමා මේකෙන් වෙන්නේ. දෙන අගයන් වෙන්නේ, top (ඉහලට), middle (මැද්දට), bottom (පහලට) කියන ඉංග්‍රීසි වචන.

nowrap - කොටුවක් (cell) ඇතුලේ අපි දාන අන්තර්ගතය කොටුවේ පළලක් තියෙන නිසා ඉබේම පේළි කැඩෙමින් පහලට පහලට ලියැවෙනවා. මේක නැති කරන්න තමා මේ ඇට්‍රිබියුට් එක තියෙන්නේ. දෙන එකම අගය "nowrap" විතරයි. මේක දුන්නාම අපි කොටුව ඇතුලේ මොනා කොච්චර දිගට කීවත්, වාක්‍ය පේළි වලට ඉබේ නොකැඩී කොටුවේ පළල වෙනස් වෙනවා.

colspan - අපි ඇඳපු වගුවක තියෙන තීරු ප්‍රමාණයෙන් කීපයක් එක කොටුවක් බවට පත් කරන්න ඕනෙ නම් පාවිච්චි කර ගන්න වෙන්නෙ මේ ඇට්‍රිබියුට් එකයි. අපිට උවමනා කරන තීරු ටික සිහි බුද්ධියෙන් තෝරා ගෙන තමා මේක යොදන්න ඕනෙ. හැබැයි මේකෙන් අනිත් තීරු වලට බලපෑමක් නොවෙන්නේ, අපි තෝරා ගත්තු කීපයකට විතරක් මේක දා ගන්න පුළුවන් නිසා. හරියට සිහියෙන් නොකලොත්, වගුව විකාරයක් වෙන්නත් පුළුවන්. මේක තමා වගු වල තියෙන එපාම කරපු ඇට්‍රිබියුට් එක හරියට දැනන් නොකලොත්. තමන් තීරු කීයක් එකතු කරලා තනි කොටුවක් හදන්න යනවද කියන අගය තමා මේ ඇට්‍රිබියුට් එකේ අගයට දෙන්නේ. තීරු 5ක් නම් 5 කියලා දෙනවා.

rowspan - කලින් කියපු "colspan" ඇට්‍රිබියුට් එක වගේම තමා මේකත්. අපි ඇඳපු වගුවක තියෙන පේළි ප්‍රමාණයෙන් කීපයක් එක කොටුවක් බවට පත් කරන්න ඕනෙ නම් පාවිච්චි කර ගන්න වෙන්නෙ මේ ඇට්‍රිබියුට් එකයි. මේකත් හරියට සිහියෙන් නොකලොත්, වගුව විකාරයක් වෙන්නත් පුළුවන්. මේකත් වගු වල තියෙන එපාම කරපු ඇට්‍රිබියුට් එකක් හරියට දැනන් නොකලොත්. තමන් පේළි කීයක් එකතු කරලා තනි කොටුවක් හදන්න යනවද කියන අගය තමා මේ ඇට්‍රිබියුට් එකේ අගයට දෙන්නේ. පේළි 3 ක් නම් 3 කියලා දෙනවා.

අපි මේ ඉගෙන ගත්තුවා දැන් උදාහරණෙකින් කරලා බලමු. මුලින්ම කේත ටික ලියලා පස්සේ ඒක බ්‍රවුසරයෙන් පේන්නේ කොහොමද කියලා බලමු. හැම ඇට්‍රිබියුට් එකම නම් ලියනෙ නෑ. ඒව ඔයාලා කැමති විදියට පාවිච්චි කරලා බලන්න. ප්‍රශ්නයක් ආවොත් විසඳන්නම්.

<table border="1" cellpadding="2" cellspacing="2" align="center" height="100" width="400" bgcolor="yellow" bordercolor="red">
<tr>
<td align="left" bgcolor="#00CCCC" height="20" width="100">Hello</td>
<td align="right" background="C:\toolkit.jpg" width="200">Sri Lanka</td>
</tr>
<tr>
<td colspan="2" align="center" valign="bottom">How Are You?</td>
</tr>
</table>

Hello	Sri Lanka
How Are You?

ඔයාලා කරලාම බලන්න. සමහර විට මේකෙදි පෙන්නන විදිය වෙනස් වෙන්න පුළුවන්.

මීලඟට අපි styles (css) මෝස්තර කාරයා ගැන ඉගෙන ගනිමු.