CODEWITHSUNDEEP
htmlcss
user3979986
user3979986

Reputation: 203

Align two tables horizontally HTML/CSS

I have two tables that align horizontally using this syntax:

<table width=100%>
  <tr>
    <td><table1 code goes here>
    </td>
    <td><table2 code goes here>
    </td>
  </tr>
</table>

This is all fine and dandy and they align if the tables have the same number of data rows. But if one has fewer than the other, then they are still aligned in the same positions, but the other table is shrunk, so they look like:

header
data
data
data    header
data    data
data    data
data    data
data
data

Is there any way to getthem to align from the top down, as well?

Like

header    header
data      data
data      data
data      data
data
data
data
data
data

How can I fix this?

Upvotes: 4

Views: 15765

Answers (3)

Dinesh Kumar Agarwal
Dinesh Kumar Agarwal

Reputation: 1

Adding a <td valign="top"> will solve your problem for sure. This tag vertically aligns the contents from the top making it stick to the top line.

Similarly you can also use some other values for valign as per your needs. They are:

  1. baseline
  2. middle
  3. bottom

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172618

You need to use display: inline-block; for each table if using CSS

Else you can add <td valign="top"> for both tables in HTML

Upvotes: 0

manosim
manosim

Reputation: 3690

You can use valign = top.

<table width=100%> 
  <tr> 
    <td valign="top"><table1 code goes here>
    </td>
    <td valign="top"><table2 code goes here>
    </td>
  </tr>
</table>

Upvotes: 14

Related Questions