タイムテーブルをHTMLで作る方法 - ソフトウェア開発者の日常

依頼元からログイン画面、および認証後のタイムテーブルの画面の作成の相談をされました。
タイムテーブルは2日分あり、4つの会場において、時間ごとにどんなことが行われているのかを表示するのが希望です。
作れるだろうと判断して、作成可能と回答して、見積を送付して、発注されるのを待っています。

作れるだろうと判断したのはいいのですが、実際作ってみないと、予想外に手間がかかる可能性もあります。
特にタイムテーブルの画面は、tabelタグを駆使すればなんとかなるでしょう、と考えただけで深く考えたわけではありません。
作成された例がないかと、検索しました。

検索した結果、見つけたのは、考えていた通りのtableタグを使ったサンプルです。
qiita.com

このサンプルを元に、作成方法の学習も兼ねて、今回の案件のタイムテーブルに合わせて、ある程度作ってみました。
作ってみた結果、rowspanの指定が大変だとわかりました。

どれだけ行を結合しなければならないのか、数えなければなりません。
また、結合したのであれば、高さも考えなければなりません。

tableタグで作成できるが、手間がかかって時間がかかる方法だと理解しました。

tableタグを使った方法は手間がかかるので、CSS FlexboxかCSS Gridで作成された例がないかと、検索しました。
検索した結果、CSS Gridを使ったサンプルです。
tercel-tech.hatenablog.com

このサンプルを元に、tableタグの場合と同様に、作成方法の学習も兼ねて、今回の案件のタイムテーブルに合わせて、ある程度作ってみました。
作ってみた結果、tableタグを使った方法より、作りやすいのがわかりました。

計算するのは手間ですが、何分間の枠を用意すればいいのかわかれば、計算式で計算できて設定するだけなので、間違えて設定しても直すのが簡単です。

発注されたら、CSS Gridを使った方法で作成します。