ARTICLES FOR WEBMASTERS 
 Tables versus Div Tags in Web Page Design
The 100 year war was a simple misunderstanding compared to the ongoing
debate on whether to use HTML Tables or Div tags in structuring a web
page. Website developers seemingly always take sides, and all have an
opinion on it.
Firstly, why is it useful to specify a web page width? When you create
a web page there is often a requirement to specify a width for the
page, and to center the content on the screen. The thinking around this
is that the developer wants all visitors to have the same viewing
experience, and to see the page as it was designed to look. Visitors
will be viewing the page using different screen resolutions, with the
screen being typically 800 to 1280 pixels wide. The web page could be
designed to be 100% or 95% of the screen width, but the problem is that
images have fixed dimensions. An image that is 300 by 200 pixels in
size will always be 300 by 200 pixels. At higher screen resolutions,
images occupy a smaller proportion of the screen area. This means that
if the web page occupies 100% of the screen width, and the content
wraps around the image, the page appearance will vary with the screen
width.
What are the pros and cons of using HTML Tables and Div tags? In a
simple comparison, the two sets of attributes are opposites. Tables are
stable structures when using different browsers, but are time-consuming
to change across a site if it is to be redesigned. Div tags defined by
CSS rules are easily changed using a style sheet, but often have to be
re-defined and tweaked to work with different browsers. Using a broad
brush, developers from an arts background prefer to design using Div
tags because of the artistic freedom it gives them. Developers from a
computing or engineering background prefer to design using tables
because of the structural stability they provide.
A web page in theory can be any width or length the content demands. It
is generally preferred that visitors do not have to scroll in more than
one direction, and that is why developers tend to restrict the page
width. What they are doing is to specify boundaries beyond which the
content will not be allowed to stray. With HTML Table tags, this can be
achieved by creating an outer table that will contain the web page
content. The table width is specified, for example as 950 pixels, but
the border width can be set to zero if you don’t want to see the
border. With a Div tag controlled by a CSS style sheet, the width
of the ‘box’ defined by the tag can be specified. The problems with Div
tags arise when Div tags that are placed inside the box are used to
contain different elements of the web page. Unless industry standard
CSS rules are used, the boxes may not align correctly in different
browsers.
In practice, a mix of all methods is best. Stability can be achieved by
using tables for web page structure, and CSS style sheets to specify
style for fonts and other content. Only use industry standard HTML tags
and CSS rules. Just because someone has created a new design feature
that works in one browser does not mean it is good economic or design
sense to use it in a commercial website. Think of the goal you are
trying to achieve in creating a stable, reliable and user friendly
website, and make sure any design techniques you use work towards that
goal. Every feature on your website should be able to justify its right
to be there.
Comments to this article
Joe Kolon (2009:06:25 06:31)
For me the best option is to use tables to set up the general structure of the
page, and to use div tags within the tables. Anyway, when using a page editor
(instead of coding the page) I am not worried about this issue.
Add comment
|
Recent articles:
|