Categories

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

Web Development

Tables are for tabular data, not display

Good post? Please, share it...
Pin It

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

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

This site uses Akismet to reduce spam. Learn how your comment data is processed.