Tricky Table Usage

[Liam Gibbs]

Hello everyone,

I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at
http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).

What I need is a table that with two sides: the left is headers, and
the right is information, like so:

Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.

However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?

I've seen this done on other sites, but their code is so disorganized
that reading it for clues gives me headaches.

[Jonathan N. Little]

Re: Tricky Table Usage

Liam Gibbs wrote:

Hello everyone,
>
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at
http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).

You cannot do it with a table, the inset into "reviews" cell. Shouldn't
use a table anyway...can be done with divs and floated image.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[dorayme]

Re: Tricky Table Usage

In article
<5bd91fd9-98fa-44e7-bc3c-83dc97f3abfe@a1 g2000hsb.google groups.com>,
Liam Gibbs <liamgibbs@symp atico.cawrote:

I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at
http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
>
What I need is a table that with two sides: the left is headers, and
the right is information, like so:
>
Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.
>
However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?

Will this do you? Shout if you need anything in it explained:

<http://dorayme.890m.co m/alt/productTableWit hImage.html>

--
dorayme

[Liam Gibbs]

Re: Tricky Table Usage

Will this do you? Shout if you need anything in it explained:

>
<http://dorayme.890m.co m/alt/productTableWit hImage.html>

Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.

>You cannot do it with a table, the inset into "reviews" cell. Shouldn't
>use a table anyway...can be done with divs and floated image.

Okay. How do you do it in divs?

[Ben Bacarisse]

Re: Tricky Table Usage

Liam Gibbs <liamgibbs@symp atico.cawrites:

>Will this do you? Shout if you need anything in it explained:
>>
><http://dorayme.890m.co m/alt/productTableWit hImage.html>

>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>

>>You cannot do it with a table, the inset into "reviews" cell. Shouldn't
>>use a table anyway...can be done with divs and floated image.

>
Okay. How do you do it in divs?

http://www.bsb.me.uk/testing/products.php might be a starting point.
Most of the issues will be about browser support for CSS so
comp.infosystem s.www.authoring.stylesheets is probably a better place
(unless you have questions about the markup, of course).

--
Ben.

[Jonathan N. Little]

Re: Tricky Table Usage

Liam Gibbs wrote:

>Will this do you? Shout if you need anything in it explained:
>>
><http://dorayme.890m.co m/alt/productTableWit hImage.html>

>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>

>You cannot do it with a table, the inset into "reviews" cell. Shouldn't
>use a table anyway...can be done with divs and floated image.

>
Okay. How do you do it in divs?

Here are two examples

http://www.littleworksstudio.com/temp/usenet/alt.html.20080609.html

Semantically I prefer the second, but current Firefox has a problem with
lists wrapping around a float, but it is fixed in FF3 that is soon to
be release.

You cannot have the grid lines for each section will out a bit of fuss.
You could use HRs after each sub DIV in the first example if you must
have horizontal lines.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[dorayme]

Re: Tricky Table Usage

In article
<8866337c-637b-47c9-a558-64cf9150d207@l6 4g2000hse.googl egroups.com>,
Liam Gibbs <liamgibbs@symp atico.cawrote:

Will this do you? Shout if you need anything in it explained:

<http://dorayme.890m.co m/alt/productTableWit hImage.html>

>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.

You want that the table wraps underneath the image where there is room?
I must have been thinking to save you space by messing about with the
shrink wrapping power of floats.

Come to think of it, I guess my above is no better than a
straightforward extra column with the image aligned to the top.

This may not be so possible with a table given you want the same layout
for all such tables with quite different sized images.

Frankly, I would simply design to bypass the problem. Take a look at the
same url and see what you think now.

<http://dorayme.890m.co m/alt/productTableWit hImage.html>

--
dorayme

[Liam Gibbs]

Re: Tricky Table Usage

Thanks, everyone. Finally got the problem solved by getting tips from
every example. Thanks!

[Bergamot]

Re: Tricky Table Usage

Jonathan N. Little wrote:

Liam Gibbs wrote:

>>
>A picture of the layout I need can be found at
>http://www.altmarvel.net/Liam/WHATINEED.jpg

>
Shouldn't
use a table anyway...

Why not? It looks like tabular data to me.

--
Berg
now killing all posts from google groups

[VisualVision]

Re: Tricky Table Usage

why not to nest tables ? You can insert a table within a table cell, do
you know?
e.g.

cell1 cell2 cell3

cell1 -table with N rows
cell2 your image
cell3 -table with M rows

Hello everyone,
>
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at
http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
>
What I need is a table that with two sides: the left is headers, and
the right is information, like so:
>
Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.
>
However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?
>
I've seen this done on other sites, but their code is so disorganized
that reading it for clues gives me headaches.

--

ø¤º°`°º¤ø,¸¸,ø¤ º°`°º¤ø,¸¸,ø¤º° `°º¤ø,¸¸,ø¤º°`° º¤ø,¸¸,ø¤º°`°º¤ ø,¸
http://www.HyperPublish.com Catalogs, CD and sites with 1 tool
http://www.EasyWebEditor.com Create a nice Web site with ease
http://www.1site.info A professional Website quickly
http://www.EBooksWriter.com Discover the artist inside you!
http://www.PaperKiller.com Manuals, HTMLHelp, CHM quickly
http://www.CdFrontEnd.com Create autorun CD presentations

Visual Vision - http://visualvision.com http://visualvision.it
leader in hypertext authoring [ASP members, ESC members]

[Jonathan N. Little]

Re: Tricky Table Usage

VisualVision wrote:

why not to nest tables ? You can insert a table within a table cell, do
you know?
e.g.
>
cell1 cell2 cell3
>
cell1 -table with N rows
cell2 your image
cell3 -table with M rows

You missed the point, OP said that the number of rows that the image may
span could vary. Nested tables is no better than spanned rows, just messier!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[dorayme]

Re: Tricky Table Usage

In article <4471c$48506fe4 $40cba7a3$2025@ NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:

OP said that the number of rows that the image may
span could vary.

If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.

--
dorayme

[Jonathan N. Little]

Re: Tricky Table Usage

dorayme wrote:

In article <4471c$48506fe4 $40cba7a3$2025@ NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:
>

>OP said that the number of rows that the image may
>span could vary.

>
If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.
>

Actually I would use a combination TABLE and DIV

http://www.littleworksstudio.com/temp/usenet/alt.html.20080611.html

Another way

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[dorayme]

Re: Tricky Table Usage

In article <c1718$4850865f $40cba7a3$19942 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:

dorayme wrote:

In article <4471c$48506fe4 $40cba7a3$2025@ NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:

OP said that the number of rows that the image may
span could vary.

If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.

>
Actually I would use a combination TABLE and DIV
>

http://www.littleworksstudio.com/temp/usenet/alt.html.20080611.html

Another way

I would want to see the whole job that needs tackling. If it is scores
of products and all of them had reviews or descriptions of length, I
like simple table idea, with something like the incredibly beautiful:

<http://dorayme.890m.co m/alt/productTableWit hImage.html>

This could be adapted and could actually be made a bit cleverer with
some server side to make the pic small in a top row and repeated full
size in the review row.

Or we could compromise here. A table with a template set 4 rows for prod
num, col, $ and in stock. Three cols as I have them, with the third col
(containing pic) spanning all these 4 rows. Underneath, two more rows
with the spiel spanning the two right cols. Like so:

<http://dorayme.890m.co m/alt/productTableWit hImage2.html>

--
dorayme

[Jonathan N. Little]

Re: Tricky Table Usage

dorayme wrote:

In article <c1718$4850865f $40cba7a3$19942 @NAXS.COM>,
"Jonathan N. Little" <lws4art@centra l.netwrote:
>

>dorayme wrote:

>>In article <4471c$48506fe4 $40cba7a3$2025@ NAXS.COM>,
>> "Jonathan N. Little" <lws4art@centra l.netwrote:
>>>
>>>OP said that the number of rows that the image may
>>>span could vary.
>>If one of the rows contains a cell with a review or a description with
>>lots of lines of text, the image could get floated into this cell, the
>>horizontal spnned number of cells is likely known in advance. This would
>>be the simplest cross browser solution with not much wasted space.
>>>

>Actually I would use a combination TABLE and DIV
>>
>http://www.littleworksstudio.com/tem....20080611.html
>Another way

>
I would want to see the whole job that needs tackling. If it is scores
of products and all of them had reviews or descriptions of length, I
like simple table idea, with something like the incredibly beautiful:
>
<http://dorayme.890m.co m/alt/productTableWit hImage.html>
>
This could be adapted and could actually be made a bit cleverer with
some server side to make the pic small in a top row and repeated full
size in the review row.
>
Or we could compromise here. A table with a template set 4 rows for prod
num, col, $ and in stock. Three cols as I have them, with the third col
(containing pic) spanning all these 4 rows. Underneath, two more rows
with the spiel spanning the two right cols. Like so:
>
<http://dorayme.890m.co m/alt/productTableWit hImage2.html>
>

All depends on the product image and how much it may vary in height. If
not more than the product details then your simple table is the ticket.
But his mock up image showed a much taller product image and my table &
div combo would allow the image to extend into the description and
review area if necessary. Just depends on the real data...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com