homepage Welcome to WebmasterWorld Guest from 54.234.74.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Making tables with css?
edacsac




msg:1197079
 4:16 am on Apr 29, 2005 (gmt 0)

I'm building a message board. Yesterday I got fed up with css layout, and went back to tables. Tonight I tried again with css, and I'm moving along wonderfully. Everything is working great between all the browsers I can test by. The individual threads all use divs, and since I'm doing a nested post style, I've made a neat loop to increment a padding-left variable to indent the nested posts as well.

Now I'm at the point of changing over the forum indexes for example, and I'm at a loss. Would a forum index truely be tabular data that should stay as a table? It seems all the savings in code I made with layout will be lost here, since the forum index will be heavy weight using tables.

I've already tried the index with what I know of css, but in this case, when you shrink the browser and the page degrades, nothing lines up of course.

Can I use css for the indexes? 5 or 6 columns, with unlimited rows all lining up nice, without the right-most columns falling in on a new row when you shrink the browser? Like a "nowrap" theory?

I've googled on this without luck. Any input would be appreciated.

 

natto




msg:1197080
 2:29 pm on Apr 29, 2005 (gmt 0)

Have you tried making the columns fixed-width and enclosing them in a wrapper div that's also fixed width? This may stop them from wrapping.

encyclo




msg:1197081
 2:48 pm on Apr 29, 2005 (gmt 0)

I would say that a forum index page is classic tabular data, but that doesn't mean that you can't use skeleton tables and style them with CSS. You define everything externally including table cell widths, no-wrap, etc. One thing you should try for is to make the table as assessible as possible, including a summary and using proper
<th></th> for section headers (it's easier for the CSS too).

If your index doesn't fit into a traditional mold of forum index design, then you might want to consider using a definition list instead. You can do some surprising styling with a definition list due to its multi-layer structure.

edacsac




msg:1197082
 3:52 pm on Apr 29, 2005 (gmt 0)

Have you tried making the columns fixed-width and enclosing them in a wrapper div that's also fixed width? This may stop them from wrapping.

Thanks for the reply natto! I have, but the page needs to be fluid as well, so tables can get narrower, but never wrap.

If your index doesn't fit into a traditional mold of forum index design, then you might want to consider using a definition list instead. You can do some surprising styling with a definition list due to its multi-layer structure.

this sounds interesting, cyclo. Maybe what I want. Know any good resources on dl styling?

moltar




msg:1197083
 4:23 pm on Apr 29, 2005 (gmt 0)

It seems all the savings in code I made with layout will be lost here, since the forum index will be heavy weight using tables.

It does not add that much weight at all. "div" is 3 bytes, "td" is 2 bytes. td+tr - 4 bytes. It depends on the situation, but sometimes it sure can save you some bytes.

I'd go with a table.

encyclo




msg:1197084
 4:39 pm on Apr 29, 2005 (gmt 0)

For the definition list, your basic structure might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>definition list test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
dl {
float:left;
width:70%;
border:1px solid #999;
}

dl dt {
float:left;
clear:left;
width:25%;
padding:1em;
margin:0 -1px 0 0;
border-right:1px solid #999;
}

dl dd {
width:50%;
padding:1em;
float: left;
margin: 0 ;
border-left:1px solid #999;
clear: right;
}

dl> dd + dt, dl > dd + dt + dd {
border-top:1px solid #999;
}
</style>
</head>
<body>
<dl>
<dt><a href="#">My first forum</a></dt>
<dd>Forum description here.</dd>
<dt><a href="#">Another forum</a></dt>
<dd>Forum description here.</dd>
<dt><a href="#">And a third forum</a></dt>
<dd>Forum description here.</dd>
</dl>
</body>
</html>

Basically, because you have three elements to style (dl, dt, dd) you've got much more latitude with the cascade. Don't forget that you can nest block elements such as <p></p> within the definition list elements, so you've got even more possibilities. For each dt you can have multiple dd elements, and multiple dt elements within one dl.

I'd still go for a table myself, though... ;)

edacsac




msg:1197085
 6:23 pm on Apr 29, 2005 (gmt 0)

Thanks everyone!

It looks like a majority on using the table, especially when you break it down into bytes. I will try the dl example though, just to see how it works. Maybe it will give me a different perspective on laying out the index.

Thanks again!

Stormfx




msg:1197086
 8:29 pm on Apr 29, 2005 (gmt 0)

Just a note: Outside of fanatical CSS/P things, the entire workings of a forum or bulletin board would be considered tabular data.

As was mentioned, use a bare bones table and style it, because in order to effectively come out with the same results you'd get by using tables, you'll have more 'bytes' wrapped up in nested div tags.

edacsac




msg:1197087
 11:22 pm on Apr 29, 2005 (gmt 0)

Thanks Stormfx!

So I might as well display the individual threads as tables too, if the whole message board is considered tabular.

Stormfx




msg:1197088
 5:23 am on Apr 30, 2005 (gmt 0)

Yes. As a matter of fact, any data that is drawn from a database or is in need of being displayed in columns and/or rows are/is considered tabular data. Think of it like this:

2+ Rows & 2+ Columns = Table

To be perfectly honest, forms can technically be considered tabular, since normally they consist of:

-----------------
Label Element
-----------------
Label Element
-----------------

and so forth. Of course, as with most things in this place called life, opinions vary. ;)

moltar




msg:1197089
 7:18 am on May 1, 2005 (gmt 0)

The way I like to look at this is "Does this mark up make sense without style?" aka semantic mark up. Basically I remove the style and look at the bare-bones page and analyze.

If you used divs and spans with CSS/P all over the place (for table imitation), and looked at the page without styles, you'd see a complete mess. That's worse then using tables for layout.

Tables are not evil if used properly.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved