Question

Here is my HTML:

<table>
    <tr>
        <td><img src="blah.png" width="80"> </td>
        <td> <p>This is ment to be a comment section part</td>
    </tr>
</table>

This is meant to be a comment engine kind of a thing.

Basically, I want a table with a profile image first on the left. Then I want the username at the very top of the TD, then the comment below the name without the name pushing it forward.
Thanks!

Answer 1

I’m not quite clear what you’re asking. Does the following HTML not achieve what you’re trying to do?

<table>
    <tr>
        <td><img src="blah.png" width="80"></td>
        <td>
            <p>Username</p>
            <p>This is ment to be a comment section part</p>
        </td>
    </tr>
</table>

---

Edit:

Facebook’s comments look like this:

I can see two differences between that and the code I posted above:

1. Facebook has the username aligned with the top of the image
2. Facebook has the username on the same line as the comment.

Issue 1 can be taken care of by assigning vertical-align: top to all the cells in the table. Issue 2 could be handled with display: run-in, but that’s not supported in Firefox or IE 7 and 6, so you’re better off just having the username and comment be inline elements:

<table class="comment">
    <tr>
        <td><img src="blah.png" width="80" height="80"></td>
        <td>
            <strong>Username</strong>: <span>This is ment to be a comment section part</span>
        </td>
    </tr>
</table>

See http://jsfiddle.net/hK85e/2/