homepage Welcome to WebmasterWorld Guest from 50.19.206.49
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

    
CSS Challenge: post most flexible, bulletproof code to replace tables
You must be able to change number of columns and align rows
Clark




msg:3601667
 10:52 pm on Mar 15, 2008 (gmt 0)

I loved reading the code on this css for tables thread [webmasterworld.com], but thought it would be more instructive to turn this into a challenge and structure the thread to be just practical posts of code, no debates or hand wringing.

Challenge:
Turn this into smallest, most flexible css layout possible. If it's a bit more code, but more flexible, so much the better. I'll show two different versions of some html with tables, and ask you to provide the unchangeable CSS that works across multiple columns and rows with only changes to the html. I used a forum concept as the sample since that is typically difficult to lay out with CSS, is not exactly tabular data, yet looks great in table structure..

To be clear, the CSS has to be extendable (extensible?)...it has to cover multiple rows and columns. You can't provide one CSS stylesheet for 2 columns, another css stylesheet for 4 columns. It should all work with one stylesheet. Make sense?

OK, here's the html:

HTML 1:

<html>
<head>
<title>My wonderful table layout</title>
</head>
<body>
<table>
<tr><td align="left">Forums Index</td><td align="right"><a href="help.html">Help</a></td></tr>
<tr><td align="left">Category</td><td align="center">Posts</td></tr>
<tr><td>HTML & Browsers</td><td>1000</td></tr>
</table>
</body>
</html>

HTML 2:

<html>
<head>
<title>My wonderful table layout expanded</title>
</head>
<body>
<table>
<tr><td colspan="3" align="center">Forums Index</td><td align="right"><a href="help.html">Help</a></td></tr>
<tr><td align="left">Category</td><td>Posts</td><td>Moderator</td><td>Last Message</td></tr>
<tr><td>HTML & Browsers</td><td>1000</td><td>Brett Tabke</td><td>CSS Challenge</td></tr>
</table>
</body>
</html>

Here's the format of your response:

table.css:
your css here

HTML1:

<html>
<body>
<-- import table.css here -->
<-- html to support example 1 here -->
</body>
</html>

HTML2:

<html>
<body>
<-- import table.css here -->
<-- html to support example 2 w/ extra columns and rows here -->
</body>
</html>

The winner will gain fame, glory and appreciation of many members who will use their code over and over again ;)

Is this even doable with css?

 

MarkFilipak




msg:3601786
 2:26 am on Mar 16, 2008 (gmt 0)

Here's a quibble:
<td colspan="3" align="center">

The above (align=) is HTML 4, not HTML 4.01. What is the scope of the challenge? Let's see a DTD reference, eh?

swa66




msg:3602084
 2:22 pm on Mar 16, 2008 (gmt 0)

CSS is not tables.

Tables are tables, and when used what they are intended for should not be replaced by CSS.

I see no point in the exercise.

Try to think of your html pages as more than a matrix structure.

Or try to revert the challenge and make a table based layout with a text that goes next to a floated image on the right that continues under the image. Without knowing the size of the text, nor knowing the size of the image. Oh, and yes: the image has to have a caption under it too. If you feel I constructed the challenge to be hard: try reading a magazine, you'll find such a layout quiet often.

CSS isn't about replacing tables abused for layout. CSS is about going with HTML to what is was intended for. And that requires you start by thinking differently about your pages.

Clark




msg:3602160
 4:59 pm on Mar 16, 2008 (gmt 0)

MarkFilipak: The above (align=) is HTML 4, not HTML 4.01. What is the scope of the challenge? Let's see a DTD reference, eh?

Fair enough. Feel free to ignore the align= so we can go with 4.01. Oh, and no javascript :)

swa66

I was hoping to avoid a debate thread but I guess I'll need to go into it a bit.

Tables are tables, and when used what they are intended for should not be replaced by CSS.

I see no point in the exercise.

The point of the exercise is to learn about css.

I know tables are not css and vice versa. However, tables should be for tabular data and not layout. What I'm wondering is if for a particular case you want a matrix style layout, how hard is it to achieve in css?

For the record, I'm still a beginner in css, desperately trying to become an expert. I'm in the process of customizing my vbulletin to a table-less layout. Something that the vb programmers have said in their own challenge thread, could not be done. So far I'm doing OK, but I've had to make some compromises...

Or try to revert the challenge and make a table based layout with a text that goes next to a floated image on the right that continues under the image. Without knowing the size of the text, nor knowing the size of the image. Oh, and yes: the image has to have a caption under it too. If you feel I constructed the challenge to be hard: try reading a magazine, you'll find such a layout quiet often.

I feel like you believe my challenge is meant to make a point about css vs. tables. I know there are many things you can do with css that you can't with tables. What I'm wondering is if it's possible to completely replace tables when you want a matrix layout. I still have to struggle with floating one thing to the left, another to the right on the same line, without having bugs in major browsers. I'm sure that's old hat to you. I can't wait until I can do that without thinking or testing...

If you think my challenge is not doable, I'll be happy if you say so. I'm hoping it is possible and I will use the code for sure if someone comes up with something good...

SuzyUK




msg:3602163
 5:01 pm on Mar 16, 2008 (gmt 0)

this is not for fame and glory, I don't copy table layouts to CSS, as I said over in the other thread it's a wasted exercise - I do however want to try to help you "get it" that it's not a CSS v's table thing.. and that they actually work well together, in a forum style page like you chose the category/thread listings etc's are tabular so I've used the best tool for the job.. and this is likely not what you're after but I hope you get that I'm trying to help you ;)

To be clear, the CSS has to be extendable (extensible?)...it has to cover multiple rows and columns
check

If it's a bit more code, but more flexible, so much the better.

It's a bit less and would actually be a lot less the more rows are added, and fully flexible

and ask you to provide the unchangeable CSS that works across multiple columns and rows with only changes to the html.

That's a bit back to front for CSS'ers as we actually need all of the HTML possibilities (the full template) in order to provide an "unchangeable" skin/css but I took the liberty and changed the HTML to add some things which help meet the criteria more easily - now if this were an actual template all you would have to do is add your unfettered rows/columns and change the class on the wrapper

here goes:
HTML: 1
<div id="wrapper" class="cols2">
<div id="head">
<h2>Forums Index</h2>
<ul><li><a href="help.html">Help</a></li></ul>
</div>

<table summary="listings">
<col class="c1">
<col class="c2">
<tr><th>Category</th><th>Posts</th></tr>
<tr><td>HTML &amp; Browsers</td><td>1000</td></tr>
</table>
</div>

HTML: 2
<div id="wrapper" class="cols4">
<div id="head">
<h2>Forums Index</h2>
<ul><li><a href="help.html">Help</a></li></ul>
</div>

<table summary="listings">
<col class="c1">
<col class="c2">
<col class="c3">
<col class="c4">
<tr><th>Category</th><th>Posts</th><th>Moderator</th><th>Last Message</th></tr>
<tr><td>HTML & Browsers</td><td>1000</td><td>Brett Tabke</td><td>CSS Challenge</td></tr>
</table>
</div>

CSS for all
html, body {margin: 0; padding: 0; font-size: 100%;}
body {font: 85%/1.6 verdana, arial, sans-serif; text-align: center;}

#wrapper {width: 80%; margin: 0 auto; text-align: left;}

table {border-collapse: collapse; width: 100%;}
table, td, th {border: 1px solid #000; }
th, td {padding: 3px;}

/* the selector for this rule needs to be more specific to overide the col classes below */
table th {background: #fff; font-weight: bold;}

h1, h2 {font-family: "trebuchet MS", georgia, sans-serif;}

#head {
background: #abc;
padding: 10px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #000;
overflow: hidden;
}

/* disclaimer: filter the next two rules into a CC or preferred IE filter */
#head {display: inline-block;} /* TRIP haslayout */
#head {display: block;} /* SWITCH back the display */

#head h2 {float: left; margin: 0;}
#head ul {margin: 0; padding: 0; list-style: none; text-align: right;}
#head li {display: inline;}
#head li a {color: #f00; text-decoration: none;}
#head li a:hover {color: #000; text-decoration: underline;}

/* can only do border, background, width & visibility on col elements */
.c1 {background: #abc;}
.c2 {background: #fff;}
.c3 {background: #eee;}
.c4 {background: #ffc;}

/* can only do text-alignment on the cols for IE so use sibling selectors for compliancy too */
th, td, .c1 {text-align: left;}
th+th, td+td, .c2, .c3, .c4 {text-align: center;}

/* column widths and overrides for the two column listing */
.cols2 .c1 {width: 80%;}
.cols2 .c2 {background: #ffc;}

/* column widths and overrides for the four column listing */
.cols4 .c1 {}
.cols4 .c2 {}
.cols4 .c3 {}
.cols4 .c4 {}

</style>

Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

in the CSS I've incorporated a few of things I've seen you ask about recently so feel free to ask if you want though that would break your rules :o like I have already

you see the real CSS "Challenge" is not about abusing CSS to copy tables, if you want one, use one, even if you don't I hope this shows how you can use a very very simple one to create a framework and expand your CSS usage inside it.

-Suzy

SuzyUK




msg:3602171
 5:07 pm on Mar 16, 2008 (gmt 0)

x-posted..

The point of the exercise is to learn about css.

that's what I thought ;)

it's not that the challenge is not doable, it is and you might want to check out YUI grids or something like that, but in order to provide a grid like matrix like with YUI (which I don't agree with anyway;)) with CSS you need to put certain kinds of restrictive classes in the CSS and if you're going to do that, that's abuse of CSS and you might as well use a table framework!

swa66




msg:3602203
 5:58 pm on Mar 16, 2008 (gmt 0)

If you want to style HTML tables (containing tabular data) with CSS, there are a few interesting items to know about:

:first-child and :last-child selectors can be used to style the first and last element on a <tr> or fist and/or last <tr> differently from the body.

Border collapse is also interesting to read upon.

The precedence of border rendering on collapsed borders is interestign to read up on (and there IE has a bug they still have not correctded in the beta of IE8: Border display set to

Some browsers will render thead /tbody parts more separated than others (safari e.g. acts differently). So if you want full pixel perfect control, best to avoid the thead.

table {border-collapse:collapse; border-style: hidden;}
table td, table th {border: 1px solid red;}

should give you a table without outer border, but unfortunately IE doesn't honor the hidden border style having overruling properties.

To work around that you can select the first row and last rows andthe first and last element on each line to remove the border there too (can go in the IE conditional comments)

The :n-thchild selector would be nice to have, but browser crafters neglect to support that.

MarkFilipak




msg:3602317
 8:51 pm on Mar 16, 2008 (gmt 0)

I think all of us recognize the issue here without actually acknowledging it. These type of discussions seem to be interminable without reaching resolution because the real issue is glossed over.

The real issue is: What process should supply the template, the server or the client?

Tables that control layout are really templates, aren't they? They are very handy for that because, at a low level, table cells grow to fit their contents. At one time or another, we all have employed tables for exactly that purpose. It's a misuse of tables that pushes the template role off to the client. That's very seductive because the template (the table) doesn't need to be "content aware".

But even if tables are (mis)used as layout templates, a certain amount of "content awareness" is often needed, if only to add more rows or columns or whatnot as the content demands. The alternative is a "hard table" such as found in the typical, 3-column, e-commerce site.

If "content awareness" is required, then the solution is usually supplied by server script (even if it only adds more rows or columns). Of course, the server can address the issue by selectively downloading javascript to the client, but that's still a server-based solution and it's still "content aware", isn't it?

CSS is a client technology. I think it's unreasonable to expect a single client-based technology to provide a "content aware" template.

CSS is for layout. HTML is for content.

fside




msg:3603312
 8:48 pm on Mar 17, 2008 (gmt 0)

> most flexible css layout possible <

In other words, it flows with the flow. It adjusts to content, like a table. It's not difficult. See the example, below. CSS actually degrades better, if it weren't that HELP is placed where it is. Go up to CSS in the Firefox developer toolbar, and deactivate all styles, and see. And it's obviously more flexible than a TABLE. There would be a lot more one could do than just drop a few extra boxes 'below the line', as shown here.

I think the idea is not so much to represent a table. It can be done. See below. But consider other representations. CSS with the proper non-table HTML can probably provide more flexibility.

But don't misunderstand me. If a table suits, I think it ought to be used. It's quick and understandable. It IS a grid. And if you need a line chart with columns, I think tables are just fine. I hope they keep them forever. But it was INEVITABLE that tables would be used for a Framemaker-type layout. This happened as soon as there were tables. And this is how tables are now used on virtually every 'big budget' site. HTML was never just 'content', like XML is content. It was both content and layout. And tables were the principal method for layout.

<html>
<head>
<title>CSS table hack</title>

<style>

.tbl1 {
border: 2px solid #000;
margin: 1em;
}

.tbl1 TD {
padding: 0.5em;
border-right: 1px solid #000;
}

.tr1 {
background: #ffa;
}

.tr2 {
background: #afa;
}

.containdiv {
float:left;
margin:1em 0em 0em 1em;
}

.col {
float: left;
}

.colrgt {
margin-top:1em;
}

.col SPAN, .col1 SPAN {
display: block;
padding: 0.5em;
line-height: 2em;
border-right: 1px solid #000;
}

.col1 {
border-left: 2px solid #000;
}

.punc {
display: none !important;
}

.drb {
border-bottom: 2px solid #000;
}

.dr1 {
background: #ffa;
border-top: 2px solid #000;
}

.dr2{
background: #afa;
}

</style>

</head>
<body>

<table class="tbl1">
<tr class="tr1"><td align="left">Forums Index</td><td align="right"><a href="help.html">Help</a></td></tr>
<tr class="tr2"><td align="left">Category</td><td align="center">Posts</td></tr>
<tr><td>HTML & Browsers</td><td>1000</td></tr>
</table>

<table class="tbl1">
<tr class="tr1"><td colspan="3" align="center">Forums Index</td><td align="right"><a href="help.html">Help</a></td></tr>
<tr class="tr2"><td align="left">Category</td><td>Posts</td><td>Moderator</td><td>Last Message</td></tr>
<tr><td>HTML & Browsers</td><td>1000</td><td>Brett Tabke</td><td>CSS Challenge</td></tr>
</table>

<div class="containdiv">

<div class="col1">
<span class="punc"><br><br></span>
<span class="dr1" style="text-align:center;">Forums Index</span>
</div>

<div class="col" style="border-left: 2px solid #000;">
<span class="dr2">Category</span><span class="punc">: </span>
<span class="drb">HTML &amp; Browsers</span>
</div>

<div class="col">
<span class="dr2">Posts</span><span class="punc">: </span>
<span class="drb">1000</span>
</div>

<div class="col">
<span class="dr2">Moderators</span><span class="punc">: </span>
<span class="drb">Brett Tabke</span><span class="punc">, </span>
<span class="drb" style="border-left: 1px solid #000;">Dustin Diaz</span><span class="punc">, </span>
<span class="drb" style="border-left: 1px solid #000;">Dean Edwards</span>
</div>
</div>

<div class="col colrgt">
<span class="punc"><br></span>
<span style="text-align:right;" class="dr1">Help</span><span class="punc"><br></span>
<span class="dr2">Last Message</span><span class="punc">: </span>
<span class="drb">CSS Challenge</span>
</div>

</body>
</html>

Xapti




msg:3603578
 1:16 am on Mar 18, 2008 (gmt 0)

It sounds impossible to convert vBulletin to not use tables, indeed. It's designed all around tables, whether they are semantic or not. For forums to not use tables, it's required to re-code from scratch. This means either vBulletin completely re-coding some time in the future, or switching to a less-table intensive forum service. Ovbiously, it may be hard to transfer/convert forum databases to new forum services, but definately a whole lot easier than converting all of vbulletin to non-tables!

one note: forum indexes are a legitimate use for tables, considering they usually have multiple categories such as "status", "date created", "posts", "views", "last post date", "created by", "last poster", etc.

Tables are a pretty stupid idea for the most part in any actual thread viewing system though, since no matter if it's hybrid, tree view or linear (or whatever the views are), there are often no more than two columns, and even then, each column typically has mixed information in multiple sub-rows/sections which is improper table use unless they were like list items.

Forum posts and thread view is much easier to code and customize, and they also use less markup (typically, unless fancy borders are desired, which may bring it closer to table length), as well as flow and resize better than by using tables. Generally the only reason tables are being used, is because old, established services are stuck with them. (before accessibility to older browsers may have been a point, but it was hardly valid, and it isn't relevant anymore anyways with the new generations of browsers)

On yeah, and just to add: I think perhaps Suzy was referring to this, but table-based layouts do not need to look the same as float-based ones! they can have the same functionality, but still appear different. Sometimes the float method may be more desireable of an option, or perhaps sometimes table-based, but either way you can display your content accurately! it is oftentimes annoying when people want pixel perfect placement, just because they were used to an old method.

[edited by: Xapti at 1:21 am (utc) on Mar. 18, 2008]

fside




msg:3603657
 3:35 am on Mar 18, 2008 (gmt 0)

> most flexible css layout possible <

Let me know if that's what you were looking for. And again, I think the grid/table is another of those 'meta' notions that has to be implemented as we've seen with TABLE. I understand the 'purist' notion of trying to separate presentation from content. But there's always overlap in categories. Order is necessary to preserve content. Lists preserve order, at least nesting if an unordered list. They also suggest a treeview layout. And tables do the same thing. They keep relevant information together. But they can simply also be used to block text as done for any magazine or newspaper layout. In this case, I think the css proved more flexible, both when on, and when disabled. But as I said, I hope they never try to 'deprecate' the TABLE. It would be to misunderstand what is content, and what is presentation.

Clark




msg:3604897
 5:03 am on Mar 19, 2008 (gmt 0)

Thanks for all the posts guys. SES NY is keeping me pretty busy but I'll comment after the conference is over...

[edited by: SuzyUK at 4:52 pm (utc) on Mar. 19, 2008]
[edit reason] tidying [/edit]

SuzyUK




msg:3605644
 7:01 pm on Mar 19, 2008 (gmt 0)

table-based layouts do not need to look the same as float-based ones! they can have the same functionality,

Yes :) that what I was getting at.. in my sample I actually attempted to use a table for the "data" part, but that table is inside a CSS layout <h1>, ul etc are not in the table - however the CSS code for that table was meant to show that even if you do use a table inside a CSS layout, if the table is coded properly it needn't have any attributes in the HTML its alignment, colors, borders, widths can be controlled by CSS too.

what Clark wants is matrix style layout/code ideas, rather than a debate about the whyfores ;).

..so my bad if it looked like I was encouraging a debate, I really did just mean it as a idea for coding forums .. so let's keep this on the topic please

- anyone got any more code ideas for Clark before he gets home from SES!

[edited by: SuzyUK at 7:05 pm (utc) on Mar. 19, 2008]

swa66




msg:3605680
 7:29 pm on Mar 19, 2008 (gmt 0)

Actually one could look into CSS tables a bit deeper as well.
[w3.org...]

It allows you to set display:table and some more to create tables from the CSS.

It could be useful if you e.g. try to render data in a xml file, or data in <p> tags that you want to render as a table.

I've never tried it, so I've no clue as to how bad browsers would support it.

MarkFilipak




msg:3605955
 1:47 am on Mar 20, 2008 (gmt 0)

Is it just me? I don't know what the challenge is.

Is it:
Supply style for Clark's HTML tables, or
Supply a HTML/CSS scheme that replaces tables?

If it's the latter, the scheme has to be as specific as Clark's HTML tables vis-a-vis colspan/rowspan, etc.

What's the point?

fside




msg:3606192
 8:36 am on Mar 20, 2008 (gmt 0)

> more to create tables from the CSS <

Because to create a simple grid layout in the way browsers were able to do in the mid-90s, CSS must work with TABLES. You're pointing them to this W3C page is the answer to the 'challenge'. I think CSS is better than tables. But not for that purpose. It wasn't in CSS to produce a grid. But to incorporate a table design, in the way that say java programmers want to incorporate a java design into javascript, the only option, today, is more javascript to 'work the DOM' and even to produce the styles. You could script whatever you want to produce a real dynamic 'CSS' layout. You could take ordered data, and produce any complex grid you want, but with script. The 'hack' I showed didn't need any script. But it would have worked with script, and the classic solution to that classic problem is to use script.

SuzyUK




msg:3606330
 1:46 pm on Mar 20, 2008 (gmt 0)

swa66, support for them is really quite good and will likely/hopefully stop this argument for a bit when IE8 is more widely uptaken.. IE didn't support them until IE8 so that's what held back their usage for layout, they are the obvious next step for those that like their table layouts ;)

---------------------------

OK that's enough! 12 OT posts cut out yesterday and same starts today.. so

in the OP, one thing this thread was not, was made specifically clear
structure the thread to be just practical posts of code, no debates or hand wringing.

sorry, but you should take the merits or lack thereof of CSS to an appropriate thread as this one is now locked!

[edited by: SuzyUK at 1:56 pm (utc) on Mar. 20, 2008]

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