時間割を作成する

終了タグ </table>の上の行に表の内容をタグで囲みながら追加します.

表作成に関連するタグとその使い方

<thead> — </thead> : 表(table)のヘッダ(見出し)行のグループ.
<tbody> — </tbody> : 表本体の行グループ
<tr> — </tr> : 表の 1行
<td> — </td> : (table data cell) 表の 1項目
<th> — </th> : (table header cell) 表の項目のうち見出しとして使うもの
項目がない場合(空白のCell)の場合でもタグ<td> </td>が必要です. (そうでないと, どのセルが空白なのかわからない.)

これ以外にも, 表形式に関するタグはありますが, それは自習して下さい.

例えば, 第1行に曜日欄を table header グループで並べ, そのあとに表本体が続くようにするには, 次のようになります.

<thead>
<tr>
    <td> \ </td> <th>月曜日</th> <th>火曜日</th> <th>水曜日</th>
    <th>木曜日</th> <th>金曜日</th>
</tr>
</thead>
<tbody>


</tbody>

上の入力で $\backslash$ はバックスラッシュと呼ばれる記号です. Windows や Mac では,「きごう」または「バックスラッシュ」を入力してかな漢字変換をすれば, 全角のバックスラッシュが出てきます. 本来は, 円記号(￥)のキーをタイプすると, 半角のバックスラッシュが入力されるべきものですが, Windows の日本語環境ではそれができません.

上の内容を入力したら内容を保存し, Web ブラウザで再読み込みをして, 確認します.

時間割表の本体は, <tbody> と </tbody> の間に書いていきます. 行を示すタブ <tr>— </tr>の間に, 各自の時間割を1列目は見出しのタグ<th>で, 2列目以降はタグ<td>で囲んで入力して下さい. 何も無い時には空の <td> </td>が必要です. 実際の作業では, 1行入力毎に Web ブラウザで出来上がり具合を確認して行くと間違いを見つけやすいでしょう.

注意上で述べたようにタグ<th>は見出しタグ, <td>は通常データのタグです. この意味を重視してください. Web ブラウザでの見た目では, <th>は太字で, <td>は普通の文字で表示されます. だからといって, 表示を強調するために <td>と書くべきところを<th>と書いてはいけません. タグは, その意味をきちんと表すように用いてください. 表示を強調するには, スタイルシートを用います.

SUGA Shuichi
2023-06-16