CSS : Using a Table when I shouldn't.

Question

I was trying to create a CSS only badge with lots of details. The contents were like this.

**General Details:** 
ID no(6digit number)
Date of Joining
Group
Sub Group

**Personal Details**
Name
Date of Birth
Gender
**Referrer Details**
Name of Referrer
URI
and so on

I tried using using <ul> <li> and then styling that, then i tried the same with div and span, however I could not get a consistent look. Finally I had to go for a table. Now at least the data appears uniformly, but i am pissed because I am using tables for non tabular data. Is there an easy way to design structured layouts with css?

Answer 1

Use any of these CSS Grid systems.

Answer 2

I think this data is tabular enough to be put into a table, only pretentious developers will complain, end-users will never know the difference. Any how, it shouldn't take more than 47 minutes to make a CSS layout. http://giveupandusetables.com/

Answer 3

Is there an easy way to design structured layouts with css?

Only after you've invested the time, really. CSS seems simple, but using its primitives to compose complex layouts takes some practice and some familiarity with the various rendering engine quirks. It's easier than it used to be, and grid systems can help but even they require some investment. There's no royal road.

If you don't have to support IE 6 & 7, you might get away with using the CSS display rules (with values table-cell, table-row, and table). That'll get you a lot of the table-like layout behavior w/o the markup.

But it's worth noting that using table markup for non-tabular markup really isn't crossing the streams or anything. A lot of the handwringing over the loss of semantics is way overblown. Lynx has been able to use heuristics to make distinctions between layout and semantic tables since at least 1999. Some screen readers do this too. Which makes sense, really -- if we'd been waiting for table layouts to go away before we had user agents that could work with them, we'd just be getting started. You don't have to feel guilty if you use it, you're not holding back the semantic web or kicking blind people in the face. CSS positioning is a tool, and it's often a good one, but if it doesn't fit your goals along with the skills/resources you have at hand, feel free to use table markup.

If you do use table markup, though, I recommend putting class="layout" on it. It gives a handle for putting some of the table styling in your stylesheet, signals to other developers what you're doing, and might even make it easier for user agents to make the semantic/layout distinction someday. Also, don't nest tables. You can almost always avoid it if you really try, and while it's possible to have clean, easy-to-read and edit markup with tables, the probability that you'll end up with something evil and snarly increases dramatically if you nest.

Answer 4

You could absolutely position each element to the desired location:

li.general {
position:absolute;
top: 10px;
left: 20px;
}
...

Answer 5

maybe not the best answer but I like to refer to A List Apart