Page is a not externally linkable
SuzyUK - 12:08 pm on Jan 30, 2007 (gmt 0)
Interesting questions which coming from a large dept based dev team should hopefully provoke some interesting answers! I will try to KISS and hopefully help you not to be scared of CSS. Yes some of the CSS layout techniques out there can be daunting, but mostly the ones that are are cutting edge and are trying to deal with pixel perfection, every possible browser bug and gorgeous design at the same time. You asked for tips about moving away from tables e.g. if we take a very rough guess that a standard layout table based on your description is Then there is no need for the header and footer parts to be inside a table cell, so you could start by removing them to divs, they are after all logical page divisions if that is all you ever do it's a start which gives you a chance to work with the easy bits :) as I presume these are bits of the page that every day developers would not be tweaking as they would be part of the "corporate template"? Working with CSS on just these bits will give you time to start building the stylesheet without fear of others tweaking and breaking the design. Moving from tables to CSS does not mean you cannot have a table in the page the <table> element [w3.org] is still a valid, and useful element for its intended purpose of defining data :) IMHO, what there shouldn't be, on a page, are multiple nested tables because that's where the accessibility of the page can come into question. And if you start the entire page laid out in a table you start the nesting from the get go. If you can, and I think this would be of high importance for a Govt Site, which has to conform to accessibility issues as well, you should get a copy of a screen reader and try to listen to some sites which are built using nested tables (this one for example) then you might realise why it's not just a whim for some entities to minimise their use of tables for layout binding hopefully more good ideas and tips will follow from others Suzy [edited by: SuzyUK at 12:12 pm (utc) on Jan. 30, 2007]
Hi AndyStephens and Welcome to CSS! one of the first things to hit me was the whole 3-column div issue
the only way that would be an issue would be if you require to exactly copy a table based layout (which should never be attempted IMHO!) You can make perfectly accessible 3 column layouts without getting complex!
biggest tip has got be to be do it bit by bit
<body>
<table summary="layout" border="1" cellspacing="0" cellpadding="3" width="100%">
<tr><td colspan="2">Header</td></tr>
<tr><td>menu</td><td>content</td></tr>
<tr><td colspan="2">Footer</td></tr>
</table> <div id="header" style="border: 2px solid #ccc; padding: 3px;">Header</div>
<table summary="layout" border="1" cellspacing="0" cellpadding="3" width="100%">
<tr><td>menu</td><td>content</td></tr>
</table>
<div id="footer" style="border: 2px solid #ccc; padding: 3px;">Footer</div>
</body>
Another example: we develop a lot of data entry forms (which are essentially 2-column tables);
Keep them as tables! there is nothing that says you can't use a table on a CSS page, they should be used for their intended purpose. You can still put your data table inside a page division.