Why Tables Are Bad
If you have ever put your nose into web design, you have probably heard that tables are bad for web design. Why is that? Tables are meant to be used for tabular information, not for positioning of layout elements. Not all browsers support tables is the second reason. The source code is also messy and complicated and makes it harder one the web designer himself when trying to modify things in a document with tables. There are also other reasons why tables should not be used to lay out documents.
CSS is the answer to tableless layouts. In actual fact, without CSS, you’d have to use tables to make pages look like those designed by print designers. There is a great article by Maxine Sherring about this which explaines why tables should not be used to lay out pages and how CSS replaces them: The layout is dead, long live the layout.
There are many good reasons not to use tables to create web page layouts: unnecessarily complication code, they defy the most basic rule of information storage and retrieval by mixing content with appearance, they destroy logical document flow, and most of all, they were not a tool which was created to do this job. Why continue using them when CSS has a whole suite of far superior page layout features, with the added bonus of streamlined code, separation of content appearance and caomplete control over logical document flow?
Do read the rest of the article, as it does have some valuable information which you will need to know to understand the rest of this article.
How to Avoid Tables
Now that we found out the various reasons why tables should not be used for web design, you are probably asking yourself: “But how do you replace them?” The answer is block-level elements (or box elements). These are basically sections of a document. With CSS you can specify exactly where a certain block-level is on the page. You can give a measure in pixels or on percentages. Percentages are useful when you want to create a layout that expands depending on the resolution of the viewer’s screen.
You can specfy a position relative to the top of the page, the left, the right or the bottom. For example you could say that a certain section of your page (like a paragraph) is to be 50 pixels away from the top, or 50 pixels from the object above it. Or you can say that it is to be25 pixels away from the left. It is usually better just to specify the distance of an object from either one side and either top and bottom, to avoid strange effects in your page. In the example above it is sufficient to say that an block-level element is 50 pixels away from the top and 25 away from the left, without having to specify the distance from the bottom and from the left. Of course which side you decide to specify will be up to what you are trying to do with your design.
Block-elements are composed of several parts. See the full explanation in here.
Heading, paragraphs, lists are all block-level elements and there are more. You can also create block level elements by surrounding parts of your page with <div> tags. By using <div> </div> tags, you are saying that the content surrounded by those tags are a section of a document and as such you can position it on your page as you would to with heading and paragraphs. You can have paragraphs inside <div> tags but not viceversa. <div> tags inside a paragraph will break it.
October 26, 2005