営業時間表のHTML/CSSテーブルテンプレート

整体院、整骨院や歯科、クリニックなどのホームページによくある診療時間の表。これのHTMLとCSSのテンプレートを作ってみました（探しても意外と無かったので）。「午前の部 / 午後の部」って分かれてるやつです。

まずHTMLから。コピペして、貴店のスケジュールに書き換えてください。

HTML

CSS

これにCSSでデザインを当てていきます。ひとまず３パターン用意しました。色とか、好みで変えやすい箇所にはコメント添えてあります。

テンプレート１

まず、いちばんよく見るベーシックなもの

テンプレート２

テンプレート１の５行目、padding: 10px;をpadding: 10px 25px;に書き換えただけです。横にちょっと長くなってゆとりのあるデザインになります。

ちなみにこの指定は、10pxが縦の余白、25pxが横の余白という意味です。テンプレート１のように10pxとだけ指定すると縦横４方向全部が10pxだよ。となります。

テンプレート３

上下にだけ線を引いたデザイン。シュッとした印象になりますね。