how to make irregular table cells?

[skolya]

I've got long tables two cells per row, one with an image and the other with corresponding text, that alternate in each row, like so:

<tr>
<td>IMAGE</td>
<td>TEXT</td>
</tr>
<tr>
<td>TEXT</td>
<td>IMAGE</td>
</tr>

The problem: The images are all different sizes. When I have the image on the right, the text on the left aligns just fine, right up against the image. But when I have the image on the left, there's a big gap between the edge of the image and the beginning of the text that looks pretty stupid. How can I force the right-sided text to line up flush against the left-sided image? I've tried using different width attributes for the individual cells but that doesn't change it a bit.
?????
Tnx,
Skolya
www.jerizjoolz.com/earrings.html
or
www.jerizjoolz.com/bracelets.html

[pyro]

I'm not sure what you're looking for...This?

<tr>
<td align="right">IMAGE</td>
<td align="left">TEXT</td>
</tr>
<tr>
<td align="right">TEXT</td>
<td align="left">IMAGE</td>
</tr>

[skolya]

Not exactly--here's what I want it to look like:
----------
| IMG | This is a really ugly necklace that I
| | wouldn't expect you to pay 2 cents for!
| | Price: $5,677.00
----------

-------
On the other hand, here's a truly rare and | IMG |
wonderful 1920s Eisenberg Original that's | |
been appraised at $1,365.00! | |
Price: $1.25 | |
| |
-------

In other words, each row the same length with
equal margins on the page, but adjustable
individual cells. First I tried pixel widths, then
percentage widths--no luck. Got
any better ideas?
PS: How come ASCII art doesn't work here? Let me try something else:

:) :) This is how the right-sided text should
:D :D look....

And this is how the left-sided text :( :(
should look ;) ;)

That doesn't work either; this is almost as frustrating as my pages! Let me go try your suggestions anyway.
Tnx,
Skolya

[pyro]

Post a link, that should work fine.

[skolya]

www.jerizjoolz.com/earrings.html
www.jerizjoolz.com/bracelets.html
www.jerizjoolz.com/necklaces.html (which isn't up yet but it's the worst, so I'm going to go do it right now)
tnx,
skolya

[skolya]

necklaces is now up too.

[skolya]

I'm going to upload a text file of the ASCII art, which makes it all very clear.
skolya

[pyro]

What you will need to do is nest tables, something like this...

<table width="500" border=1>
<tr>
<td>
<table>
<tr>
<td align="right" width="100">IMAGE</td>
<td align="left" width="400">TEXT</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td align="right" width="400">TEXT</td>
<td align="left" width="100">IMAGE</td>
</tr>
</table>
</td>
</tr>
</table>It's not pretty, but...

[Stefan]

Originally posted by skolya
PS: How come ASCII art doesn't work here?

This is a HTML board, and HTML browsers are supposed to cut away extra whitespace. Try using [ code] to keep the whitespece in


----------
| IMG | This is a really ugly necklace that I
| | wouldn't expect you to pay 2 cents for!
| | Price: $5,677.00
----------


Anyway, this is how I would do your page.

<div class="boxleft">
<img>
Textdescription
</div>

<div class="boxright">
<img>
Textdescription
</div>

<div class="boxleft">
<img>
Textdescription
</div>

with this in the headsection
<style type="text/css">
body {text-align:center;}
.boxleft, .boxright {clear:both; width: 400px; margin:20px auto; text-align:left;}
.boxleft img {float:left}
.boxright img {float:right}
</style>