Welcome to WebmasterWorld Guest from 23.22.17.192

Forum Moderators: not2easy

Message Too Old, No Replies

Making tables with css?

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

10+ Year Member



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.

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

10+ Year Member



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.
2:48 pm on Apr 29, 2005 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

10+ Year Member



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?

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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... ;)

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

10+ Year Member



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!

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

10+ Year Member



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.

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

10+ Year Member



Thanks Stormfx!

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

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

10+ Year Member



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. ;)

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

WebmasterWorld Senior Member 10+ Year Member



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

div
s and
span
s 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.