[Solved] Header/content page with content div filling available space


My personal view:

Using tables for layout is like using coffee to stay awake. Don’t do it too often. Maybe once in a while.

And certainly we shouldn’t hassle people who use table-based layouts, especially when there’s no sound, cross-browser way to do a particular layout in CSS.

That said…

1. Tables make it harder to design for multiple screen sizes at once

Responsive layout is important these days. Having different CSS rules for different viewport sizes, applied to the same HTML code, is a good way to adapt a site to all screens.

For very simple designs, though, a table-based layout may work at any screen size.

2. Tables can interfere with search engine indexes, screen readers, and other automatic web page parsing

In other words, not so good for SEO and accessibility.

However, it’s worth pointing out that Google has recently been optimizing its search algorithm to distinguish between layout tables and data tables.

And there are some techniques like <table role="presentation"> to help screen readers handle tables, although those hacks can get complicated.

3. Table-based layouts require changing the HTML markup when you want to change the layout

Again, it’s nicer and more conceptually pure — and often more maintainable — to use HTML for content/semantics only, so you can leave the markup alone when you make design changes. But practically speaking, in a substantial redesign you’d often need to make changes to the HTML anyway.

In sum, I believe that guidelines and best practices are more useful than hard-and-fast rules regarding tables for layout. It’s a balancing act, and there are situations where tables can be, overall, a better choice.

solved Header/content page with content div filling available space