The #1 thing that made my soul weep today:

[hope]

Discovering this in a template for one of work's webapps:

  <table>
   <tr>
     <td width="99%"><div class="header1">Page Heading</div></td>
     <td width="1%"><img src="static/images/1x1_transparent.gif"/></td>
     <td width="150"> </td>
   </tr>
 </table>

Yes. That is the markup they have given a PAGE HEADING. It serves no other purpose. JUST A PAGE HEADING.

ETA: for those playing at home, here's what a standards-compliant, semantically marked-up, beautiful page heading looks like under its skirts:

<h1>Page Heading</h1>


Comments

[hope]

Pretty much every HTML tag can be styled and positioned via CSS. The first example has several probs in it that should have been handled in CSS:

- It's in a table - HTML table code is misused for layout when people are going for a page style that has a grid-like structure, when it's perfectly possible to do this with CSS

- There is a CSS class assigned to the page heading - the <div class="header1"> - this is bad because the <h1> html tag exists to semantically define page headings at this level

- They have put styling markup and unnecessary images into the table as well to give it extra padding - the 1x1transparent.gif and width="150"

So, here's what the correct markup and styling should look like to get the same thing:

In the HTML document:

<h1>Page Heading</h1>

In the associated stylesheet:

h1 { margin-right: 151px; }