Google Answers Logo
View Question
 
Q: HTML: How do I make multiple tables wrap on a row ( Answered 5 out of 5 stars,   2 Comments )
Question  
Subject: HTML: How do I make multiple tables wrap on a row
Category: Computers > Internet
Asked by: davious-ga
List Price: $12.00
Posted: 24 Jul 2002 16:14 PDT
Expires: 23 Aug 2002 16:14 PDT
Question ID: 44778
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.
Answer  
Subject: Re: HTML: How do I make multiple tables wrap on a row
Answered By: j_philipp-ga on 24 Jul 2002 17:17 PDT
Rated:5 out of 5 stars
 
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.
davious-ga rated this answer:5 out of 5 stars
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.

Comments  
Subject: Re: HTML: How do I make multiple tables wrap on a row
From: googlebrain-ga on 24 Jul 2002 16:54 PDT
 
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
Subject: Re: HTML: How do I make multiple tables wrap on a row
From: deadlychiapet-ga on 24 Jul 2002 17:05 PDT
 
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.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy