Topic: tables not displayed tabularly

I'm in an interesting predicament. I have tabular data I would like to display not in table format.
My table consists of many rows, each with four cells.

The first cell always having some lines of description text. This text could be infinate length, but will likely contain a paragraph or three -- maybe 200-400 words.
The next three columns will each contain a boolean (True/False) value as it relates to the description text.

I would like this to display with the three boolean cells immediately beneath the paragraph, with the paragraph (first cell of the table) stretching the width of the window.

Make sense?

Is there a CSS way to do this while maintaing the logical, tabular structure of my XHTML?

I'd tell you, but this crappy forum software just lost my entire post for me. "Please use your back button," eh? How angry am I right now.

you should post in notepad and dump the wysiwyg poster

sorry, I bet that didn't help =D

Jason

How angry are you?
Hopefully not very anymore. Several hours have passed.

I've played around with trying to set the display of that first cell to 'block' and 'table-row' but it seems that doesn't work.
I've looked 'all over' (meyerweb, glish, bluerobot, various mail groups, the w3c specs and google) and I just can't seem to find a reasonable answer.
Actually, there is a paragraph I found at w3c that made me think maybe this isn't possible:

quote:

---

User agents may ignore these 'display' property values for HTML documents, since authors should not alter an element's expected behavior.

---

Hmmm.
On the one hand this tells me I shouldn't expect this behavior. On the other hand, maybe it tells me I should try to write the desired piece as non-XHTML XML...but the browser support for XML in general seems poor.

Slime, if you're not too angry still, I'd appreciate some input here.
I'm lost.



[This message has been edited by mobrul (edited 08-05-2003).]

Perhaps this is a silly question, as I am still somewhat unclear on what you're working with, but why not simply make two rows out of it?

Or perhaps a definition list?

If you're working with this:

<table class="fancytable">
<tr>
<td class="description"><p>...</p></td>
<td>true</td>
<td>false</td>
<td>true</td>
</tr>
...
</table>

Then I would suggest trying this, for starters:

table.fancytable, table.fancytable tr, table.fancytable td {
display:block;
}
table.fancytable td {
float:left;
width:33%;
}
table.fancytable td.description {
float:none;
}

For starters.

Why not make two rows out of it?
[rote answer]because XHTML is not a design language[/rote answer]

Really, that is not very far from the truth. I'm just trying to be a 'purist'.
What I have is this:

First Cell:
Modifiable list of objectives for a project. Lots of people, over lots of time. These objectives are likely to be detailed, thus my guess of 200-400 words in length.

Second Cell:
This objective been completed -- Simple true/false

Third Cell:
This objective is on budget -- Simple true/false

Fourth Cell:
This objective is on time -- Simple true/false

As you can see, the first cell has potential to be big, while the second through fourth cells will be small.
If I display this as 'normal' table layout, it doesn't look 'balanced' with the large blocks of text on the left and the small, simple three words on the right.
I'd like to display it in the way I described earlier. I think it looks better that way.
I'm [slightly tongue in cheek] 'seperating content from style' [/slightly tongue in cheek]

If I use two rows, I break the semantics of the table.
My table, if it had headings, would be headed as such:

<thead>

	<th>Objective Description</th>

	<th>Objective Completed</th>

	<th>Objective on Budget</th>

	<th>Objective on Time</th>

</thead>

I believe you a dl can be presented as such, but I'm not convinced it will have the same meaning as the table I described.
Convince me.

[edit: Thank you slime. I'll give it a try. For whatever reason I didn't think of float.]

[This message has been edited by mobrul (edited 08-05-2003).]

I played with the float idea and eventually got something that works really well in Mozilla 1.4, Opera 7.11 and NN 7.1. IE 6.0 completely ignores the float.

My new and not-quite-working stylesheet looks something like this:

table.fancytable, table.fancytable tr, table.fancytable td {

	display:block;

	text-align:center;

}

table.fancytable td {

	float:left;

	width:33%;

}

table.fancytable td.description {

	width:100%;

	float:right;

	clear:both;

}

At first I wasn't sure if IE was ignoring my display or my float. I set the td.description to display:none and it actually worked as expected.
Furthermore, when I set table.fancytable td to float:right (and then I also tried float:right + clear:right) I got absolutely no change in IE.
This leads me to believe that IE ignores the float style when applied to table stuff. This doesn't actually surprise me as IE has been known to have other float issues.

Finally, I went looking at the microsoft website and found this page on Uncle Bill's interpretation of the float property. If you look down near the bottom, there is a list of elements to which the float property applies. TD ain't one of them.
Maybe I'm just out o' luck.

Why don't you upload the page and we can take a look at it?

OK.
Here it is though this is the very beginnings of a project. Not anything there, really. More of a 'can I do this?' sort of test.
It does what I want in Opera, Netscape and Mozilla (latest versions, at least -- the extent of my testing to date) but gets hung up in IE.

Darn, it looks like IE simply doesn't allow you to change the display type of a table. =(

I hate IE.

Yep, that's right. IE doesn't support alternate table formatting. And as long as it holds 90% market share, you can just forget about it


Still, you just might wanna check out this neat page I found that shows just how radically a table's visual appearance can be (everything is formatted with the CSS "display" property). Needless to say, you can't use IE to view this one. So boot up your standards-compliant browser and check it out:

http://moronicbajebus.com/playground/cssplay/reformat-table/

Yet another example:

http://moronicbajebus.com/playground/cssplay/reformat-table/index2.html


"Those are tables??"



[This message has been edited by ozphactor (edited 08-07-2003).]

Shame.

Well, on another note (still struggling with that 'semantics of a table' bit...), why does it have to be a table at all?

I understand that it is technically tabular data, but it could be just as valid in list form, and much easier to format apparantly.

And like I mentioned before, a definition list would work well if youwanted headers for this.




[This message has been edited by DL-44 (edited 08-07-2003).]

stupid, bloody, lazy, no-good IE...

So, tables are out. That's unfortunate.
A list, a definition list. How would you do it?

<dl>

<dt>description paragraphs</dt>

<dd>complete?</dd>

<dd>on budget?</dd>

<dd>on time?</dd>

</dl>

or did you have some other mark-up in mind?

Either like that, of if you wanted actual headers, make each header the <dt> and each 'table cell' the <dd>

Or simply a <ul> would work fine as well.

Wow, you can have multiple definitions for each definition term? Is that valid?

Sorry, I don't use definition lists very often, so I wouldn't know...


[EDIT: Well, it validates. Heh. I never knew you could do that. God, I'm clueless... ]



[This message has been edited by ozphactor (edited 08-08-2003).]

Well, we wouldn't want to be narrow-minded. There's always more than one definition for any term

According to http://www.w3.org/TR/html401/struct/lists.html#h-10.3 , you can even have multiple *terms* for each *definition*.

Well hot damn!

This dl thing is incredible.
From now on no headings, no paragraphs, no divs, no images. Only dictionary lists. Dls for everything!!!
The possibilities are endless...

Really, I might end up using them for this project, but I'm not happy about it. It just doesn't feel right. Maybe I'm just being (too) academic about this, but I'm not really defining anything.

Hm

quote:

---

From now on no headings, no paragraphs, no divs, no images. Only dictionary lists. Dls for everything!!!

---

I'm pretty excited too, now that I know <dl>s can be used in this way, but... <dl>s to replace images??

quote:

---

This DL thing is incredible.

---

Well gee, thanks

But seriously, yeah - I've just recently started using <dl>'s because of formatting problems on a site I'm working on.

Truly Beautiful things =)


{edit - ok, not actually formatting problems. Just the fact that I suddenly realized that what I needed to do was what <dl>'s were meant for. And stopped trying to make a <ul> do something it wasn't meant for...}

And on another note, having been so excited about it myself when I realized that this tag that has been around forever was actually extremely useful, I am very happy to have been able to share such excitement =)

[This message has been edited by DL-44 (edited 08-09-2003).]

mobrul - If I were you, I would stick to a table. I don't think a DL is really what you want here, because, as you said, you're not really defining anything (I believe).

However, since IE can't format the table the way you want, you may just want to use the more obvious, but slightly less elegant solution:

<tr>
<td colspan="3">description here</td>
</tr>
<tr>
<td>yes</td><td>no</td><td>yes</td>
</tr>

It's not a perfect semantic representation of the data that you're presenting, but it's not too far off, and it will create the appropriate visual display, too.

^ That was my first suggestion =) But he didn't like it...

I think a <dl> would be just fine.

We can argue semantics all day long on any of these things.

Is a table that breaks the logical structure of a table any more 'correct' than a definition list?
Not at all. And if the <dt>'s are used as headers, technically you are "defining" something.