/    Sign up×
Community /Pin to ProfileBookmark

how to make irregular table cells?

Copy linkTweet thisAlerts:
Feb 10.2003

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
[url]www.jerizjoolz.com/earrings.html[/url]
or
[url]www.jerizjoolz.com/bracelets.html[/url]

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroFeb 10.2003 — I'm not sure what you're looking for...This?

&lt;tr&gt;
&lt;td align="right"&gt;IMAGE&lt;/td&gt;
&lt;td align="left"&gt;TEXT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;TEXT&lt;/td&gt;
&lt;td align="left"&gt;IMAGE&lt;/td&gt;
&lt;/tr&gt;
Copy linkTweet thisAlerts:
@skolyaauthorFeb 10.2003 — 

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

? ? 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
Copy linkTweet thisAlerts:
@pyroFeb 10.2003 — Post a link, that should work fine.
Copy linkTweet thisAlerts:
@skolyaauthorFeb 10.2003 — 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
Copy linkTweet thisAlerts:
@skolyaauthorFeb 10.2003 — necklaces is now up too.
Copy linkTweet thisAlerts:
@skolyaauthorFeb 10.2003 — I'm going to upload a text file of the ASCII art, which makes it all very clear.

skolya

[upl-file uuid=ea531f02-894e-4d72-8d3f-0343f743acd7 size=919B]asciiartpage.txt[/upl-file]
Copy linkTweet thisAlerts:
@pyroFeb 11.2003 — What you will need to do is nest tables, something like this...

&lt;table width="500" border=1&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td align="right" width="100"&gt;IMAGE&lt;/td&gt;
&lt;td align="left" width="400"&gt;TEXT&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td align="right" width="400"&gt;TEXT&lt;/td&gt;
&lt;td align="left" width="100"&gt;IMAGE&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;It's not pretty, but...
Copy linkTweet thisAlerts:
@StefanFeb 11.2003 — [i]Originally posted by skolya [/i]

PS: How come ASCII art doesn't work here?
[/QUOTE]
This is a HTML board, and HTML browsers are supposed to cut away extra whitespace. Try using [ code] to keep the whitespece in


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


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>

×

Success!

Help @skolya spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...