Structuring Table Lists

[silsteel]

I was wondering if there was a way using css to change the layout of a list in a table. This is what I'm looking for:

Current:
date1 event1 hour1
date2 event2 hour2
date2 event3 hour1
date2 event4 hour2
date3 event5 hour3
date3 event6 hour1

What i need:
date1 event1 hour1
date2 event2 hour2
_____ event3 hour1
_____ event4 hour2
date3 event5 hour3
_____ event6 hour1

(NOTE: the underscore it to signify empty space)

Basically I want the data not to repeat the same date and list it only under one. Is it possible using css?

[Arbitrator]

Try visibility: hidden. It hides the element but leaves the space where it would have been.

[silsteel]

Try visibility: hidden. It hides the element but leaves the space where it would have been.

I was thinking of that, but the tables would be automatically filled with data. So I would need to somehow isolate the single date from the other repeating ones. Thus I can't apply it as static.

[Arbitrator]

I was thinking of that, but the tables would be automatically filled with data. So I would need to somehow isolate the single date from the other repeating ones. Thus I can't apply it as static.

Do the table cells have associated classes, IDs, or other attributes? You can manipulate the cells based on their attributes, though with significant limitations if you're coding for the antiquated Internet Explorer 6, since it doesn't understand most of the advanced CSS selectors. You're not going to be able to manipulate the table's presentation directly based upon the contents of table cells though; that would be something that probably needs to be done by either altering the HTML or via the use of JavaScript.

[silsteel]

Well it has an associated id...here is a link to the website im talking about:
http://www.reverbthemag.com/index.ph...gcal&Itemid=48
Maybe it would be possible using php?


The site is running Joomla CMS and the component GigCal...I'm not sure if that helps but I would really appreciate your help

[Arbitrator]

here is a link to the website im talking about:
http://www.reverbthemag.com/index.ph...gcal&Itemid=48

That link doesn't seem to work in Firefox 1.5.0.7. Works in Internet Explorer 6 and Opera 9.01, though very slowly in the latter. It may be due to the extremely inefficient code. Edit: It loads in Firefox now though, again, slowly.

Anyway, I don't see the IDs you mentioned or anything else that's going to let you do this via CSS; looks like you'll need something more dynamic. If the date entries had class attribute values like "date20060925 event1", "date20060925 event2", and so forth, you could hide everything but contents assigned to the event1 class though.

Maybe it would be possible using php?

Possibly, but I don't know PHP.

[silsteel]

Well the id is incorporated into the php script that's why it's not present when you look at the source. But Im just wondering concept wise if using css you could format the way data is shown in a dynamic/changing table.

[ronaldb66]

Data formatting

CSS is meant for controlling the presentation of a page; your issue lies in the fact that your data is structured inappropriately.

If you want a value in a certain column to span several rows, than make it span several rows by use of the rowspan attibute; it should be possible to alter the script such that this is added to the table cell in question while generating the table markup (although I must admit this won't exactly be easy).

You could also opt for leaving the required cells empty; this also could be taken care of by the script, and would not require CSS trickery.

[silsteel]

CSS is meant for controlling the presentation of a page; your issue lies in the fact that your data is structured inappropriately.

If you want a value in a certain column to span several rows, than make it span several rows by use of the rowspan attibute; it should be possible to alter the script such that this is added to the table cell in question while generating the table markup (although I must admit this won't exactly be easy).

You could also opt for leaving the required cells empty; this also could be taken care of by the script, and would not require CSS trickery.

And what kind of script would let me do such things?