web 2.0: Table using UL and LI tags

The following is a simple web 2.0 implementation to separate the presentation code (CSS) and the actual data (HTML). The same can be accomplished using the <ul> and <li> tags of HTML.

The following is the code in for the CSS viz.,

ul { clear: both; }
li { float: left; list-style: none; border: 1px solid black; }
.columnOne{ width: 25px; }
.columnTwo{ width: 100px; }

Here I am displaying two columns with a few rows. The following is the HTML code viz.,

<ul>
<li class="columnOne">#</li>
<li class="columnTwo">Technology</li>
</ul>
<ul>
<li class="columnOne">1</li>
<li class="columnTwo">HTML</li>
</ul>
<ul>
<li class="columnOne">2</li>
<li class="columnTwo">JavaScript</li>
</ul>
<ul>
<li class="columnOne">3</li>
<li class="columnTwo">ColdFusion</li>
</ul>
<ul>
<li class="columnOne">4</li>
<li class="columnTwo">SQL</li>
</ul>

The output of the above code will be as follows viz.,

#	Technology
1	HTML
2	JavaScript
3	ColdFusion
4	SQL

The strategy is quite simple viz.,

1. Clear the floating elements on both the sides by using clear: both for the style definition in the UL tag.
2. Mention the float position as left for the style definition in the LI tag.
3. Mention other styles in appropriate column style sheet classes.

Tags: web 2.0, web 2.0 complicant Table layout