html, one column auto increment numbering

Question

   <table>
        <tr>
          <td>Num</td>
          <td>Name</td>
        </tr>
       <? foreach {{ ?>
        <tr>
           <td>here this must be html auto increment number</td>
           <td>this will be from database</td>
        <tr>
       <? endforeach; ?>
   </table>

The <td>Num</td> should auto-increment the number on the page. Is it possible to do this in HTML without any JavaScript, or another simple solution?

Answer 1

You can try using counter-increment:

table {
    counter-reset: tableCount;     
}
.counterCell:before {              
    content: counter(tableCount); 
    counter-increment: tableCount; 
}

<table>
  <tr>
    <td>Num</td>
    <td>Name</td>
  </tr>
  <tr>
    <td class="counterCell"></td>
    <td>this will be from database</td>
  </tr>
  <tr>
    <td class="counterCell"></td>
    <td>this will be from database</td>
  </tr>
</table>

Support for which seems pretty good: http://caniuse.com/#feat=css-counters