|
|
|
|
|
|||||||
 |
HTML - Can this be done without tables? |
|
|
Thread Tools | Search this Thread |
08-18-2006, 08:17 PM
|
#1 |
Can this be done without tables?
I have a layout that uses a bunch of nested tables and it takes forever
to render when there is a lot of data. Is there any way to do the following with an identical visual result without tables? <table width="100%"> <tr> <td><img ... /></td> <td width="100%"> <table><tr><td width="100%">Text 1</td><td><img ..../></td></tr></table> </td> </tr> ... (have 100's of these TRs) </table> Layout Requirements: - all first images must align vertically and be left justified - all second images must align vertically and be completely right justified - all contents of outer TR must be inline (no line breaks) - TD with text must take up as much horizontal space as possible - need some element that contains just the text and 2nd image (like the inner table does now) When I try to switch to just DIVs I can't get 2nd image to right align and text element to take up all available horizontal space. This must work in IE and FF. Ted O'Connor |
|
|
|
08-18-2006, 08:55 PM
|
#2 |
|
Posts: n/a
|
Re: Can this be done without tables?
Ted O'Connor wrote:
> I have a layout that uses a bunch of nested tables and it takes forever > to render when there is a lot of data. Is there any way to do the > following with an identical visual result without tables? > > <table width="100%"> > <tr> > <td><img ... /></td> > <td width="100%"> > <table><tr><td width="100%">Text 1</td><td><img > .../></td></tr></table> > </td> > </tr> > ... (have 100's of these TRs) > </table> > > Layout Requirements: > - all first images must align vertically and be left justified > - all second images must align vertically and be completely right > justified > - all contents of outer TR must be inline (no line breaks) > - TD with text must take up as much horizontal space as possible > - need some element that contains just the text and 2nd image (like > the inner table does now) > > When I try to switch to just DIVs I can't get 2nd image to right align > and text element to take up all available horizontal space. This must > work in IE and FF. How about showing the current table version? Makes it easier to visualize the desired result. -- Els http://locusmeus.com/ Now playing: De Dijk - Onderuit |
|
|
|
08-18-2006, 08:55 PM
|
#3 |
|
Posts: n/a
|
Re: Can this be done without tables?
On 2006-08-18, Ted O'Connor wrote:
> I have a layout that uses a bunch of nested tables and it takes forever > to render when there is a lot of data. Is there any way to do the > following with an identical visual result without tables? There is no such thing as 'identical visual result' on all browsers, with ot without tables. ><table width="100%"> > <tr> > <td><img ... /></td> > <td width="100%"> > <table><tr><td width="100%">Text 1</td><td><img You want a cell to take up all the available width, and then you want to put another one beside it? > .../></td></tr></table> > </td> > </tr> > ... (have 100's of these TRs) ></table> > > Layout Requirements: > - all first images must align vertically and be left justified > - all second images must align vertically and be completely right > justified > - all contents of outer TR must be inline (no line breaks) > - TD with text must take up as much horizontal space as possible > - need some element that contains just the text and 2nd image (like > the inner table does now) > > When I try to switch to just DIVs I can't get 2nd image to right align > and text element to take up all available horizontal space. This must > work in IE and FF. A URL showing exactly what you mean would be helpful. Do you mean something like this: <html><head><title></title> <style type="text/css"> .one { float: left; } .two { float: right; } div { clear: both; } </style> </head> <body> <div> <img class="one" src="a.jpg" alt=""> <img class="two" src="b.jpg" alt=""> This is text in between. </div> <div> <img class="one" src="c.jpg" alt=""> <img class="two" src="d.jpg" alt=""> This is text in between. </div> </body> -- Chris F.A. Johnson <http://cfaj.freeshell.org> ================================================== ================= Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) |
|
|
|
08-18-2006, 09:07 PM
|
#4 |
|
Posts: n/a
|
Re: Can this be done without tables?
On Fri, 18 Aug 2006 21:55:01 +0200, Els wrote:
> How about showing the current table version? Makes it easier to > visualize the desired result. Yes, and the tables need cleaning up first. To understand the kind of table the op is trying to replace, we need a good table to start with. If you re-indent your markup in a rational way, you can immediately see that the table just doesn't make any kind of sense. <table width="100%"> <tr> <td><img ... /></td> <td width="100%"> <table> <tr> <td width="100%">Text 1</td> <td><img .../></td> </tr> </table> </td> </tr> ... (have 100's of these TRs) </table> So you have a row with one td set to 100% of the table width (which would better have been done in CSS, since width for a td is deprecated in most newer doc types), and another td that needs to display an image on the same row. Also, width and height attributes of any image (in a td or not in one) should be specified. Op also needs to switch to a strict doc type and close every tag, so that both you and the browser can keep track of where things are supposed to be. <table> <tr> <td> </td> </tr> </table> |
|
|
