slicedtoad slicedtoad - 1 year ago 120
CSS Question

HTML table or list for graphical time schedule

I developed a prototype of a graphical time scheduler but need to re-code most of it since the JS is a mess at the moment. And I realized this is the best time to make any major changes to my design as well.

It uses an html table and looks like:

schedule app

Currently:


  • starts off empty and grows/shrinks via jquery rewriting it

  • fairly dynamic (time scale, sizes, etc can all be changed at run time)

  • horizontal lines are halfway through cells, they aren't cell borders (like here).

  • red boxes are anchored in a cell and given an offset and size via JS. same with blue box.

  • time tags are divs inside cells and not really fun to work with



I need to add a bunch more functionality:


  • some basic/limited zooming

  • multi-day tags

  • labels on the redboxes

  • hover/click effects

  • possibly some drag effects



I can figure out all of the above but I'm unsure if it's better to go with a table or list (or something else?). Technically, it's a "timetable" but it looks more like a graph. My experience with lists is very limited so I'm looking for someone's advice that's done this kind of thing before before. I don't want to switch to a list and realizing I need to change my base html type partway through.

Also, this is not a "public" app (it's behind a login), if that makes a difference. And my key priorities are smooth development and easy maintenance/customization. Though thoughts about JS performance would be useful too.

EDIT:

Rereading, my question is a bit vague (the 'why' part of it).

What I'm interested in is which html element makes it easier in regards to:


  • positioning, alignment

  • absolute positioned things like red boxes

  • effects and events (of the type previously mentioned)



Or are they fairly similar?

Conclusion Edit:

I eventually changed my design to a grid like div system. Tables worked up until I tried to add Firefox compatibility. Firefox and Chrome handle tables differently when it comes to complicated positioning and trying to get it pixel perfect was a nightmare.

Answer Source

Why lists? seems like each "box" should be a div. That would give you the most freedom when it comes to positioning and drag and drop functionality.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download