How to make a number list in a Table

I have a leaderboard on my website, and I want to be able to have rank numbers (1, 2, 开发者_Python百科3, 4, 5, etc) as using...

<ol>
<li>this</li>
<li>that</li>
</ol>

...doesn't work in a table

How can I do this?

One way of achieving this, given the following structure:

<table>
    <thead>
        <tr>
            <th>Rank:</th>
            <th>Name:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="rank"><span></span></td>
            <td>Him</td>
        </tr>
        <tr>
            <td class="rank"><span></span></td>
            <td>Her</td>
        </tr>
    </tbody>
</table>

Is to use CSS-counters:

table {
    border: 1px solid #ccc;
    empty-cells: show;
    width: 40%;
    counter-reset: ranking;
}

th {
    border-bottom: 2px solid #ccc;
    min-width: 4em;
    width: 50%;
    max-width: 6em;
}
tbody tr {
    counter-increment: ranking;
}
td {
    border-bottom: 1px solid #ccc;
}
td.rank > span:before {
    content: counter(ranking);
}

And a JS Fiddle demo.

As noted elsewhere, though, these are not widely supported. And would be better-implemented either using JS/jQuery or by simply using an ol.

You could do this using CSS counters

...unfortunately they're not that widely supported yet. It's best to generate the numbers on the server side, it could be argued that they are significant content and should be in HTML anyways.

Simply add this to your CSS:

ol {
list-style-type: decimal;
margin-left:12px;
}

JSFiddle: http://jsfiddle.net/Mutant_Tractor/zhCzQ/2/

Or you could also use list-style-type: decimal-leading-zero;

I'm afraid numbering rows in a table is a standard html feature. You'll need to resort to Javascript or server-side generation of the numbers.

Edit:

You really should do this via (in order of preference):

1. CSS numbering (see other answers)
2. Server-side (I don't do php - sorry)

3. client-side javascript should be a last resort:

       <table id="numbered">
         <tr>
           <td>a</td>
           <td>b</td>
         </tr>
         <tr>
           <td>c</td>
           <td>d</td>
         </tr>
         <tr>
           <td>e</td>
           <td>f</td>
         </tr>
       </table>
   
       <script type="text/javascript">
       var table=document.getElementById('numbered');
       var tr=table.getElementsByTagName('tr');
       for(var i=0; i<tr.length; i++)
       {
           var td=tr[i].getElementsByTagName('td');
           td[0].insertBefore(document.createTextNode(i+1+'. '), td[0].firstChild);
       }
       </script>
   

As for me I am using while loop in a while loop (for php) If you wanted to get data from database. Ex.

        $query = mysql_query("SELECT * FROM table);
        $getnumbers = mysql_num_rows($query);

    $x=1; //initialize your number
  while($x<=$getnumbers)
    {
          while($rows = mysql_fetch_assoc($query))
          {

            echo $x;echo $row["row1"];echo "<br>";
          $x++ }
    }