CSS: Display like a table

Posted in on 23 May 2008

With the advent of CSS-based layouts over the last few years, it might be assumed that the word “table” should be banished from your web design dictionary (apart from those really useful data tables that we should all use for related data).

But no! The release of Internet Explorer 8 will mean that all the major browsers will support the display: table property. Put simply, this allows two or more adjacent elements, for example, <div> or <p> elements to behave as if they were part of a table but without the use of those pesky <table>, <tr> and <td> tags. One advantage of using this method would be when you want two elements to have equal heights regardless of their content; something that is difficult to achieve with other CSS properties. Another advantage, depending on your point of view, is that the use of floats to achieve column layouts would no longer be necessary.

Sitepoint has a great article about the use of display: table and related properties like display: table-cell and has created a typical three column layout demo using this technique.

So, I should be using this in my style sheets?

Well, it’s not quite as simple as that. IE6 and IE7 do not support display: table and their usage is likely to continue for some time to come. In fact, the decline in use of IE6 has been stubbornly slow and IE7 might be around for a few years yet.

Additionally, there are many robust CSS layouts these days. If you are like me, you may well have your own library of layouts that work well in all major browsers. I’m not sure that I want to scrap these just yet.

For myself, I hope to experiment with display: table. If the results look good, I will start adding this to my own projects. However, for client websites, I will probably only use this if I can provide an alternative solution for IE6 and IE7.

Technorati :

Related Posts

Comments

Textile Help
Stop looking at my bottom