Sohail Aboobaker wrote:
The problem that I see using tables is that in order to make changes to
the presentation, you will need to change the HTML code as opposed to
changing the CSS. In dynamic applications, the HTML code is ideally
generated through some sort of application engine (ASP, JAVA etc.). In
order to change HTML, we will need a developer while in order to change
CSS, we will only need a UI designer.
Since, the appearance is part of UI designer's responsibility, we would
like to avoid having to make changes to ASP or JSP code in order to
refine / change presentation.
Sohail
Sohail,
I understand your issue, but the problem has a different fundamental
problem at its core. I've cc'd the list again on this because I think
it's an important point. My apologies to everyone for this lengthy email.
The problem is that in your example, your changes SHOULD be made to the
HTML...they are, in fact, changes which belong in the source and not in
the CSS.
Take for example, a one hour event in a table inside a tbody inside a tr
inside a td. The rowspan for this event would be equivalent to the
hourly length of the event (one for hourly intervals, two for half hour
intervals, four for fifteen minute intervals). This is easily calculated
using either PHP, JSP, ASP or even Javascript if you'd rather do it
client-side.
I've included two examples (included below) which might better
illustrate the problems you'd encounter trying to build a calendar
without tables. In the first example [1], the table, you can see that
all a developer would need to do is provide you with a variable. In the
dynamic applications you speak of, this should be a piece of cake. CSS
is then applied in whatever skin/theme/what-have-you that you'd like to
control the appearance of the site. Its functionality is properly
handled through scripting.
Now, we have a look at the CSS-only method [2]. In this case, I've built
an example of what I think you might be looking for. As you can see,
we'd still need the duration variable, which we would then apply via a
CSS class. Our problems really begin when we have more than one event
occurring during a time when another event is already occurring. This
slides the event past (to the right) of the earlier event, creating a
cascade to the right, widening our calendar. Of course, in a known
environment (tricky with dynamic builds), you could work around this by
assigning a width to the event or if you wanted to go nuts trying, you
could attempt to style it with absolutely positioning (NOT recommended).
In summation, sometimes a table is the right tool for the job. And if
your programmer cannot provide you (quickly) with a variable which can
dropped in where it needs to go in a calendar application...well, not to
be rude, but you might want to find another programmer. The real truth
of the matter is that CSS isn't designed for calculating, which would be
required for this type of application.
CSS is literally a properties-ONLY language. If you think of it from a
programmer's point of view, the syntax is even similar:
For example, in Javascript:
obj = {
property : value,
method : function () {}
}
And in CSS:
obj {
property : value;
}
There's just no methods (let's not go into CSS expressions).
Anyway, I've included the examples...hopefully they'll help clarify what
is already a long-winded explanation.
I hope it helps.
Bill Brown
TheHolierGrail.com
///
[1] Tabled Calendar
///
table border=1
thead
trth colspan=0Daily Calendar/th/tr
/thead
tfoot
trtd colspan=02 events scheduled/td/tr
/tfoot
tbody
tr
td8:00 AM/td
td rowspan=2Event One (8:00 AM - 10:00 AM/td
td rowspan=4Event Two (8:00 AM - 12:00 AM/td
/tr
tr
td9:00 AM/td
td rowspan=2Event Three (9:00 AM - 11:00 AM/td
/tr
trtd10:00 AM/td/tr
trtd11:00 AM/td/tr
trtd12:00 PM/td/tr
/tbody
/table
///
[2] CSS-ed Calendar
///
style type=text/css
div.calendarShell {
background-color: #f2f2f2;
border:2px solid #00;
margin:0 20px;
}
ul.calendar * {
line-height: 1;
}
ul.calendar {
font-size: 16px;
list-style:none;
margin:0 0 0 5em;
padding: 0;
position: relative;
z-index: 1;
}
ul.calendar ul {
list-style:none;
margin:0;
padding: 0;
}
ul.calendar li {
list-style:none;
margin:0;
padding: 0;
}
ul.calendar li li {
position: relative;
}
ul.calendar li li.odd {
background-color: #f1f1f1;
}
ul.calendar li li p {
background:#dedede;
float: left;
margin:0;
position: relative;
