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:
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.