HOW TO: use table layout without <table> tag

[Vladdy]

There is no denying that there are times when table allows to achieve the desired layout effect easier than other methods.
Fortunately, modern browsers (and POS IE is not one of them) provide the mechanism for table layout, while maintaining meaningful HTML structure (one that does not use <table> tag for non-tabular data).
Consider the following HTML fragment for a list of navigation links:
<div id="nav"><ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
Lets say we want to have these links in a horizontal line that adjusts to the width of the page. To achieve this effect we declare the style as as follows:
#nav
{ display: table;
position: absolute;
top: 100px;
width: 100%;
height: 25px;
background: #e0e0e0;
}

#nav > ul
{ display: table-row;
}

#nav > ul > li
{ display: table-cell;
padding: 2px 10px;
white-space: nowrap;
text-align: center;
}

We define the container element as table, list as table row, list item as table cell and we got ourselves the desired rendering effect for graphic browsers.

Now, as one would expect IE does not comprehend the display values of table, table-row, table-cell. So in order to accomodate those uneducated souls, who are still using this "piece of turd" ;) we can resort to some CSS hacks that allow a close effect...:
#nav
{ display: block;
display: table;
position: absolute;
top: 100px;
width: 100%;
height: 25px;
background: #e0e0e0;
}

#nav ul
{ display: block;
display: table-row;
}

#nav ul li
{ display: block;
display: table-cell;
float: left;
padding: 2px 10px;
white-space: nowrap;
text-align: center;
}

Page example can be found here: www.vladdy.net/Demos/tablewotable.html

[DaveSW]

Looks fantastic in Opera. IE6 does display them across the page, but not spaced. Perhaps we should be grateful it displays them at all...

Thanks for the code.

Dave

[Hester]

Add 'width:20%;' to the '#nav ul li' bit. Then IE6 spaces them like Mozilla.

[Hester]

Vladdy, I put a link to your great idea on my site:

http://www.designdetector.com

[Vladdy]

Thanks, Hester.
I would not call it a great idea though, just paying attention to manuals.... :D :D

Also I like your suggestion about adding width declaration to help damn IE. It should work for short lists. However I can anticipate problems when the list is longer and contains items of varying lengths.