I have a page which uses tables for layout http://www.vintagetextile.com/1920s_to_1930s.htm The checkerboard pattern is achieved with this markup: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>1920s to 1930s high-style Vintage Clothing at Vintage Textile</title> <meta name="description" content="1920s to 1930s vintage clothing for the discriminating collector at VintageTextile.com"> <meta name="keywords" content="vintage clothing,"> <link rel="stylesheet" type="text/css" href="style_sheets/categoriesnew.css"> </head> <body> <h1 id="top">1920s-1930s Vintage Clothing <span id="at">at</span></h1> <div id="logo"><img src="images/Graphics/vintage_clothing3.gif" height="74" width="296" alt="antique clothing at vintagetextile.com"></div> <div id="cat-top"><a href="early.htm">Early</a> : <a href="victorian.htm">Victorian</a> : <a href="edwardian.htm">Edwardian</a> : <a href="1920s_to_1930s.htm" class="herelink">1920s to 1930s</a> : <a href="1940s_to_designer.htm">1940s to Designer</a> : <a href="shawlstext.htm">Shawls/Textiles</a> : <a href="jewelry.htm">Jewelry</a> : <a href="gallery.htm">Gallery</a> : <a href="treasure_hunt.htm">Treasure Hunt</a> : <a href="articles.htm">Articles</a> : <a href="order.htm">To Order</a> : <a href="mailto:Linda@vintagetextile.com">Email</a> : <a href="index.html">Home</a></div> <div align="center" id="bronze"></div> <h2 id="click">Click on images for more details</h2> <table cellpadding="0" cellspacing="0" id="itemtable" summary="1920s vintage clothing"> <col id="col1"><col id="col2"><col id="col3"> <tr class="row1"><td><a href="new_page_63.htm"><img src="images/Thumbnails/2176thumb2.jpg" alt="Gallenga stenciled bag" width="209" height="325"></a></td> <td></td> <td class="details"> <p> <b>#2176$1,200 <span class="reserved">Reserved</span> </b></p> <p><strong>Gallenga</strong> stenciled velvet bag, c.1920. It has shades of bronze/gold stenciling on black silk velvet and is lined with beige satin. Gallenga often used up to nine tones of gold and silver pigment to achieve the desired ombré shading. This is an exemplar of the mysterious, antique, Gothic quality of Gallenga's designs. NEW LISTING </p></td></tr> <tr class="row2"><td></td> <td><a href="new_page_7.htm"><img src="images/Thumbnails/6419thumb2.jpg" alt="rhinestone flapper cap" width="205" height="325"></a></td> <td class="details"> <p> <b>#6419$750</b></p> <p>Juliette-style rhinestone flapper cap, late 1920s. A diagonal mesh pattern of bronze wire radiates out from a center diamond of prong-set rhinestones. At each intersection of the mesh is a prong-set rhinestone. The contrast of glittering rhinestones with burnished old metal conveys a feeling of old wealth seasoned over the generations. NEW LISTING </p></td></tr> etc. and with this stylesheet body{width:89%;margin:0% 5.5%;padding:0;border:0;color:#000;background-color:#fff;font:medium Verdana,Tahoma,Helvetica,sans-serif;} #top{padding:.2em .3em .2em 1em;margin-bottom:0.5em;color:#fff;background-color:#000;font:bold 1.4em "Times New Roman",Times,serif;height:1.4em;} img{border:none;} td img{border:none;display:block;} .bi{font-weight:bold;} #itemtable td.details{padding:0 1.25em;font:1em/1.25 Verdana,Tahoma,Helvetica,sans-serif;vertical-align:middle;} #cat-top a.herelink:link,#cat-bottom a.herelink:link,#cat-top a.herelink:visited,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;} .lgbi{font-size:large;font-style:italic;font-weight:bold;} .reserved{color:Red;font-weight:bold;} #itemtable .row1{background-color:#e5e5e5;color:#000;vertical-align:top;height:325px;} #itemtable .row2{background-color:#fff;color:#000;vertical-align:top;height:325px;} #at{font-style:italic;font-weight:bold;} #bronze{width:100%;margin-top:.5em;background:#fc6;height:1em;} #bronze-bottom{width:100%;margin-top:1.3em;margin-bottom:.5em;background:#fc6;height:1em;} #cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;} #cat-top{padding-top:0.2em;margin-top:1.4em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;} #click{padding-left:2em;color:#000;background-color:#fff;font:bold 1.16em Verdana,Tahoma,Helvetica,sans-serif;position:relative;top:0.2em;} #itemtable{width:100%;border:0;table-layout:fixed;} #itemtable #col1,#itemtable #col2{width:209px;} #itemtable a img{width:209px;height:325px;} #logo{position:relative;left:50%;} a:link{color:#000;background-color:#fff;text-decoration:none;} a:visited{color:#8B0000;background-color:#fff;text-decoration:none;} a:hover{color:red;background-color:#fff;text-decoration:none;} a.bd:link{color:#00f;background-color:#fff;text-decoration:none;} a.bd:visited{color:#8B0000;background-color:#fff;text-decoration:none;} a.bd:hover{color:red;background-color:#fff;text-decoration:none;} Here is an idea I saw online to implement the design with divs instead of a table. I can't quite get the selectors to match up with the code. All the jpegs are 209 px wide. In the odd rows, use this style to position the jpeg in the first "column": width 418px; float:left; margin-right:-418px;clear:left; The third "column" text would be styled: clear:none;float:left;margin-left:418px;display:inline; In the even rows, use this style to position the jpeg in the second "column": margin-left:209px; Assuming this is the right idea, how would I match up the selectors and the classes in the markup?
Replacing tables with DIVs is just a bad idea all around. You want to use semantic markup instead, which is the use of HTML for the job that it was designed for in the first place. I'm not at home so I can't give you the CSS, but I can give you the HTML since the structure shouldn't change much from how I see it to how it should be done. Bear in mind I didn't look at your page, since I'm at a public library and time is a precious commodity (almost as valuable as gold), so I'm giving you a bare-bones template for now. I'll take another look at your page later and show you how I'd structure the content area then. <div id="header"> <img src="images/Graphics/vintage_cloting3.gif" width="296" height="74" alt="antique clothing at vintagetextile.com" title=""> </div> <ul id="menu"> <li><a href="early.htm">Early</a></li> <li><a href="Victorian.htm">Victorian</a></li> <li><a href="1920s_to_1930s.htm">1920s to 1930s</a></li> <li><a href="1940s_to_designer.htm">1940s to Designer</a></li> <li><a href="shawlstext.htm">Shawls/Textiles</a></li> <li><a href="jewelry.htm">Jewelry</a></li> <li><a href="gallery.htm">Gallery</a></li> <li><a href="treasure_hunt.htm">Treasure Hunt</a></li> <li><a href="articles.htm">Articles</a></li> <li><a href="order.htm">To Order</a></li> <li><a href="mailto:Linda@vintagetextile.com">Email</a></li> <li><a href="index.html">Home</a></li> </ul> <div id="content"> <!-- rest of page goes here --> </div> <div id="sidebar"> <!-- if you have a sidebar, this is where it would go. --> <div id="footer"> Copyright © 2007 Fiasco Labs. All Wrongs Reserved. </div> Code (markup):
I would NOT replace that with DIVS or even so called 'semantic markup' for one simple reason. The text on the right is automagically centered top to bottom - non table layouts still can't pull that off properly. That said I would axe ALL of the for spans and padding, axe all the inlined table properties, and chop a good deal off that source. I would even consider dropping the alternating TD for alternating classes and then just change the padding in the classes.