HTML Tables

Table
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Food</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Nemar</td>
    <td>28</td>
    <td>Banana</td>
  </tr>
</table>


</body>
</html>
Normel Table ekak hadanne mehema
HTML Table Tags
1.<table>
2.<th>
3.<tr>
4.<td>
5.<caption>
6.<colgroup>
7.<col>
8.<thead>
9.<tbody> 
10.<tfoot>
1. <Table>
1.<table>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Nemar</td>
    <td>28</td>
  </tr>
</table>


</body>
</html>
table ekak create karadi mulikawama yodaganne table tag eka
2. <th>
2.<th>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<!--Abbr / Colspan-->
<table style="width: 50%;">
  <tr>
    <th abbr="People Name and Age" colspan="2">Name & Age</th>
    <th abbr="People Food">Food</th>

  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Nemar</td>
    <td>28</td>
    <td>Banana</td>
  </tr>
</table>

<br>
<br>

<!--Rowspan-->

<table style="width: 50%;">
  <tr>
    <th abbr="People Name">Name</th>
    <th abbr="People Age">Age</th>
    <th abbr="People Food" rowspan="4">Food</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Nemar</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>
table eke header eka create karanne me tag eken
abbrmeka text ekak denna puluwan eth e text eka userta penne nehe. namuth screen reader walata bawitha karanna puluwan
colspan🎱header kotuwak kopamana thiru gananak dig wiya yuthuyda yanna niyama karay

🎱dig wiya yuthu thiru ganane number eka denna ona. thiru dekaknam 2 dena ona
rowspan🎱header eka pahalata yayuthu peli ganana niyama karay

🎱pahalata ya yuthu thiru ganane numbe eka denna ona. thiru 3knam 3 denna ona
3. <tr>
3.<tr>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Nemar</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>
table eke yatata peli අර්ථ දක්වයි.
4. <td>
4.<td>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Ronaldo</td>
    <td>34</td>
  </tr>

  <tr>
   <td colspan="2">Messi</td>
  </tr>

  <tr>
    <td>Nemar</td>
    <td>26</td>
  </tr>

</table>

<br>
<br>


<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Food</th>
  </tr>

  <tr>
    <td>Ronaldo</td>
    <td >34</td>
    <td rowspan="2">Apple</td>
  </tr>

  <tr>
    <td>Messi</td>
    <td>40</td>
  </tr>

  <tr>
    <td >Nemar</td>
    <td>26</td>
  </tr>

</table>

</body>
</html>
table eke peththata kotuwak අර්ථ දක්වයි.
colspan🎱 kotuwak peththtata kopamana thiru gananak dig wiya yuthuyda yanna niyama karay

🎱dig wiya yuthu thiru ganane number eka denna ona. thiru dekaknam 2 dena ona
rowspan🎱table eke kotuwak pahalata yayuthu peli ganana niyama karay

🎱pahalata ya yuthu thiru ganane numbe eka denna ona. thiru 3knam 3 denna ona
5.<caption>
5.<caption>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
<table style="width: 50%;">
  <caption>My New Table</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Ronaldo</td>
    <td>34</td>
  </tr>

  <tr>
    <td>Messi</td>
    <td>40</td>
  </tr>

  <tr>
    <td>Nemar</td>
    <td>28</td>
  </tr>

</table>

</body>
</html>
table ekata udin titile ekak denn meka yodagannawa
  • table tag ekata yatin <caption> tag eka denna ona
6.<colgroup>
6.<colgroup>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>


<table style="width: 50%;">
  <colgroup style="background-color: red;" span="2"></colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Food</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td >Nemar</td>
    <td>26</td>
    <td>Banana</td>
  </tr>
</table>


</body>
</html>
<colgroup> ටැගය, එක් එක් පේළිය සඳහා එක් එක් කොටුව සඳහා style කිරීම වෙනුවට, සම්පූර්ණ තීරු සඳහාම style යෙදීම සඳහා ප්‍රයෝජනවත් වේ.
  • meka yodaganne table eke colums style karanawanam witharay
  • <colgroup> ටැගය <table> මූලද්‍රව්‍යයක, ඕනෑම <caption> මූලද්‍රව්‍යයකට පසුව සහ ඕනෑම <thead>, <tbody>, <tfoot>, සහ <tr> මූලද්‍රව්‍යයන්ට පෙර athulath විය යුතුය.
span🎱style kalayuthu colums wala number eka denna ona

🎱number eka dena wita 2 dunnoth adala colum eke idan colums dekakata adala style eka add wenawa

🎱video link = https://www.youtube.com/watch?v=8M1h7R_4kQM
7.<col>
7.<col>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>


<table style="width: 50%;">
  <colgroup>
    <col style="background-color: red;" span="2">
    <col style="background-color: blue;" span="2">
    <col style="background-color: yellow;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Food</th>
  </tr>
  <tr>
    <td>Ronaldo</td>
    <td>34</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>40</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td >Nemar</td>
    <td>26</td>
    <td>Banana</td>
  </tr>
</table>


</body>
</html>
<col> ටැගය, එක් එක් colums wena wenama style කිරීමට yodagani
  • <col> ටැගය bawitha karanne <colgroup> tag eka athule
span🎱style kalayuthu colums wala number eka denna ona

🎱palaweni colum eke span tag ekata 2 dunnoth adala colum eke idan colums dekakata adala style eka add wenawa

🎱video eka balanna ethakota thawa hodata therenawa

🎱video link = https://www.youtube.com/watch?v=8M1h7R_4kQM
8.<thead> / 9.<tbody> / 10.<tfoot>
8.<thead> / 9.<tbody> / 10.<tfoot>
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse: collapse;

}

</style>

<body>
  
  <table style="width: 50%;">
   
   <caption>My New Table</caption>

    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Food</th>
      </tr>
    </thead>
  
    <tbody>
      <tr>
        <td>Ronaldo</td>
        <td>34</td>
        <td>Apple</td>
      </tr>
      <tr>
        <td>Messi</td>
        <td>40</td>
        <td>Orange</td>
      </tr>
    </tbody>
  
    <tfoot>
      <tr>
        <td>Nemar</td>
        <td>28</td>
        <td>Banana</td>
      </tr>
    </tfoot>
  
  </table>


</body>
</html>
loku table hadanawanam <thead> <tbody> <tfoot> yodagannawa (css walata bawitha karanna lesey me widiyata liwwama)
<thead>🎱table eke head eke tag tika liyanne meka athule.

🎱<thead> තුළ <tr> ටැග් එකක් හෝ කිහිපයක් තිබිය යුතුය.

🎱<table> eka athule ඕනෑම <caption> සහ <colgroup> පසුව, සහ ඕනෑම <tr> <tbody> සහ tfoot> පෙර meya bawitha kala yuthuya.
<tbody>🎱table eke anthargathaya athulath karanne me tag eka athule

🎱<table> eka athule ඕනෑම <caption>, <colgroup>, සහ thead> පසුව සහ <tfoot> ekakata පෙර meya bawitha kala yuthuya.
<tfoot>🎱table eke awsanama anthargathaya (tr tag eka) athulath karanne me tag eka athule

🎱<table> eka athule ඕනෑම <caption>, <colgroup>, <thead> සහ <tbody> පසුව meya bawitha kala yuthuya.

Scroll to Top