Hybrid Layout the peaceful coexistence of tables and CSS Part I

Why a hybrid layout

Although there are lots of articles on why to use CSS instead of <font>-tags and table layout, I want to emphasize two reasons for converting "old-fashioned" source code using hybrid layout or CSS positioning. From a web site developer's point of view the main reason is really easy to understand: the only way to get an easy to edit source code is by using CSS, especially CSS in an external file. The second reason is the file's size.

I'm sure, some of you wonder why I don't use CSS positioning as that is the only real solution for Internet gurus nowadays. Well, frankly, I'm not willing to put hours by hours into getting lots of CSS hacks to work properly, so that my pages are shown in a proper way in the most common browsers.  As long as browsers do not render pages with CSS positioning in a similar way, I prefer to use hybrid layout.

Example files

There are lots of pages out there full of nested tables. Years ago e.g. the only way to get a small border round a table within another table or table cell was to use two tables. CSS enables you to use only a short code added to the table tag to get the same result. The example pages, which we'll convert to hybrid layout, are also full of <font>-tags. <font>-tags have been deprecated since lots of years. In other words, you should not use them any more. Source code like following example should be a thing of the past: