HTML | テーブルで時間割を作成するサンプルコード
HTMLのテーブルを使って授業の時間割を作成するサンプルコードを紹介しています。
テーブルで時間割を作成する
HTMLのテーブル要素で月曜日から金曜日までの授業の時間割を作成しています。
6限目まで、授業内容は適当です。
見た目の変更はHTMLのStyle属性、またはCSSにてカスタマイズします。
| 月 | 火 | 水 | 木 | 金 | |
|---|---|---|---|---|---|
| 1 | 英語 | 数学 | 国語 | 物理 | 化学 |
| 2 | 体育 | 生物 | 英語 | 数学 | 国語 |
| 3 | 化学 | 体育 | 生物 | 英語 | 数学 |
| 4 | 国語 | 物理 | 化学 | 体育 | 生物 |
| 5 | 数学 | 国語 | 物理 | 化学 | 英語 |
| 6 | 数学 | 化学 | 物理 | 英語 | 国語 |
<table>
<tr>
<th style="width:30px"></th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
</tr>
<tr>
<th>1</th>
<td>英語</td>
<td>数学</td>
<td>国語</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<th>2</th>
<td>体育</td>
<td>生物</td>
<td>英語</td>
<td>数学</td>
<td>国語</td>
</tr>
<tr>
<th>3</th>
<td>化学</td>
<td>体育</td>
<td>生物</td>
<td>英語</td>
<td>数学</td>
</tr>
<tr>
<th>4</th>
<td>国語</td>
<td>物理</td>
<td>化学</td>
<td>体育</td>
<td>生物</td>
</tr>
<tr>
<th>5</th>
<td>数学</td>
<td>国語</td>
<td>物理</td>
<td>化学</td>
<td>英語</td>
</tr>
<tr>
<th>6</th>
<td>数学</td>
<td>化学</td>
<td>物理</td>
<td>英語</td>
<td>国語</td>
</tr>
</table>