Multi Row Tables Always Vertically Center Content

Question

I'v basically got a table with 2 rows and it looks like this:

---------
|   |   |
|   |   |
|   |   |
|--------

My problem is that the second row auto centers vertically like this:

|hey|   |
|hey|hey|
|hey|   |
|--------

How so right now I'm adding paragraphs until it just becomes the size of the other:

|hey|hey|
|hey|   |
|hey|   |
|--------

How can I do this correctly using CSS?

Thanks

Answer 1

Use Vertical allign: Top

Answer 2

I think this is what you're looking for:

<table>
  <tr>
    <td>Some content<br />More content<br />More content</td>
    <td style="vertical-align: top;">Some different content</td>
  </tr>
</table>

However, if you want all table cells to align their content to the top, you should not define the style inline, but rather add a

td 
{
  vertical-align: top;
}

to your CSS stylesheet.