Css and tabular data 1

[maanton]

Hi!

I've been experimenting with ridding my pages of the tables. CSS works beautifully for general layout purposes, but I have yet to find a good way to reproduce table cells and rows using CSS.
I know that lots of people think tables are okay for tabular data, but I'd like to see how it can be done with CSS.

Thanks in advance!

 

[BabyJeffy]

OK... I've whipped this little example together for you. It's just an example and contains just minimal CSS so you get the idea. I tested it in Safari on the Mac... but I'm expecting it'll work on what you have.

The CSS:

<style type="text/css">
.table_container {position:relative;}
.row {display:block;float:left;clear:left;margin:0.1em 0;}
.row span {display:block;float:left;width:9em;border:1px solid black;margin:0.25em;}
</style>

And the following HTML:

<div class="table_container">
<span class="row"><span>Col 1</span><span>Col 2</span><span>Col 3</span></span>
<span class="row"><span>ACol 1</span><span>ACol 2</span><span>ACol 3</span></span>
<span class="row"><span>AACol 1</span><span>AACol 2</span><span>AACol 3</span></span>
</div>

Hope this gives you a good idea!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Foamcow]

At the end of the day tables are the most sensible, logical and efficient way to mark up tabular data.

Replicating table behaviour with CSS is a pointless exercise.

Jeff's example works perfectly. But where is the benefit over using table, tr and td tags? They are designed for that purpose and are by far the most logical and [em]meaningful[/em] way to mark up tabular data.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[BabyJeffy]

Foamy's right.


[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[maanton]

My mistake... it is not exactly tabular data.
Basically I redesign a Travel´s Agent site which gets data (as text and images) from a database.
Do I have to use tables?

How do the blogs work?

 

[Vragabond]

If you're talking about the Summer Specials (or whatever those down there are), you would do this like this (pseudo):

clearing heading
floated div
 image
 text
floated paragraph

clearing heading
...

 

[dantre]

Tables are for tabular data.

The reason why CSS purists tend to dislike them is because they are very frequently inappropriately used for layout, not tabular data.

If the data you want to format is in fact tabular, then by all means, use a table.

If you just want a layout that is similar but not actually tabular, use CSS with div/span/wtv elements.