テーブルで番号リストを作成するには

Question

私は自分のウェブサイトにリーダーボードを持っていますが、私は使用しているランク番号（1,2,3,4,5など）を持っていたいと思います...

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

...私はこれをどのように行うことができますテーブルに

動作しませんか？

Answer 1

テーブル内の行番号は標準のhtml機能です。あなたは、Javascriptやサーバー側の数字の生成に頼る必要があります。

編集：

1. CSSの番号（他の回答を参照してください）
2. サーバー側（私はしません。

   あなたは本当に（優先順で）を介してこれを行う必要がありますPHP - 申し訳ありません）

3. クライアント側のJavaScriptは、最後の手段でなければなりません：

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

Answer 2

あなたは、残念ながら、彼らはそれが広くまだサポートされていませんね... CSSカウンター

を使用してこれを行うことができます。サーバー側で数値を生成するのが最善です。重要なコンテンツであり、とにかくHTMLに含める必要があると主張できます。

Answer 3

単にあなたのCSSに以下を追加：

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

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

それとも、また次の構造与えられ、これを達成するためのlist-style-type: decimal-leading-zero;

Answer 4

一つの方法、使用することができます

を

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

CSSカウンタ：

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); 
} 

そしてJS Fiddle demoです。

ただし、他のところで述べたように、これらは広くサポートされていません。 JS/jQuery またはを使用して、単にolを使用すると、より良い実装が実現します。

Answer 5

私はwhileループを使用しています（phpの場合）データベースからデータを取得したい場合。 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++ } 
    }