Question

I couldn’t think what should be Title of this problem, sorry!
Here is the code for a php page i am writing:

    echo '<table>';

    $conn = dbconnect();
    $query = 'SELECT * FROM validUploads';
    $result = @$conn->query($query);
    if($result)
    {   
        while(true)
        {   $data = $result->fetch_assoc();
            if(!$data)
            {   break;
            }
            else
            {   $id = $data['id'];
                $college = $data['college'];

                echo<<<__REG_DATA
                    <tr>
                        <a name="ds{$id}"></a>
                        <div id="ds{$id}">
                            <td>{$id}</td>
                            <td>{$college}</td>
                            <td><a href="download.php?dId={$id}"></a></td>
                        </div>
                    </tr>
__REG_DATA;
            }
        }
    }

echo '</table>';

When run in the browser, source code shows the printed details nicely as expected like:

<tr>
    <a name="ds1"></a>
    <div id="ds1">
    <td>1</td>
    <td>College1</td>
    <td><a href="download.php?dId=1"></a></td>
</tr>
.
.

But when i use firebug to inspect the element say at 7th row, it shows like:

<div id="ds1"> <a name="ds1"></a> </div>
<div id="ds2"> <a name="ds2"></a> </div>
<table>
<tr>
    <td>1</td>
    <td>College1</td>
    <td><a href="download.php?dId=1"></a></td>
</tr>
<tr>
    <td>2</td>
    <td>College2</td>
    <td><a href="download.php?dId=2"></a></td>
</tr>

And this is making a problem as i am tying to highlight the anchored row in the table using css3

:target
{   ....
}

And yes, when requested a url:
http://mysite.com/index.php#ds2
it scrolls to the top of the table and not to row number 2, which is in agreement with the inspect-element output!

Can somebody please explain this behaviour and how to get it corrected?

Answer 1

The generated HTML is invalid (only <td> and <th> elements may be children of <tr> elements). The browser tries to recover from the error. The result is what you see in the DOM inspector.

Always test your markup with a validator.

To get the effect you want, you should probably be doing this:

<tr id="ds1">
  <td>1</td>
  <td>College1</td>
  <td><a href="download.php?dId=1"></a></td>
</tr>