The following is a small, but perhaps significant point, about how not to use tables to organize display, in a web-page layout.
Whilst analyzing a web-site recently, I came across an image inside a single-cell table. Image and its caption are enclosed in a table with a single row and a single column. This is not very good.
Tables should be used only for tabular data, not layout.
i.e. this bit:
< img src=”myimage.jpg” alt=”Active Image” width=”240″ height=”204″ / >
should be inside a < div > < /div > tag and the tag should have the ‘text-align’ style attribute applied:
Bad:
< table border=”0″ width=”250″ align=”right” >
< tbody >
< tr >
< td >< img src=”myimage.jpg” alt=”Active Image” width=”240″ height=”204″ / >
< span >This is the caption for my image.
Photo by No-one at all< /span >< /td >
< /tr >
< /tbody >
< /table >
Good:
< div style=”float: right;” >
< img src=”myimage.jpg” alt=”Active Image” width=”240″ height=”204″ / >
< span >This is the caption for my image.< br / >< br / > Photo by No-one at all< /span >
< /div >
I haven’t actually tested it (no time), but I think this will appear the same as the table, but comply with much better modern standards.
See: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/
—quote—
Most Web page designers use a table-based layout to achieve a coherent and consistent look. There’s a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance–all while making your website more appealing to search engine spiders.
—end quote—
Leave a Reply