Forum Moderators: not2easy
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.
<th></th>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.
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?
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.
<!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 (
dldtdd<p></p>dtdddtdlI'd still go for a table myself, though... ;)
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!
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.
So I might as well display the individual threads as tables too, if the whole message board is considered tabular.
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. ;)
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.
