How I produce tabular data without tables

HTML & CSS
1

I have read many, many articles about creating tableless CSS designs that “only use tables to display tabular data.” My question is, why use tables at all?

I know there are those of you out there that can’t bear to think about what life would be without tables, but here is how I avoid using tables at all costs.

There are many different tutorials on how to create a design with no tables, but not very many tutorials on how to create tabular data without tables. Here is a simple solution I found which immensly reduces the volume of characters in your code. It is a simple 3-column design using unordered-lists.

CSS:

ul.skills {
list-style-type: none;
margin-bottom: -40px;
padding-left: 4px;
text-indent:8px;
font-size: 11px;
height: 1%;
}

li.skill {
border-bottom: 1px solid #EEEEEE;
width: 250px;
margin-bottom: -15px;
height: 1%;
color: #747474;
}

li.expert{
position: relative;
left: 200px;
width: 250px;
margin-bottom: 15px;
border-bottom: 1px solid #EEEEEE;
height: 1%;
color: #747474;
}

li.time{
position: relative;
top: -30px;
left: 400px;
width: 134px;
border-bottom: 1px solid #EEEEEE;
height: 1%;
color: #747474;
}

XHTML:


<ul class="skills">
<li class="skill">HTML (code &amp; wysiwyg)</li>
<li class="expert">Expert</li>
<li class="time">6 years</li>
</ul>
<ul class="skills">
<li class="skill">CSS</li>
<li class="expert">Expert</li>
<li class="time">5 years</li>
</ul>

This will give you a 3-column, 2-row set of data.

Works in FF and IE, not tested on NN or Opera. It’s standards compliant.

2

Tables ARE standards compliant. Tables are NOT evil. Tables are very much useful. There’s absolutely NOTHING wrong with using them. The only thing tables should NOT be used for is design, as they were not defined for that. They were defined for tabular content.

To make my point clear:


   #list
   {
   	 margin: 10px;
   }
   #list b
   {
   	 display: block;
   	 margin-left: 10px;
 	 padding-left: 4px;
   	 background-image: url(bullet.png);
   }


   <div id="list">
   	<b>One</b>
   	<b>Two</b>
   	<b>Three</b>
   </div>

There! I didn’t use uls or lis! Does that mean a thing? No, it means I’m wasting my tmie adding tons of excessive CSS that’s completely unneccessary because there’s a 100% valid approach that could be taken instead.

3

Well, I think you should avoid tables for layouy, but they’re not all bad. If you use tables for what they were designed for, tabular data, I can’t see any harm in that.

Oops, got beat to it.

I agree with someonewhois. Loose the unnecessary css. :agree:

4

There is nothing inherently wrong with using tables in the right circumstances, and when it comes to tabular data there is nothing better.

You’ve gone to a lot of effort to replicate the most basic functions HTML tables offer, but what about caption, summary, thead, tbody, tfooter, scope, header cells and all those other good things which make tables rich for sighted users and accessible to those using assistive technologies?

To extend your argument, why bother with any elements at all? Just mark everything up in divs and style appropriately? Of course not - HTML gives us a limited but adequate toolset - we should use it to best appropriate effect, and that includes using tables for tabular data.

5

Hi,

While you’ve come up with an elegant design and as an exercise in css styling your page looks very good but I still must agree with the above comments in that a table would be the more semantically correct element to use in your situation.

However I wouldn’t rule out your method as it is quite neat and economical and you are listing something so its not that far out out. The only thng that gets lost is the relationship between elements which a table is perfect for (and what it was designed for) and as mentioned above has additional features such as captions,summary, thead,tbody tfoot etc all of which can describe the content from the inside out.

But thanks for sharing anyway :slight_smile:

And if you want a laugh to see what it takes to make a perfect css table in a fluid environment then here you are :slight_smile:

http://www.pmob.co.uk/temp/fourcellsboth.htm

6