dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi

Always Avoid Using Tables for Layout

We can now add our content in the body of our document, but first we need to add structural elements to contain each logical section, a header, footer and the main body, for example.

With HTML 4, it was common practice to use tables to control the layout of content. This technique, however, constricts the use of our markup by integrating presentational layout into our code. While this doesn’t seem like a critical issue, it becomes a big problem when the page is viewed in multiple mobile browsers. Instead, use XHTML-friendly <div> elements to logically contain our content for later styling to control the presentation. Since we usually display text in a single section, the structure is straightforward with a content container in the middle of a header and footer:

&lt;body&gt;<br />   &lt;div id=&quot;header&quot;&gt;<br />         &lt;!-- Header placeholder --&gt;<br />   &lt;/div&gt;<br />   &lt;div id=&quot;content&quot;&gt;<br />        &lt;!-- Content placeholder --&gt;<br />   &lt;/div&gt;<br />   &lt;div id=&quot;footer&quot;&gt;<br />         &lt;!-- Footer placeholder --&gt;<br />   &lt;/div&gt;<br />&lt;/body&gt;