There is a debate raging in web development circles on whether tables or CSS block elements should be used for page layout. CSS is Cascading Style Sheets and we will learn about them later. Read the article below and answer these questions as comments posts. This posting will be more challenging than those in the past.
1. If you look at Figure 1 and think in terms of a grid how are the elements laid out?
2. What does the author me by minimal tables. Why does the author say they are necessary?
3. What <td> attribute does the author say you must declare in the tag?
4. What is tabular data? Give and example?
Page Layout
Most web site templates perform page layout by using a few blocks of content, for instance a header, a left column with the navigation, a right column with the main content, and a footer, as shown below:
Any attempt to code this page must start by roughly positioning these four blocks of content. Style details can wait; first you should make sure that the content blocks are aligned correctly in all browsers on all resolutions. There are two ways to do this: pure CSS and minimal tables. Although pure CSS is the best choice overall, it has its problems.
Pure CSS
Generally speaking it's difficult to obtain proper horizontal alignment in CSS. Horizontal alignment wholly depends on the float declaration, which, though supported by all modern browsers, is supported according to two different models, with minor variations even between browsers that support the same model. These problems aren't unsolvable; coding a simple four-block layout with the float declaration is quite possible. Nonetheless the danger of insolvable browser incompatibilities increases exponentially with every floating block you add.
Another common problem with CSS is ensuring a proper page footer. On long pages that use more space than the window height, the footer should appear directly below the navigation and content blocks. That's very easy to code. On short pages, though—those that span only part of the window height—the footer should nonetheless appear at the bottom of the viewport, and that's a far trickier code challenge:
Figure 2
Ensuring that the footer works properly on both long and short pages is a common cause of CSS headache.
Tables
Tables neatly solve these two problems. Correct horizontal alignment has been the most important advantage of tables ever since Mosaic. Giving the table a height: 100% and the cell containing the footer a vertical-align: bottom makes the footer reliable in all circumstances.
If the visual design of your web site requires complex horizontal alignment or a reliable page footer, minimal tables could help you evade complex browser incompatibilities.
Don't start using those tables right away, though. First try to create a cross-browser pure CSS page, and don't be shy to ask for help from css-discuss.org. Even if your CSS experiment turns out not to work, you will have acquired valuable experience. Using pure CSS in all circumstances will have to wait until all browsers support CSS fully. If you've honestly tried to use CSS but encountered serious browser incompatibilities in the rough positioning of the content blocks, you should switch to minimal tables.
CSS with Minimal Tables
In the bad old days web developers placed all page elements in tables, and if the page didn't look as expected it needed yet more tables inside the already existing tables. This process was repeated until the page worked. The underlying theory seemed to be “If we squeeze enough HTML into the page it'll work eventually.” It made for eternal download times and nonsensical markup that was impossible to update.
Fortunately this coding style is on the way out. Nonetheless, as we've seen, tables still offer a few advantages over pure CSS. Minimal tables are the perfect compromise. They allow you to use the advantages of both without bloating your code (much).
Minimal table use means: use as little tables as possible. To obtain our simple four-block layout, the following code is all you need:
<table>
<tr>
<td colspan="2">
<div class="header">
Header
</div>
</td>
</tr>
<tr>
<td>
<div class="navigation">
Navigation
</div>
</td>
<td>
<div class="content">
Content
</div>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: bottom">
<div class="footer">
Footer
</div>
</td>
</tr>
</table>
This minimal table does a fine job of roughly positioning the four content blocks. You have created a framework that solves some tricky problems for you and gives you free rein to fill in all the other details of your design by CSS.
The table needs many more refinements (a width for the navigation, a vertical-align for the footer) but that's the job of the CSS, not the XHTML. You don't need any more tables than this one.
In general you should style the DIVs inside the TDs instead of the TDs themselves. For instance, browsers see a width declaration on a TD as a sort of advice, and they don't hesitate to overrule it when they think it's necessary. They will always obey width declarations on DIVs, though.
The only exception is the vertical-align, which must be declared on a TD.
Tables Revisited
As we saw above, using one minimal table to roughly lay out your page is quite acceptable. Nonetheless, it is important to stress that this minimal table should be the only one. Do not insert more tables into your code. They're not necessary; CSS can do the job for you.
There's one single exception to this rule: you may use tables to display tabular data, for instance stock quotes or long lists of employees with their room numbers and phone numbers. For these bits of data (and only for these bits of data) you can add an extra table to your code.
If you're not sure if a certain data set requires a table, ask yourself how you'd display it in print. If you'd use a table even in print, the data is tabular.
