如何在表中编号列表
问题描述:
我在我的网站上有一个排行榜,我希望能够使用排名数字(1,2,3,4,5等)...如何在表中编号列表
<ol>
<li>this</li>
<li>that</li>
</ol>
...不会在工作表中
我怎样才能做到这一点?
答
恐怕编号表中的行是一个标准的html功能。您需要使用Javascript或服务器端数字生成。
编辑:
你真的应该通过这样做(按优先顺序排列):
- CSS编号(见其他答案)
- 服务器端(我不这样做PHP的 - 对不起)
-
客户端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>
答
你可以做到这一点使用CSS计数器
...不幸的是,他们是不是还没有得到广泛的支持。最好在服务器端生成数字,可以认为它们是重要的内容,并且应该使用HTML。
答
只需添加到您的CSS:
ol { list-style-type: decimal; margin-left:12px; }
的jsfiddle: http://jsfiddle.net/Mutant_Tractor/zhCzQ/2/
或者你也可以使用实现这一目标,给出以下结构的list-style-type: decimal-leading-zero;
答
方式一:
<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>
是你u se 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。
正如其他地方所指出的那样,这些并没有得到广泛的支持。并且通过使用JS/jQuery 或通过简单地使用ol
可以更好地实现。
答
至于我我使用while循环while循环(对于PHP)如果你想从数据库中获取数据。例如,
$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++ }
}
我不明白这个问题:'表'到了哪里?你可以在'之前'显示'你想要标记'看起来像'操作后'吗? – 2011-02-06 16:54:19
不要把它放在桌子上?如果它不是表格数据,那么它不应该在那里,如果它是表格数据(它听起来像是这样),然后创建一个单独的列“排名”,并删除OL。 – 2011-02-06 16:54:45
是这个问题解决您的需求?或者你需要额外的帮助/建议吗?如果问题得到解决,请考虑将其中一个答案(最有用的答案)标记为“已接受”(点击答案旁边的“✓”和表决计数下方)。 – 2011-02-28 17:51:11