最も素朴には、table要素で表を作り、tr要素で表の行を作る。各行では、th要素で見出しセルを、td要素で一般セルを入れていく。
表は、横が月曜から金曜までの曜日、縦が1限から5限を表すように作る。曜日のセルと時限のセルは見出しとしてth要素とし、その他はtd要素とする。
これだけで、外枠のついた表ができる。 外枠がつくのは、mmw.css の中で一般の table要素 に対して
table {
float: none;
background-color: white;
border: thin solid black;
border-collapse: collapse;
margin: 15px;
}
という指定があり、表全体の border が「細い・実線・黒色」となっているからである。
次に、内部の線を引くため、時間割のtable要素に grid クラスを指定する。
※ HTML文書でのクラス指定については、div, span と class属性 を参照のこと。
これで、表の内部も線が引かれる。これは mmw.css の中で
table.grid td, table.grid th {
border: thin solid black;
}
という指定があり、「クラス grid に属する table 要素の子孫要素であるtd要素およびクラス grid に属する table 要素の子孫要素であるth要素」に対する border として「細い・実線・黒色」が設定されているからである。
※ CSSでのタイプセレクタ、子孫セレクタ、クラスセレクタについては、セレクタの指定方法 を参照のこと。
なお、mmw.css の table要素の指定の中の
border-collapse: collapse;
という項目が重要である。これは表の隣り合うセルの枠を重ね合わせる指定である。 border-collapse が指定されていない場合や collapse でなく separate と指定されている場合は、隣の枠線と重ならず離れて別々の枠線になってしまう。
表の枠ができたら、各自の履修科目を入れていけばよい。ただし、2時限続きの授業はセルを連結して表示させること。複数行にわたるセルを作るには td 要素または th 要素の rowspan 属性 を使う。
※ 参考までに、複数列にわたるセルを作るには td 要素または th 要素の colspan 属性 を使う。
例えば、水曜1,2時限が続きのときは、水曜1限目のセルの td 要素に対して rowspan=2 を指定する。これで縦に2行分の大きさを持つセルになる。ただし、このままだと2限目の行がはみ出すので、2限目の行のセルの数を1個減らす必要がある。
次に、行の高さと列の幅を指定する。 個々の tr 要素に高さを、th要素およびtd要素に幅を指定してもいいが、非常に見にくい組み方になってしまう。
ここでは、HTMLヘッダにstyle要素を置いて、CSSによって一括に設定する方法を示す。
まず、table要素に jwHyo という id属性を設定する。
次に、先頭付近の head 要素の中の
<link rel=stylesheet href="mmw.css">
<title>名前(学籍番号) マルチメディアWeb技術のページ</title>
の部分、link要素とtitle要素の間に下記のように style要素 を入れる。
上で、#jwHyo はIDセレクタ、tr や th や td はタイプセレクタである。これらを空白区切りでつなげたCSSセレクタ「#jwHyo tr」等は子孫セレクタと言われる指定法である。 これにより、IDセレクタ #jwHyo すなわち id属性が jwHyo である要素の子孫要素である tr 要素に対して高さ 5em を、また、id属性が jwHyo である要素の子孫要素である th 要素および td 要素に対して幅 7.5em を指定できる。その結果、行の高さが 5em、列の幅が 7.5em に揃った時間割表となる。
※ CSSでのタイプセレクタ、IDセレクタ、子孫セレクタについては、セレクタの指定方法 を参照のこと。
もう少し見栄えを調整する。
見出しの曜日行の高さと時限列の幅が大きすぎるので別指定する。それには、兄弟要素の中で最初の当該タイプの要素を指定する
という 擬似クラス (pseudo-class) を使って、table要素の中の最初のtr要素、および、tr要素の中の最初のth要素を指定し、高さあるいは幅を別個に指定する。 具体的には、先に入れたstyle要素の中に以下を追加する。
これで、曜日行の高さは 3.2em に、時限列の幅は 3.8em に小さく設定される。
また、表の左上隅セルの「限╲曜」を小さい字で一行に表示させるため、style要素に
を追加する。% の数値は自分で適当な値に設定する。
ここで、「#jwHyo tr:first-of-type th:first-of-type」は子孫セレクタを2つつなげた形のセレクタで、「id 属性が jwHyo である要素の子孫要素である一番目の tr 要素の子孫要素である一番目の th 要素」を表す。結果として、このセレクタで時間割表の左上隅の th セルが指定される。
以上で、一通り時間割の表が組めたことになる。
皆さんの作成する時間割の表においても、このページで示した、各セルの高さ・幅の設定を使用すること。
追加オプション (特に評価には含めない) として、見出し部分のセルとそれ以外のセルで background-color を変えて指定して、セルを色分けしてもよい。