Sharepoint 2010 vs. HTML tables, having issues getting tables to wrap Options

[nowords]

Morning all- In need of some assistance. I'm working on updating a SharePoint 2010 site using HTML. the goal is simply to create tables with three rows; the tricky part for me comes in when I try to create additional tables like the first side by side; I can only get them to stack vertically. Below is the HTML i'm working with, any suggestions would be GREATLY appreciated.

<div 1st column>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
<div 2nd column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
<div 3rd column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>
<div 4th column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>
<div 5th column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>

[pandy]

Float the columns left.

But first all of your tables are broken and there are some other significant errors too.

The first two DIVS lack closing tags. Add them.

You use nested tables, i.e. each of your "visible tables" are made up of two tables. You only close one of them. You need to close both. Each section ends like this - those that have a closing DIV tag that is.

CODE

</tr>
</tbody>
</table>
</div>

It should be like this.

CODE

</tr>
</tbody>
</table>
</tbody>
</table>
</div>

Your start tags for DIV look like this.

CODE

<div 1st column>

You can't write comments like "1st column" directly in a tag like that. You must write them outside the tag in a real comment.

http://htmlhelp.com/faq/html/basics.html#html-comments

So remove those and instead add a class. You can call it anything, lets say 'col'.

CODE

<div class="col">

Then in your style sheet add this line.

CODE

.col   { float: left }

Done.

In fact, I don't see why nested tables are needed. What we see on the page is one table with three single cell rows. Why not write it like that?

I'm assuming you want to add more tables to each column? Because if you don't the DIVs aren't needed either. You could remove them and use the class with the outer tables instead or the single tables, whatever way you go.