I'm creating a page that allows the user to select a time slot from a schedule. I would prefer to do this with some sort of table layout (vs. using drop down/bo boxes). But I'm having trouble figuring out which path to take because the schedule is layed out like this.
So M,W,F are the same and T,TR are the same layout. I was hoping to do this with some sort of table instead of pure graphic because I want to be able to update information displayed in the cells. Is there a method other than doing rowspans to get the uneven layout like the picture. Or should I take a pletely different approach. All my javascript needs to know is what information(text) is displayed in the cell and which one is being clicked.
I'm creating a page that allows the user to select a time slot from a schedule. I would prefer to do this with some sort of table layout (vs. using drop down/bo boxes). But I'm having trouble figuring out which path to take because the schedule is layed out like this.
So M,W,F are the same and T,TR are the same layout. I was hoping to do this with some sort of table instead of pure graphic because I want to be able to update information displayed in the cells. Is there a method other than doing rowspans to get the uneven layout like the picture. Or should I take a pletely different approach. All my javascript needs to know is what information(text) is displayed in the cell and which one is being clicked.
Share Improve this question asked Nov 23, 2010 at 19:20 Matt PhillipsMatt Phillips 11.5k11 gold badges48 silver badges71 bronze badges 3- 2 "R" is the proper abbreviation for Thursday, FYI. – jpsimons Commented Nov 23, 2010 at 19:22
- 1 darkporter: According to who? R is far less mon that Th, or just T. – Jeff B Commented Nov 23, 2010 at 19:33
-
@Jeff B:
Ris widely accepted as Thursday, just asUis widely accepted as Sunday..UMTWRFSmakes much more sense to me thanSMTWTFS– jrn.ak Commented Nov 23, 2010 at 21:38
2 Answers
Reset to default 5The code below is a TABLE solution using the ROWSPAN attribute. CSS is only relied on for setting row heights and column widths.
The big advantage to this approach is that any cells that expand vertically will cause the entire row to expand the same amount, so your columns and rows will never get misaligned.
If you instead try a to use more than one table, or a DIV/CSS-driven solution, you can use Javascript to realign things for you, but this can be quite difficult to implement correctly.
<html>
<head>
<style>
table{border-collapse:collapse;border-spacing:0}
td,th{border:1px solid #000}
.m,.w,.f{width:104px}
.t,.r{width:117px}
.r5{height:12px}
.r8{height:20px}
.r9{height:27px}
.r1,.r10,.r12,.r14{height:60px}
.r2,.r7,.r11,.r13{height:18px}
.r3,.r4,.r6{height:40px}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr class="r1">
<td class="m"></td>
<td class="t" rowspan="2"></td>
<td class="w"></td>
<td class="r" rowspan="2"></td>
<td class="f"></td>
</tr>
<tr class="r2">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r3">
<td class="t" rowspan="3"></td>
<td class="r" rowspan="3"></td>
</tr>
<tr class="r4">
<td class="m"></td>
<td class="w"></td>
<td class="f"></td>
</tr>
<tr class="r5">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r6">
<td class="t" rowspan="2"></td>
<td class="r" rowspan="2"></td>
</tr>
<tr class="r7">
<td class="m" rowspan="3"></td>
<td class="w" rowspan="3"></td>
<td class="f" rowspan="3"></td>
</tr>
<tr class="r8">
<td class="t"></td>
<td class="r"></td>
</tr>
<tr class="r9">
<td class="t" rowspan="3"></td>
<td class="r" rowspan="3"></td>
</tr>
<tr class="r10">
<td class="m"></td>
<td class="w"></td>
<td class="f"></td>
</tr>
<tr class="r11">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r12">
<td class="t" rowspan="2"></td>
<td class="r" rowspan="2"></td>
</tr>
<tr class="r13">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r14">
<td class="t"></td>
<td class="r"></td>
</tr>
</table>
</body>
</html>
Here is an example using CSS:
http://jsfiddle/byQHE/
It's not perfect, but it gives you an idea of what you can do.