Can this be done without tables?

T

Ted O'Connor

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.
 
E

Els

Ted said:
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.
Click to expand...

How about showing the current table version? Makes it easier to
visualize the desired result.
 
C

Chris F.A. Johnson

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?
Click to expand...

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
Click to expand...

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.
Click to expand...

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>
 
M

mbstevens

How about showing the current table version? Makes it easier to
visualize the desired result.
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Can anyone please help? HTML - two tables applying different styles 4
Bootstrap contact form not working 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Sort by number of characters 1
SendGrid email issue in responsive Gmail 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0

Members online

No members online now.
Total: 167 (members: 1, guests: 166)
Robots: 329

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top