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.