Cascading Style Sheets (CSS) are the most flexible way to create attractive, standards-compliant websites. Even so, many web designers choose to stick to the original HTML elements that they are familiar with in order to implement their designs. For example, HTML tables are often used in order to create the seemingly complex layouts on some web pages.
This article will simply address the drawbacks of relying too heavily on tables for layout as well as the benefits of CSS. It will also demonstrate how to implement a couple of page layouts using HTML and CSS as an alternative to HTML tables.
A Shift Towards Semantic Mark-up
If we look to the
World Wide Web Consortium (W3C) for guidelines on how to use HTML properly, the use of semantic mark-up is always strongly recommended. This means that code should be meaningful as well as syntactically correct.
Well formed semantic mark-up offers greater accessibility to users on various platforms (such as mobile devices) and allows for greater flexibility, scalability and performance of your Website and its pages. This is one of the main driving forces behind XHTML.
An example of poor semantic mark-up would be using the following code to represent a sub-heading on an HTML page:
<p><b>Heading</b></p>
Syntactically this is correct. Semantically though, it is a little off the mark. This code represents a paragraph which is in bold type; not a heading. To represent a heading or sub-heading in HTML we can use the heading tags (<h1>, <h2>, <h3> etc...) to surround the heading text.
Relating this idea to HTML tables would mean that tables should only be used for tabular data and not for layouts and positioning. But how can we create a decent page layout without tables? Surely everything will just appear in a single boring column if we don't use tables...
CSS to the Rescue!
In the introduction to this article we said that CSS enables us to create attractive websites. A quick glance at
http://www.cssremix.com certainly gives some weight to this argument. Now let's look at how we can actually implement some different page layouts.
For these examples we are going to use XHTML 1.0 Strict along with an embedded CSS style block. In practice this CSS can be included in a separate .css file (for details on how to do this please refer to this page). The full XHTML and CSS code for each layout can be copied into a single text file and named with the .html extension.
It doesn't matter whether you use HTML or XHTML as your document type, as long as your mark-up is nice and clean. Validating your code using the W3C validation tools is always a good idea.
3 Column Layout With Header and Footer
The 3 column layout is common these days. The following HTML and CSS enables you to create a flexible 3 column layout with the minimum of fuss. You can see this page layout
here.
We'll start off with the straightforward HTML:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
These set of divisions give us the fundamental page structure to work from. The divisions have all been given IDs which enable the CSS to refer to each division and style them appropriately. It is worth noting that element IDs must always be unique within a page.
Now let's have a look at the CSS:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
These first couple of lines in the style sheet specify the font family and size for the document.
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
Here, the page width has been specified as 900 pixels. This wrapper division also has padding of 10 pixels and a border of 1 pixel. The total of these values results in the actual width of the page being 922 pixels.
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
IE 7
Firefox 2.0
