CSS display:table - Pros and Cons for layouts
With all the questions that keep coming up about using tables for layout I thought a thread on the pros and cons of doing so would be useful. I'll start with the ones I can think of and others can add theirs to help people work out whether they should use tables for part of their page.
Let's assume that the HTML uses semantically correct tags to mark up the content and that it will stay that way regardless of what CSS we use to define how we want it to look.
1. It is the easiest way to the same height.
2. It avoids using float or position:absolute for purposes for which they were not intended.
3. It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.
1. It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
2. To create a colspan or rowspan effect requires nesting one table inside another.
3. It encourages people to build grid layouts rather than taking a more flexible approach.