Table within a table…HELP!

@amberfrancesJun 15.2007

hey, I am doing a site that’s going to require some complicated tables unless one of you geniuses can help me! I have a large (576px long) navigation bar on the left (it’s an image) and i need to put two rows (or more) of three “products” right next to it. of course the first three products line up okay in the first TR but the second row goes BELOW the long navigation bar image…so i am thinking i have to do a table within a table? here’s the code that makes the images go bad?

<CODE>
<table class=”products_page” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″>
<tr height=”215″>
</tr>
<tr>
<td width=”220″><img src=”images/nav_bar.png” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”20,13,133,45″ href=”coming_soon.html” />
<area shape=”rect” coords=”29,70,141,101″ href=”floral_pillows.html” />
<area shape=”rect” coords=”11,133,142,150″ href=”coming_soon.html” />
<area shape=”rect” coords=”17,179,147,216″ href=”coming_soon.html” />
<area shape=”rect” coords=”57,247,96,260″ href=”index.html” />
<area shape=”rect” coords=”42,271,111,283″ href=”mailto:[email protected]” />
</map>
</td>
<td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> 
Beaded Rosetta w/w beads,Chevron Tape 14×20 inch
Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>
<td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> 
Beaded Rosetta w/w beads,Chevron Tape 14×20 inch
Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td> <td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> 
Beaded Rosetta w/w beads,Chevron Tape 14×20 inch
Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>
</tr>

<tr> <td width=”156″> </td> <td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> Beaded Rosetta w/w beads,Chevron Tape 14×20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>
<td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> 
Beaded Rosetta w/w beads,Chevron Tape 14×20 inch
Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>
<td valign=”top”><img src=”images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg” width=”125″ height=”103″/> 
Beaded Rosetta w/w beads,Chevron Tape 14×20 inch
Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>
</tr>
</table>
</CODE>

or you can see lonepineprairiepillows.com/floral_pillows.html

to post a comment

HTML

6 Comments(s) _↴

@CentauriJun 15.2007 — #First fix : don't use tables for layout - that is not what they are for.

This layout is fairly basic and easy to do using semantic html content markup and appropriate styling of that content. At the moment, the site would hardly be able to be indexed by search engines, or be readable via screen readers, due to all the graphics and image map and little "real" content.

@amberfrancesauthorJun 15.2007 — #i actually got it figured out- do you have a suggestion on how i could better set up those links? basically a graphic-designer sent me the page layout as an image...should i pull each peace apart and arrange it in html? how tedious!

@amberfrancesauthorJun 15.2007 — #The answer lies here!

<CODE>T<table class="products_page" border="0" cellpadding="0" cellspacing="0" width="800">

<tr height="215">

</tr>

<tr>

<td width="220"><img src="images/nav_bar.png" border="0" usemap="#Map" />

<map name="Map" id="Map">

<area shape="rect" coords="20,13,133,45" href="coming_soon.html" />

<area shape="rect" coords="29,70,141,101" href="floral_pillows.html" />

<area shape="rect" coords="11,133,142,150" href="coming_soon.html" />

<area shape="rect" coords="17,179,147,216" href="coming_soon.html" />

<area shape="rect" coords="57,247,96,260" href="index.html" />

<area shape="rect" coords="42,271,111,283" href="mailto:[email protected]" />

</map>

</td>

<td>

<table class="pillows" borer="0" cellpadding="8" cellspacing="0">

<td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/> 

Beaded Rosetta w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

<td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/> 

Beaded Rosetta w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

<td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/> 

Beaded Rosetta w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

</tr>
  <tr>
   <td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/><br>
   <b>Beaded Rosetta</b><br> w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

<td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/> 

Beaded Rosetta w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

<td><img src="images/product_images/floral/beaded_rosetta_beads_CT_14x20/k_beaded_rosetta_beads_CT.jpg" width="125" height="103"/> 

Beaded Rosetta w/w beads,Chevron Tape 14x20 inch

Center and back100%polyester,Floral 60%Rayon 40Polyester. Wood Beads, Tape:50%cotton 40wool 10 rayon. Form: polyfil $94</td>

</tr>

</table>

</td>

</table>

</CODE>

@CentauriJun 15.2007 — #I [I]think[/I] you have inserted another table in there. Not being one to use tables for layout, I cannot see how it could be easy to debug anything mixed up non-semantically in all those <tr> and <td> tags .... but I digress .... ?

Any menu I would normally mark up as an unordered list of links, which can be styled any way you like. In this case, the full background image can still be used without slicing, and the link elements can be styled with correct size and spacing, with text hidden from view, to overlay the background image in the correct position. I would normally use separate images for the links so that some sort of rollover effect can be implemented, which reinforces the concept of these being navigation links, but the one background will still work.

@WebJoelJun 15.2007 — #Nested-tables, -apart from being that tables aren't meant to be used for nhon-tabular data, are problematic in that user-devices often 'read' the tables in incorrect order, -your 'navigation' might be 'read' in a location not where you intended. -Still display okay? -Not a problem? For a blind person using a modern screen-reader, not finding your navigation where it should be, could be a problem.

And 'nested tables' has a particular problem when read by a system using WIN_98 and low-to-medium RAM... it does what I beleive is called a 'stack overflow' or something weird, resulting quite frequently in "BSOD" ("blue screen of death"). (former WIN_98 user myself, I know!).

Argument can be made that 'well who still uses WIN_98?'. Few I am sure but the problem (nested tables), remains. If you throw enough RAM into a system, I am sure that even the buggiest pages can be tranversed to some degree.

Now, having said all this, -I'll look at your code and see if some non-tables solution can be forthcoming. ?

@WebJoelJun 15.2007 — #Here is a non-TABLEs version similar to what you have.[B]<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/B]

<html>

<head>

<title> New Document </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="Generator" content="" />

<meta name="Author" content="" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

* {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */

body {min-height:100%; height:100%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}

h1{font-size: 1.93em; margin-top:12px;}

h2{font-size: 1.72em; margin-top:12px;}

h3{font-size: 1.52em; margin-top:12px;}

h4{font-size: 1.42em; margin-top:12px;}

h5{font-size: 1.32em; margin-top:12px;}

h6{font-size: 1.21em; margin-top:12px;}

[B]ul#photobook {position:relative; width:650px; height:410px; margin:70px auto; list-style-type:none;

font-family:arial, verdana, serif; border:5px double silver;}

ul#photobook h1 {position:absolute; left:105px; top:-55px; width:450px; margin:20px auto; text-align:center; border:3px double silver; border-bottom: 0 none;}

ul#photobook li {float:left; margin:7px;}

ul#photobook li img {border:1px solid blue; height:80px; width:144px; display:block;}

ul#photobook li p {text-align:center; margin:5px 0; width:140px; height:30px;}

</style>[/B]

</head>

<body>

[B]<ul id="photobook">

<li><img src="#" alt="this is a picture"/>L. Ips. Dolar</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your visible descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar </li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your visible descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar </li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><h1>An all-CSS photo-image photobook</h1></li>

</ul>[/B]

</body>

</html>[/QUOTE] Looks the same in IE and in Fx. Validates.

Also in #HTML _↴

Few questions about my website turn off email,save,print,etc on photo Image in the URL bar in browser

Success!

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

Tweet This

Table within a table…HELP!

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Table within a table…HELP!

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴