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/combo boxes). But I'm having trouble figuring out which path to take because the schedule is layed out like this.
所以M、W、F是相同的，T、TR是相同的布局。我希望使用某种表格而不是纯图形来完成此操作，因为我希望能够更新单元格中显示的信息。除了进行行跨度之外，还有其他方法可以得到如图所示的不均匀布局吗？或者我应该采取完全不同的方法。我的 JavaScript 需要知道的是单元格中显示的信息（文本）以及正在单击的信息（文本）。
下面的代码是一个TABLE解决方案使用ROWSPAN http://www.htmlcodetutorial.com/tables/index_famsupp_30.html属性。 CSS 仅用于设置行高和列宽。
这种方法的一大优点是，任何垂直扩展的单元格都会导致整行扩展相同的量，因此您的列和行永远不会错位。
如果您尝试使用多个表或 DIV/CSS 驱动的解决方案，您可以使用 Javascript 为您重新调整内容，但这可能很难正确实现。
<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>