HTML align table rows on top

Question

Hello,

I have an HTML table. It looks as follows:

<table>
    <tr>
        <td>Content one</td>
        <td rowspan="2"> Very long content right</td>
    </tr>
    <tr>
        <td>Content two</td>
    </tr>
</table>

As you see, I have some very long content on the right side of the table, actually, it is so long that it does not fit into what height is given by the table rows, and so the table gets higher, and by doing that, the contents one and two are no longer at the top of the table, but distribute themselves along the whole height. How can I stop them from doing this?

EDIT: What I need is not the content to be aligned at the top, but the actual rows themselves.

Answer 1

<td valign='top' >

Answer 2

May be you use the div for internal scroll option without disturbing the page height.

Answer 3

Styling is normally to be done with CSS. You need to set the td element's CSS vertical-align property to top.

td {
    vertical-align: top;
}

Answer 4

I decided I just do it that way:

<table>
    <tr valign="top">
        <td>
            <table>
                <tr><td>Content one</td></tr>
                <tr><td>Content two</td></tr>
            </table>
        </td>
        <td> Very long content right</td>
    </tr>
</table>