CODEWITHSUNDEEP
phphtmlhtml-tablerow
user725913
user725913

Reputation:

Label each row of an HTML table numerically (PHP + MYSQL)

All I want is for the first column of each row in my table to display the number of the current row. For example, please see the following table.

Column Header 1    Column Header 2
1                     some data
2                     more data
3                     some more data
4                     even more data

I am familiar with JavaScript (I will most likely understand any JS script posted), CSS, and HTML. I am curious as to whether or not I will have to write a JS function to do this, or if I can somehow just create a variable and increase its index by ' 1 ' each time.

I look forward to your responses!

Upvotes: 2

Views: 1474

Answers (4)

kisp
kisp

Reputation: 6552

Try CSS autonumbering

http://www.w3.org/TR/CSS2/generate.html#counters

This is the client side solution. Use it if you can not do it on server side.

Upvotes: 1

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

If you're using PHP, try to get an array of strings for data you want to output:

$data = array('here', 'is', 'some', 'data');

// Avoid printing table if there is no data
if (count($data) > 0) {
    echo '<table><tr><td>Column Header 1</td><td>Column Header 2</td></tr>';
    for ($i = 0; $i < count($data); $i++) {
        echo '<tr><td>', $i + 1, '</td><td>', $data[$i], '</td></tr>';
    }
    echo '</table>';
}

Upvotes: 4

Spycho
Spycho

Reputation: 7788

Based on kisp's approach of CSS numbering, I created a prototype which appears to do almost what you are looking for. The numbering isn't in a separate collumn, it's in the "before" pseudo-element.

Upvotes: 0

Spycho
Spycho

Reputation: 7788

Does it have to be a table, or could you use an ol?

<ol>
    <li>some data</li>
    <li>more data</li>
    <li>some more data</li>
    <li>even more data</li>
</ol>

Upvotes: 0

Related Questions