I want to have multiple tables side by side but have them wrap on the
next line if the users browser (or screen) isn't wide enough.  In
HTML, images behave this way.  If I have the following HTML:

<img src="blank.gif" height=100 width=100>
<img src="blank.gif" height=100 width=100>
<img src="blank.gif" height=100 width=100>

The images will display side by side.  If you reduce the width of the
browser to less than 300 pixels the image on the end will wrap and
show on the next line.  I want to do this with tables instead of
images.  The following code:

<table border=1 width=100 height=100><tr><td>hello</td></tr></table>
<table border=1 width=100 height=100><tr><td>hello</td></tr></table>
<table border=1 width=100 height=100><tr><td>hello</td></tr></table>

displays the tables one after another vertically.  Setting align=left
on the first will align the second to the right of it, but it won't
wrap if the screen isn't big enough.

I want to know how to do this with HTML or CSS so the tables will wrap
as the images do.  Also, I really only need it to work on IE 5.5 or
better on windows.

Hello Davious,

HTML tables are block-level elements, that's why they cause a
line-break. To prevent this, redefine their display property in CSS
using:

    table
    {
        display: inline;
    }

Or, as inline style in HTML:

    <table style="display: inline;" border=1 ...>...</table> 


For more information on the display property, please see:

W3C CSS2 Specification - The 'display' property
http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display


Hope that helps!

---

Clarification of Answer by j_philipp-ga on 24 Jul 2002 18:16 PDT

Hello Davious,

Googlebrain just told me above approach does not work (it does in IE6
and other browsers, but maybe not in IE5.5). I will test with IE5.5
tomorrow, but the following then should be more helpful:

<table style="float: left;" border=1 width=100
height=100><tr><td>hello</td></tr></table>
<table style="float: left;" border=1 width=100
height=100><tr><td>hello</td></tr></table>
<table style="float: left;" border=1 width=100
height=100><tr><td>hello</td></tr></table>
<div style="clear: both;">&nbsp;</div>


Thanks to Googlebrain, and I hope this is it!

---

Clarification of Answer by j_philipp-ga on 25 Jul 2002 03:31 PDT

Hello Davious,

To follow up on my above remark, I just tested in Win IE5.5. The first
approach does work. (The second approach works too.)

Hope this helps.

Works perfectly in IE 5.5 and 6.0, just as requested.  Having an
alternate method is useful too.  Thanks very much for the fast and
accurate answer.

Well, after fooling with this a bit, I'm going to go on a limb and say
this isn't something that can be accomplished in native HTML. The
Table commands all seem to be based on the assumption that they will
have the entire width of the screen to play with. The table gets
calculated first, then everyone else moves to accomidate. As I'm sure
you already figured out, two (or more) tables wanting to share the
same line just don't play nicely.

Perhaps there's some Java out there that can help you, but that's
where I get out of my depth.

Good luck!
googlebrain-ga

A large list of HTML resources can be found here:
http://www.weijers.net/guide/resources.html. Not all of the links
work, but you might be able to find something.