Stop table from going longer in HTML

Question

I have the following tables. I wanted it so when I make more boxes table. If there is no more room on in the table go below the other ones and to keep making the table long.

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box1</td>
        </tr>
      </table>
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

You should use css styles for layouts, not tables. Tables are for displaying rows of data, not for making up for layouts.

Consider this:

<style type="text/css">

    .wrapper
    {
        padding:10px;
        overflow:auto;
        background-color:#888;
    }

    #box
    {
        float:left;
        width:150px;
        padding:10px;
        background-color:#aaa;
    }

</style>

<div class="wrapper">

    <div id="box">Box 1</div>

    <div id="box">Box 2</div>

    <div id="box">Box 3</div>

    <div style="clear:both;"></div>

</div>

Just copy this code to html file and play with browser's window to see how it works.

Answer 2

Your question is hard to read but I'll give it a go.

I presume you have a main table that you do not want to be higher than 179 pixels. Inside this table you place boxes that shouldn't make the table higher than 179 pixels even if there more than 4 boxes. To solve this you would need the style overflow: hidden to stop the table from growing too big. Unfortunately this doesn't work for table cells so you would need to add a DIV element with an overflow:hidden style inside your table cell.

The solution with an extra DIV element inside the table looks as follows:

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <div style="height: 179px; overflow: hidden;" >
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box1</td>
          </tr>
        </table>
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box2</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

Of course, as niteriter points out you would be better off using DIV tags for your layouts. In your situation this would also result in much cleaner HTML/CSS code.

<style>
div.wrapper { height: 179px; width: 413px; overflow: hidden; }
div.box { float: left; height: 89px; width: 137px; }
</style>
<div class="wrapper" >
  <div class="box" > Box1 </div>
  <div class="box" > Box2 </div>
  <div class="box" > Box3 </div>
</div>