I am trying to align 3 tables side-by-side. It doesn’t work when I put a table inside another table because the middle table has a lot of content which then makes my first table vertically too big and doesn’t look right.
What I am trying to do is make a simple page where I have my first table with 3 rows down. My 2nd table is just a 1 column, 1 row layout for content and my 3rd table is also 1 column and 1 row. I need these tables to be side-by-side.
I have searched the web and cannot find anyone that can do this. When I add the tables they stack on top of each other. Can someone help me with getting my 3 tables to be side-by-side?
<table width="100" border="1">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
If this needs CSS coding can you provide this as well, it would be much appreciated, I’m still learning advanced CSS and HTML.
Add style=”float:left;” to each table. eg: