私は、ユーザーがスケジュールからタイムスロットを選択できるページを作成しています。私はいくつかの種類のテーブルレイアウト（対ドロップダウン/コンボボックスを使用）に対してこれを行うことを好むでしょう。しかし、私はスケジュールがこれのようにレイアウトされているので、どのパスを取るかを考え出すのが難しいです。 
固定された不均一な行を持つHTMLテーブル
M、W、Fは同じで、T、TRは同じレイアウトです。私はセルに表示されている情報を更新できるようにしたいので、純粋なグラフィックではなく、何らかのテーブルでこれを行うことを望んでいました。 rowspansを使って絵のような不均一なレイアウトを得る以外の方法がありますか？あるいは、私はまったく別のアプローチを取るべきですか？私のjavascriptは、どの情報（テキスト）がセルに表示され、どれがクリックされているかを知る必要があります。ここで
以下のコードはROWSPAN属性を使用したTABLEソリューションです。 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>
優れた答えですが、さらに検討してください。毎日がブロックに分割されています。多分15分ブロックです。 Tue/Thuの中央の細いスライスは15分、45分以上のブロック、75分以下のスライスになります。私は15分に基づいてrowspanを設定します。たとえ単一の15分のブロックがなかったとしても（例えば、行スパン= 2が最小のタイムスロットであった）。ちょっとした考え。 –
@Stephen P：興味深い考えです。これにより、行スパンの値を簡単に判断できるようになりますが、さらに多くの表の行があることを意味します（8時間の場合は32行）。私が最後にどちらが好きかわからない。 – RedFilter
タイムスロットは15分の間隔にはうまく収まりません。だから私はそれに本当に関心がない。 –
"R" は、FYI木曜日のための適切な略語です。 – jpsimons
が正式に記載されています！ありがとう –
darkporter：誰によると？ RはThよりもはるかに一般的ではありません。 –