TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

The easiest way to make an horizontal list act like a table is to make it a table...

In my opinion, the coolest thing about tables is that column width is computed based on content and overall table width.
For example, in a navigation menu based on links within a single row table, the cell containing the "Products and Services" text link would be wider than the one containing the "Home" text link, regardless of the width of the table.

It is possible to replace a table with another HTML element and use CSS (Cascading Styles Sheet) properties to mimic the display of a table, but unfortunately many browsers ignore "display:table" and "display:table-cell".

So if there is no better solution than using a table to create "stretchy" cells, why not use one? Are tables that evil? As far as I know, the W3C says we can use tables for layout as long as we follow checkpoints 5.3 and 5.4:

  • 5.3: "Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]".
  • 5.4: "If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]".

So far so good, but what about semantics?
When it comes to providing a container for a list of links, it is tough to argue that a table is a better fit than an HTML list.
So we're back to square one; the table is out and standardistas must stick to using a list or take the risk of losing their "badge". Unfortunately, sometimes the dilemma is not about losing the badge, but losing the client.

This article is about giving the client what she wants while sticking with the semantic element: an UL (Unordered List)...

See this technique in action.

How it works

CSS rules are applied to style the list horizontally
In some browsers, things already look good with only the CSS styling, but In Internet Explorer all the items have the same width.
The script takes from here
When the page loads, the list is transformed into a table. If the list contains a title attribute, its value is used with a caption element created along with the table. This element is hidden in visual browsers but accessible by screen-readers.

How to make it work

The markup

A simple Unordered List will do. Just make sure to include ID="TJK_ul" in the opening tag (the title attribute is optional).
For example:

<ul id="TJK_ul" title="Navigation Menu">
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="products_Services.html">Products &amp; Services</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="terms.html">Terms of use</a></li>
</ul>

The CSS rules

Cut and paste the CSS rules below at the bottom of your stylesheet.

Take note Note that the script has given the table an ID (TJK_table).

#TJK_ul,
#TJK_table {width:100%;text-align:center;border:1px solid #99f;margin:0;padding:0;}
#TJK_ul {display:table;}
#TJK_table td {background:#99f;}
#TJK_ul li {display:table-cell;list-style:none;}
#TJK_table a {width:100%;line-height:2.5em;display:block;text-decoration:none;color:#fff;}
#TJK_ul a {display:block;line-height:2.5em;margin:2px 1px;text-decoration:none;background:#99f;color:#fff;border:1px solid #99f;}
#TJK_table a:hover,
#TJK_ul a:hover {background:#f93;}
#TJK_table caption {height:0;line-height:0;padding:0;overflow:hidden;visibility:hidden/*FF*/;}
/*\*//*/
#TJK_ul {display:block;}
#TJK_ul li {display:inline-block;width:19.5%;}
/* */

Now, you need to include the following Conditional Comment before the closing head tag in your document (actually it could be anywhere in the head element as long as it is below the above rules).

<!--[if lte IE 7]>
<style type="text/css" media="screen">
#TJK_ul {margin-bottom:1em;}
#TJK_ul li {float:left;width:19.9%;}
#TJK_ul a {zoom:1;}
</style>
<![endif]--> </head>

Take note About the two highlighted values above:
For IE (Internet Explorer) it is important to change the width values in the two blocks above. Because without script support (and only without script support), IE uses these values to display the containers (the List Items) with an equal width. In a perfect world, we would divide 100% by the number of items in the list; but unfortunately, with IE, nothing is that simple and we need to anticipate a rounding error. This is why in our example, we're not using 20% (100% / 5) but 19.9% (and 19.5% for IE Mac). If you use more (or less) than 5 items, you'll need to figure out the proper value to use so Internet Explorer doesn't drop the last item on a second line.

The script

Download TJK_ul2table.zip (2 KB) and unzip the file into a directory within your site. Then, use a SCRIPT element to link the JS file (TJK_ul2table.js) to your pages within the Conditional Comment, as shown below:

<!--[if lte IE 7]>
<style type="text/css" media="screen">
#TJK_ul {margin-bottom:1em;}
#TJK_ul li {float:left;width:19.9%;}
#TJK_ul a {zoom:1;}
</style>
<script type="text/javascript" src="/js/TJK_ul2table.js"></script>
<![endif]-->
</head>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Use the onload attribute of the body element to call the function; for example: <body onload="TJK_ul2table()"> or, better, use a technique like the one explained here: executing JavaScript on page load.

Graceful degradation

With Javascript and Styles ON
There is no visual degradation across browsers, the menu looks the same.
With Javascript and Styles OFF
Links appear as a vertical list.
With Javascript OFF but styles ON
In Internet Explorer
The menu shows "cells" (list items) of equal width.
In "better" browsers
The menu looks the same with or without Javascript support.
With Javascript ON but Styles OFF
Links appear horizontally, caption element shows above the links.

Things to consider

This script (not the CSS part) is mostly a hack for Internet Explorer Win (IE 7 included). In my opinion, the only advantage of using the script in browsers that support "table" and "table-cell" is that without style support the list would not take much real estate (since it displays horizontally).
So if you do not care for IE 5 Mac and want to "expose" this script to all browsers, simply move the script element outside of the Conditional Comment.

Please use this contact form to send feedback and report errors.