パーツ番号 05-14-01 ・ CSSのみ

週間時間割表(曜日×時限グリッド)

曜日を列、時限を行に配置した学校・塾向けの週間時間割表。教室予約状況や講座スケジュールページにそのまま埋め込める定番レイアウト。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-14-01-table">
          <thead>
            <tr><th></th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>
          </thead>
          <tbody>
            <tr><td>1</td><td>国語</td><td>数学</td><td>英語</td><td>理科</td><td>社会</td></tr>
            <tr><td>2</td><td>数学</td><td>英語</td><td>国語</td><td>体育</td><td>音楽</td></tr>
            <tr><td>3</td><td>理科</td><td>社会</td><td>数学</td><td>国語</td><td>英語</td></tr>
            <tr><td>4</td><td>体育</td><td>音楽</td><td>美術</td><td>数学</td><td>国語</td></tr>
          </tbody>
        </table>

CSS

.d05-14-01-table{border-collapse:collapse;font-size:10px;width:100%}
        .d05-14-01-table th{background:#1f2937;color:#fff;padding:5px 4px;font-weight:600;text-align:center}
        .d05-14-01-table th:first-child{background:#111827}
        .d05-14-01-table td{padding:6px 4px;text-align:center;border:1px solid #e5e7eb;color:#333}
        .d05-14-01-table td:first-child{background:#f3f4f6;font-weight:700;color:#1f2937}

クラス名 .d05-14-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。