lesson 9
第 9 回

第 9 回の講義メモ

第 5 章

5.2

5.2

table 要素について説明します．

5.2.1-2

テーブル要素の構造は教科書 p.54 の図5.3 を見よ．

横方向の一行が一つの tr 要素に対応し， tr 要素の中の td(か th) 要素が一つ一つのセルに対応する． セルのうち，見出し項目にあたるものは th 要素， 内容にあたるものは td 要素で記述する．教科書 p.55 例 5.6 を見よ．

5.2.3

テーブルの内容を説明するには caption 要素を用いる．

5.2

5.2.4

table 要素に教科書 p.56 表5.1,5.2 のような属性を記述することで， テーブルに罫線を引いたり間隔を調整することができる．

教科書の例 5.9を完結させたものを wtest.html に記入し，border, cellspacing, cellpadding などの指定による変化を確認せよ．

5.2.5

複数の tr 要素を tbody 要素の子とすることで複数の tr 要素をグループ化できる．教科書の例 5.10 は法学部のデータと文学部のデータを別のグループにしている例である． thead 要素と tfoot 要素はそれぞれヘッダとフッタ専用のグループである．

教科書の例 5.10では table 要素の rules 属性として groups を与えている． この指示により， 教科書図5.4 のようにグループ間だけに罫線を表示することができる．

5.2.6

tbody 要素は行(横方向のならび)単位のグループ化であるが， col 要素と colgroup 要素を使って行(縦方向のならび)単位の グループを作ることができる．

教科書の例 5.11 を完結させ，wtest.html 上に作成せよ．

教科書の例 5.11 は最初の 3 列と最後の 1 列をグループ化している． スタイルシートを用いて colgroup.scores {background-color:green} などとすれば得点欄だけにに色を指定することができる．確認せよ．

5.2.7

例 5.11 の表は thead 要素の説明は縦方向へ効くが， tfoot 要素の説明は横方向へ効くのでわかりにくい場合がある． scope 属性でどの方向に効くかを明示したり， headers 属性で id を指定するこどのセルの説明が効いているのかを明示することができる．

第 8 回へ戻る, 第 10 回進む