How to change default value in counter-increment?

I think the code is counting the "Rank" header as a row and assigning 1 to it. How can I change the first number of the counter-increment? I would like the table to start from 0 so that the "Rank" header is assigned 0 and the next row is 1, and so on and so forth.

http://oi59.tinypic.com/5bsabc.jpg

CSS File

tr.odd {background-color: #FFFFFF}
tr.even {background-color: #F2F2F2}

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    text-align: center;
}

JSP File

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/egovframework/leaderboard.css'/>" />
<form id="listForm" name="listForm" method="post">
    <input type="hidden" name="id"/>
</form>
<h1 style="text-align:center;font-size:56px; font-family: Mistral;margin-top:-45px;">Leaderboard</h1>   
<body style="font-family:Arial;font-size:14px;text-align:center;color:#000000;">
    <div id="table">
    <table bordercolor="#FFFFFF" cellpadding="12px" cellspacing="2px" align="center" style="margin-top:-21px;">
        <colgroup>
        <col style="width:50px">
        <col style="width:500px">
        <col style="width:150px">
        <col style="width:100px">
        </colgroup>
        <tr>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:50px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Rank</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Name</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:150px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Points</th>
            <th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Wins</th>
        </tr>
        <c:forEach var="item" items="${leaderboard}" varStatus="loopStatus">
            <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                </td>
                <td align="left" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000; cursor:pointer;" onclick="javascript:selectPlayer('${item.id}');">
                <c:out value="${item.playersLastName}"/>&#44;&nbsp;<c:out value="${item.playersFirstName}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersPoints}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersWins}"/>
                &nbsp;</td>
            </tr>
        </c:forEach>
    </table>
        <br/>
        <br/>
        <br/>
    </div>   
</body>
</html>

Solution

CSS counter's default value is always 0 and that's not the problem in your case. The problem is that you are incrementing the value to 1 when the first tr is encountered itself.

There are multiple ways in which you can solve this:

Assign the initial value of the counter as -1 during counter-reset property. This means that when the first tr is encountered the counter value increments from -1 to 0 and so it looks as though the header row is not numbered.

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber -1;
}
table tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <tr>
    <th>Rank</th>
    <th>Name</th>
    <th>Points</th>
    <th>Wins</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Increment counter value only from the second tr that is encountered. This can be done using the + (adjacent sibling selector) or ~ (general sibling selector) or nth-child(n+2). Using one of these would mean the selector would be matched only by the second and subsequent tr within the table.

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber;
}
table tr + tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <tr>
    <th>Rank</th>
    <th>Name</th>
    <th>Points</th>
    <th>Wins</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Best and recommended solution: Wrap the headers inside a thead, the contents inside tbody and modify the selector within which the counter is incremented. This is recommended because it gives a proper structure to the table and doesn't look hackish.

tr.odd {
  background-color: #FFFFFF
}
tr.even {
  background-color: #F2F2F2
}
table {
  counter-reset: rowNumber;
}
table tbody tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Points</th>
      <th>Wins</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>