Tricky Table Usage
Question posted by: Liam Gibbs
(Guest)
on
June 27th, 2008 07:16 PM
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.
|
|
June 27th, 2008 07:16 PM
# 2
|
Re: Tricky Table Usage
Liam Gibbs wrote:
Quote:
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
|
|
|
June 27th, 2008 07:16 PM
# 3
|
Re: Tricky Table Usage
In article
<5bd91fd9-98fa-44e7-bc3c-83dc97f3abfe@a1g2000hsb.googlegroups.com>,
Liam Gibbs <liamgibbs@sympatico.cawrote:
Quote:
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.com/alt/productTableWithImage.html>
--
dorayme
|
|
|
June 27th, 2008 07:16 PM
# 4
|
Re: Tricky Table Usage
Will this do you? Shout if you need anything in it explained:
Quote:
>
<http://dorayme.890m.com/alt/productTableWithImage.html>
|
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
Quote:
>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?
|
|
|
June 27th, 2008 07:16 PM
# 5
|
Re: Tricky Table Usage
Liam Gibbs <liamgibbs@sympatico.cawrites:
Quote:
Quote:
>Will this do you? Shout if you need anything in it explained:
>>
><http://dorayme.890m.com/alt/productTableWithImage.html>
|
>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>
Quote:
>>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.infosystems. www.authoring.stylesheets is probably a better place
(unless you have questions about the markup, of course).
--
Ben.
|
|
|
June 27th, 2008 07:16 PM
# 6
|
Re: Tricky Table Usage
Liam Gibbs wrote:
Quote:
Quote:
>Will this do you? Shout if you need anything in it explained:
>>
><http://dorayme.890m.com/alt/productTableWithImage.html>
|
>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>
Quote:
>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/te...l.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
|
|
|
June 27th, 2008 07:16 PM
# 7
|
Re: Tricky Table Usage
In article
<8866337c-637b-47c9-a558-64cf9150d207@l64g2000hse.googlegroups.com>,
Liam Gibbs <liamgibbs@sympatico.cawrote:
Quote:
Quote:
Will this do you? Shout if you need anything in it explained:
<http://dorayme.890m.com/alt/productTableWithImage.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.com/alt/productTableWithImage.html>
--
dorayme
|
|
|
June 27th, 2008 07:16 PM
# 8
|
Re: Tricky Table Usage
Thanks, everyone. Finally got the problem solved by getting tips from
every example. Thanks!
|
|
|
June 27th, 2008 07:16 PM
# 9
|
Re: Tricky Table Usage
Jonathan N. Little wrote:
Quote:
Liam Gibbs wrote:
>
Shouldn't
use a table anyway...
|
Why not? It looks like tabular data to me.
--
Berg
now killing all posts from google groups
|
|
|
June 27th, 2008 07:16 PM
# 10
|
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
Quote:
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]
|
|
|
June 27th, 2008 07:16 PM
# 11
|
Re: Tricky Table Usage
VisualVision wrote:
Quote:
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
|
|
|
June 27th, 2008 07:16 PM
# 12
|
Re: Tricky Table Usage
In article <4471c$48506fe4$40cba7a3$2025@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
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
|
|
|
June 27th, 2008 07:16 PM
# 13
|
Re: Tricky Table Usage
dorayme wrote:
Quote:
In article <4471c$48506fe4$40cba7a3$2025@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
>
Quote:
>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/te...l.20080611.html
Another way
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
|
|
|
June 27th, 2008 07:16 PM
# 14
|
Re: Tricky Table Usage
In article <c1718$4850865f$40cba7a3$19942@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
dorayme wrote:
Quote:
In article <4471c$48506fe4$40cba7a3$2025@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
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/te...l.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.com/alt/productTableWithImage.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.com/alt/productTableWithImage2.html>
--
dorayme
|
|
|
June 27th, 2008 07:16 PM
# 15
|
Re: Tricky Table Usage
dorayme wrote:
Quote:
In article <c1718$4850865f$40cba7a3$19942@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
>
Quote:
>dorayme wrote:
Quote:
>>In article <4471c$48506fe4$40cba7a3$2025@NAXS.COM>,
>> "Jonathan N. Little" <lws4art@central.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/te...l.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.com/alt/productTableWithImage.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.com/alt/productTableWithImage2.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
|
|
|
June 27th, 2008 07:16 PM
# 16
|
Re: Tricky Table Usage
In article <5df27$4850ab66$40cba7a3$9380@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
dorayme wrote:
Quote:
In article <c1718$4850865f$40cba7a3$19942@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
dorayme wrote:
>In article <4471c$48506fe4$40cba7a3$2025@NAXS.COM>,
> "Jonathan N. Little" <lws4art@central.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/te...l.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.com/alt/productTableWithImage.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.com/alt/productTableWithImage2.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...
|
Yes, ok, but just one little caveat to your remark "If not more than the
product details": So if a few of them were a little taller, the world
would not cave in and no big wasted space problem would emerge.
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
--
dorayme
|
|
|
June 27th, 2008 07:16 PM
# 17
|
Re: Tricky Table Usage
dorayme wrote:
Quote:
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
>
|
Oh, we are not in disagreement here. I was just responding to the OP's
request:
"Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though."
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
|
|
|
June 27th, 2008 07:16 PM
# 18
|
Re: Tricky Table Usage
In article <ce6fd$48511fde$40cba7ae$21586@NAXS.COM>,
"Jonathan N. Little" <lws4art@central.netwrote:
Quote:
dorayme wrote:
>
Quote:
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
|
>
Oh, we are not in disagreement here. I was just responding to the OP's
request:
>
"Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though."
|
Yes, I know you were. So was I.
--
dorayme
Not the answer you were looking for? Post your question . . .
189,815 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).
|
|
|
Latest Articles: Read & Comment
Top Community Contributors
|
