සුභ දවසක් හැමෝටම.

ඔයාලා දැන් HTML ටික ටික අල්ලන් යනවා ඇති කියලා හිතනවා. අපි කලින් HTML පාඩම් කිහිපයක් කලා, ඒ ටික බලපු නැති කෙනෙක් ඉන්නවනම් බලන්න. මොකද මුල ඉදන් යනවනම් තමයි වැදගත්.

  1. HTML හැදින්වීම හා ඉතිහාසය #පාඩම් මාලාව 01
  2. ‌Basic HTML Tags හදුනගනිමු #පාඩම් මාලාව 02
  3. Simple Web Page එකක් හදමු. #HTML පාඩම් මාලාව 03
  4. වෙබ් පිටු නිර්මාණය #HTML Text Formatting Explained #Lesson04
  5. HTML Style වලින් වැඩකරන්න ඉගෙනගමු #පාඩම් මාලාව 05
  6. HTML Page එකකට Image එකක් Add කිරීම. #පාඩම් මාලාව 06
  7. HTML Page එකකට Links – Hyperlinks ඇතුළත් කිරීම #පාඩම් මාලාව 07
  8. Web Development – Underline,Line-through හා Overline භාවිතය

 

හරි අද පාඩමෙන් කථා කරන්න යන්නේ HTML Table ගැන. ඔයාලා දැකලා ඇති වෙබ් පිටු වල, කිසියම් දත්ත සමූහයක් සටහන් කරන්න වගේ දේවල් වලට Table භාවිතා කරන්න පුළුවන්. HTML වලින් simple table එකක් නිර්මාණය කළ හැකි අතර CSS යොදා එය හැඩගැන්වි‍ය හැකිය.

අපි Table එකක් හදන්න කලින් ප්‍රධාන Tags හතරක් දැනගෙන ඉන්න වෙනවා.

  • <table> – ටේබල් එකක් හදන්න පටන් ගන්න කොට අපි මේක තමා පාවිච්චි කරන්නේ. මේ ටැග් එකෙන් අඳුන ගන්නවා මෙතන ඉඳලා පහලට තියෙන්නේ ටේබල් එකක් කියලා අවසන් කරන්නේ </table> ටැග් එකෙන්.
  • <th> </th>– ටේබල් හෙඩර්ස් ඒ කියන්නේ වගුවේ මාතෘකා දාන්නේ මේ වගේ. එතකොට නිකම්ම තද කළුඅකුරු බෝල්ඩ් වෙලා පෙනේවි. මේක අවශ්‍යම අංගයක් නෙවේ.
  • <tr> </tr>– ටේබල් එකක තියෙන හරස් තීරු මේ මගින් හඳුන්වා දෙනවා. අපි cell හදාගන්න මේ හරස් තීරු අවශ්‍ය වෙනවා. Table rows කියලා තමයි මේවා හඳුන්වන්න.
  • <td> </td>– table data ඒ කිය්නනෙ ඩේටා දාන්න පාවිච්චි කරන cells තමා මේවිදියට හදන්නේ <td></td> ඇතුලේ දත්ත දාන්න පුළුවන්.මේවා හදන්න කලින් table row එක හදාලා ඒ ටැග් එක ඇතුලේ මේ td ටැග්ස් පාවිච්චි කරන්න ඕන.

 

අපි බලමු සරළ HTML Table එකක් නිර්මාණය කරගන්නේ කොහොමද කියලා.

OUT PUT:-

 

  • <table> වලින්  Table එකක් හදන්න පටන් ගත්තා
  • මේ Table එකේ අපි <th> ටැග යොදාගත්තා Firstname, Lastname, Age යන මාතෘකා දාගන්න. ඒ නිසා එය Bold වී පෙනෙනවා.
  • ඉන්පසු Table Row එකක් සෑදීමට අවශ්‍යයයි. එම නිසා <tr> ටැගය යොදා table row එක ආරම්භ කරගන්නවා. එම Row එක තුළ Data සදහන් කරගැනීමට අවශ්‍යයයි. එම නිසා අපි <tr> tag එක තුළ යොදාගත්තා <td> ටැගය. Data තුනකින් සමන්විත විය යුතු නිසා පිළිවෙලින් Firstname එක වෙනුවෙන් Hasun ද, Lastname එක වෙනුවෙන් Chathu ද, Age එක වෙනුවෙන් 21 ද යොදා තිබෙනවා. Data සදහන් කර අවසාන වූ පසු  </td> ටැගය යොදා table data අවසාන කරගන්නවා. එම Table row එක අවසන් කිරීම සදහා <tr> ටැගය යොදාගන්නවා.
  • තවත් Table Row එකක් Add කිරීමට පෙර පරිදිම සටහන් කල යුතුය
  • Table Rows සාදා අවසන් වූ පසු Table එක </table> වලින් අවසන් කරයි.

HTML Table එකට Border එකක් Add කරමු.

අපිි ඉහත සදහන් කරගත් Html table එකට CSS Part එකක් එක් කරගන්න යන්නේ, CSS ගැලළු සහගතයිනම් අපේ CSS පාඩම් මාලාව බලන්න පුළුවන්.

ඉහත Table එකටම ඔයා මේ CSS part එක <head> </head> තුල යෙදුවොත් මේ වගේ Output එකක් ගන්න පුළුවන්.

OUT PUT:-

මෙහිදී CSS part එක <style> ටැගයෙන් ආරම්භ කරනවා. Border එක් කල යුතු කොටස් වලට අදාල tags සදහන් කරනවා table, th, td ලෙස. ඉන්පසු Boader thickness එක 1px යනුවෙන්ද, solid color එක Black ලෙසද සදහන් කර තිබෙනවා.


Collapsed Borders

ඔයාට මේ වගේ තනි lines වලින් තියෙන border එකක් දාගන්නනම් Collapse Border එකක් Add කරගන්න වෙනවා. පෙර CSS Code එකටම border-collapse: collapse; ලෙස යොදන්න.



 

ඒ වගේම මේ Table එක අපිට Customize කරන්න පුළුවන් මේ වගේ.

අපි මෙහිදී  Padding,Text Align එකකින් ‍යුත් css part එකක් එක් කරලා තියෙනවා.

[scc]

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: center;
}
</style>

[/css]

මේ වගේ  Table හද හද බලන්න css part වෙනස් කර කර. එහෙනම් නැවත මීලග HTML පාඩමෙන් හමුවෙමු!

අදහස් දක්වන්න

comments

  • පට්ට ලිපියක්
  • සතුටු දායකයි
  • අපරාදේ
  • වැඩක් නෑ
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,