Back to TJK Design: Using Javascript to replace - on the fly - an HTML list with a table.

ez-css Putting the 'less' in table-less layouts.

This demo page is mostly for Internet Explorer (Win) users , as better browsers display both examples the same.

An Unordered List with no styles applied

The same list styled with CSS

If there is script support, that same list is transformed into a table

In this example, I have included class and accesskey attributes to show that nothing is "lost" while the content of the List Items is transfered to Table cells.

Source

<ul id="TJK_ul" title="Navigation Menu">
<li><a href="/" accesskey="H">Home</a></li>
<li><a href="#" class="ubiAt">About Us</a></li>
<li><a href="#">Products &amp; Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms of use</a></li>
</ul>

Generated Source

<table id="TJK_table">
<caption>Navigation Menu</caption>
<tbody>
<tr>
<td><a href="/" accesskey="H">Home</a></td>
<td><a href="#" class="ubiAt">About Us</a></td>
<td><a href="#">Products &amp; Services</a></td>
<td><a href="#">Contact Us</a></td>
<td><a href="#">Terms of use</a></td>
</tr>
</tbody>
</table>

This work is licensed under a Creative Commons License

.