HTML Table Headers

Tabel Header <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 widiyata

abbr	meka 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

Vertical Table Headers

Vertical Table Headers

<html>
<style>

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

}

</style>

<body>
  
  <table style="width: 50%;">

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

</body>
</html>

table eke header eka peththata thiyena table ekak hadanne me widiyata