HTML #5

Table එකක් හදමු..

html වල table එකක් හදාගන්න යොදන tag එක තමා <table> tag එක,table එකක rows සහ columns තියෙනවා..සම්පුර්ණයෙන්ම table එකක් හදන්නේ කොහොමද බලමු.

මුලින්ම table tag එක open කරගන්න ඕනි..

<table>                   </table> මේ tag දෙක ඇතුලේ තමා සම්පුර්ණ table එක තියෙන්නේ..

දැන් rows හදාගන්න ඕනි..table rows හදන්නේ <tr>      </tr> මේ tags වලින්..<tr > කියන්නේ table rows. rows ,table  එක ඇතුලේ තියෙන නිසා table tags ඇතුලේ row tags තියෙන්න ඕනි.

Screenshot_1

දැන් මේ row එකක් ඇතුලේ columns තියෙන්න ඕනි..columns දාන්නේ <td>   </td> කියන  tag එකෙන්..<td> කියන්නේ table data..

tablse

මෙහෙම තමා table එකක් හදන්නේ..

Screenshot_2

table එකකට table header  එකක් තියෙන්න ඕනි..header එක තරමක් කැපී පෙනෙන විදිහට,මධ්‍යස්තව, තියෙන්න ඕනි ..<th> (table header) tag එකෙන් මේක කරන්න පුළුවන්..

header එක දාන්නේ උඩින්ම..ඒ නිසා අපි table එකේ උඩම row එකට අපේ headers දානවා

Screenshot_3.

දැන් අපිට අවශ්‍ය පරිදි එක්,එක් header එකට අදාළ තොරතුරු  table එකට දාල පුරවගන්න පුළුවන්..අපි මේ වගුව හැදුවට default ,table එකේ  border එක 0 px(pixel).ඒ නිසා වගුවක් තිබුනත් අපිට පෙන්නේ නෑ .ඒ නිසා අපි table එකේ border එක වැඩි කරගන්න ඕනි..එකට අපි කරන්නේ  table tag එක ඇතුලේ border කියල attribute එකක් හදලා අවශ්‍ය pixel ගාන දෙන එක.ඒ විදිහට  සම්පුර්න කරපු වගුවක් තමා මේ..

Screenshot_4

2.list

list වර්ග දෙකක් තියෙනවා..

1. Unordered list

2.Ordered list

1.Unordered list එකක් පටන්ගන්නේ <ul>      </ul> tag එකෙන්..

list එක ඇතුලේ තියෙන්න ඕන දේවල්,නැත්නම් list items දාන්න ඕනි.එකට යොදාගන්නේ

<li ></li > tag එක.. .Unordered list එක ඇතුලේ list items තියෙන්න ඕනි..ඒ නිසා අපි tags හසුරවන්නේ මෙහෙම..

Screenshot_6

2.ordered list එකක් පටන්ගන්නේ <ol> </ol> tag එකෙන්..

මේකෙත් කලින් විදිහටම list items දාන්නේ <li > </li> tags වලින්..

Screenshot_8

මේකෙදි වෙනස තමා ordered list එකකදී,අපි list items දාන පිළිවෙලට  list එක numbered වෙලා එනවා..unordered list එකකදී එහෙම වෙන්නේ නැ..

codes ටික ගන්න මෙතනින් යන්න

git

.8094122684_9ffbdbe0c9

 

 

Advertisements

2 thoughts on “HTML #5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s