手動で予約状況を入力する場合のtableのサンプル

予約状況
予約状況
時刻 月 火 水 木 金 土 日
0:00～0:30 　 済 　 　 　 　 　
0:30～1:00 　 　 　 　 　 　 　
1:00～1:30 　 　 　 　 　 　 　
1:30～2:00 　 　 　 　 　 　 　
<!DOCTYPE html>
<html lang="ja">
<head>
<title>予約状況</title>
<style type="text/css">
<!--
.border{border:1px solid gray;padding:5px;}
.reserved{background-color:gray;font-weight:bold;color:white;text-align:center;}
.waiting{background-color:white;}
-->
</style>
</head>
<body>
<table style="border-collapse:separate;border-spacing:2px 2px;">
<caption style="font-weight:bold;">予約状況</caption>
<tbody>
<tr>
<th class="border">時刻</th>
<th class="border">月</th>
<th class="border">火</th>
<th class="border">水</th>
<th class="border">木</th>
<th class="border">金</th>
<th class="border">土</th>
<th class="border">日</th>
</tr>
<tr>
<th class="border">0:00～0:30</th>
<td class="border waiting">　</td> <!--月-->
<td class="border reserved">済</td> <!--火-->
<td class="border waiting">　</td> <!--水-->
<td class="border waiting">　</td> <!--木-->
<td class="border waiting">　</td> <!--金-->
<td class="border waiting">　</td> <!--土-->
<td class="border waiting">　</td> <!--日-->
</tr>
<tr>
<th class="border">0:30～1:00</th>
<td class="border waiting">　</td> <!--月-->
<td class="border waiting">　</td> <!--火-->
<td class="border waiting">　</td> <!--水-->
<td class="border waiting">　</td> <!--木-->
<td class="border waiting">　</td> <!--金-->
<td class="border waiting">　</td> <!--土-->
<td class="border waiting">　</td> <!--日-->
</tr>
<tr>
<th class="border">1:00～1:30</th>
<td class="border waiting">　</td> <!--月-->
<td class="border waiting">　</td> <!--火-->
<td class="border waiting">　</td> <!--水-->
<td class="border waiting">　</td> <!--木-->
<td class="border waiting">　</td> <!--金-->
<td class="border waiting">　</td> <!--土-->
<td class="border waiting">　</td> <!--日-->
</tr>
<tr>
<th class="border">1:30～2:00</th>
<td class="border waiting">　</td> <!--月-->
<td class="border waiting">　</td> <!--火-->
<td class="border waiting">　</td> <!--水-->
<td class="border waiting">　</td> <!--木-->
<td class="border waiting">　</td> <!--金-->
<td class="border waiting">　</td> <!--土-->
<td class="border waiting">　</td> <!--日-->
</tr>
</tbody>
</table>
</body>
</html>

　自動で予約表が埋められるようにしたければ、次のページで紹介されている方法を試したい。

コメント

コメントを投稿