table要素
【本節の目的】
重要なブロックレベル要素であるtable要素の意味と使い方を習得する。
表 (table要素) の基本
[演習:基本的な表]
以下に説明する基本的な表について学習して下さい。
まずはテキストをしっかり読んで、HTMLでの表の作り方を習得して下さい。
その後、今回の演習で使っている
「week07\ex1.html」を秀丸エディタで開き
(既に開いている場合は新しく開く必要はありません)、
以下のサンプルを参考にしながら、
本文(body要素の内容)に、
説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、
各要素の動作を理解して下さい。
表 (table要素、tr要素、th要素、td要素、caption要素)
- 要素の説明
-
表を作るには、table要素を使います。
ところで表は、表の中のひとつひとつの項目である「セル (cell)」、
セルの横方向のまとまりである「行 (row)」
セルの縦方向のまとまりである「列 (column)」から構成されます。
表は、以下のような順序で書いて行きます。
- まず、表全体を示す table要素を書きます。
- 必要があれば、
caption要素を用いて表にタイトル (キャプション)をつけます。
caption要素は、table要素の開始タグの直後に記述します。
- 次にtable要素の内容として、行 (table row)を定義する tr要素を書き、
一行目を指定します。
- tr要素の内容として、その行の中にある各セルを、
見出しセル (teble header cell)を示す th要素か、
通常の(データ)セル (table data cell)を示す td要素で、
左側のセルから順に書きます。
- 1行の記述が済んだら、次の行を新たな tr要素で指定し、
その行中にあるセルを1行目と同じ要領で、左から順に書きます。
- 上記の作業を必要な行の数だけ繰り返せば、表の完成です。
table要素は、ブロックレベル要素で、
tr要素と後述するcaption要素以外を含むことはできず、
一つ以上のtr要素を含む必要があります。
tr要素は、th要素とtd要素以外を含むことができず、
一つ以上のth要素もしくはtd要素を含む必要があります。
th要素とtd要素は、ブロックレベル要素であり、
インライン要素やテキストを含むことができ、
更にブロックレベル要素も含むことができます。
- サンプルHTML
-
<table border="3">
<caption>2行3列の表の例</caption>
<tr>
<td>1行目左端</td>
<td>1行目中</td>
<td>1行目右端</td>
</tr>
<tr>
<td>2行目左端</td>
<td>2行目中</td>
<td>2行目右端</td>
</tr>
</table>
(註) table開始タグに、「border="3"」という属性がついています。
これについては、このページの最後付近で再度説明しますが、
表に枠線を引くため属性です。この属性を書かないと、枠線は引かれません。
- Webブラウザでの表示結果
-
- summary属性による要約文
-
table要素に、summary属性で、表の要約文を付加することが推奨されています。
目の不自由な方のための「音声ブラウザ」の中には、
表内容を読み上げる前にsummary属性の属性値を読み上げ、
その表の内容の位置づけなどを予め確認することができるものがあります。
ただし、通常のWebブラウザでは、
summary属性で書いた文は何も表示されません。
- サンプルHTML
-
<table border="3" summary="自分の所有するパソコンのOSの割合調査。
ある大学の講義中に調査。1列目が利用OSで、2列目が割合。">
<caption>PCの利用OS調査</caption>
<tr>
<th>利用OS</th>
<th>割合</th>
</tr>
<tr>
<td>Windows系</td>
<td>94.12%</td>
</tr>
<tr>
<td>Mac OS系</td>
<td> 3.23%</td>
</tr>
<tr>
<td>その他</td>
<td> 2.65%</td>
</tr>
</table>
(註) 表の1行目を指定している tr要素の内容 (「利用OS」と「割合」)は、
th要素によりセルを書いています。th要素で書くと、
セル中で中央揃え(センタリング)され、太文字になります。
それに対して、td要素で書くと、左寄せで通常文字になります。
- Webブラウザでの表示結果
-
表中のセルの結合
[演習:セルの結合]
以下に説明する表中のセルの結合のしかたについて学習して下さい。
まずはテキストをしっかり読んで、HTMLの表でのセルの結合の方法を習得して下さい。
その後、今回の演習で使っている
「week07\ex1.html」を秀丸エディタで開き
(既に開いている場合は新しく開く必要はありません)、
以下のサンプルを参考にしながら、
本文(body要素の内容)に、
説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、
各要素の動作を理解して下さい。
セルの結合 (rowspan属性、colspan属性)
表のデザインの調整
HTMLは、文書の構造を決める記述言語なので、
デザインについては取り扱わないのが基本なのですが、
歴史的な経緯から、table要素に関してその一部は
HTMLでデザインする場合が多いので、少しだけここでとり上げます。
詳細なデザインについては別の時間に学習します。
[演習:表のデザイン]
以下に説明する表のデザインの方法について学習して下さい。
まずはテキストをしっかり読んで、HTMLでの表のデザインの方法を習得して下さい。
実際の方法としては、上の演習で使った
「week07\ex1.html」を秀丸エディタで開き、
以下のサンプルを参考にしながら、
本文(body要素の内容)に、
説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、
各要素の動作を理解して下さい。
枠線の太さ (border属性)
セル間隔、セル内間隔 (cellspacing属性、cellpadding属性)
セル内容の位置 (align属性)
- 属性の説明
-
セル内の横方向(水平方向)の位置を指定します。
指定できる値は次のものがあります。
- left (左揃え、td要素の規定値)
- center (中央揃え、th要素の規定値)
- right (右央揃え)
- justify (均等割り付け)
- サンプルHTML
-
<table border="3">
<caption> クラブ人数 </caption>
<tr>
<th>クラブ名</th>
<th>学年</th>
<th colspan="2">人数</th>
</tr>
<tr>
<th rowspan="4">運動部</th>
<td rowspan="2" align="center">3</td>
<td>men</td>
<td align="right">12</td>
</tr>
<tr>
<td>women</td>
<td align="right">10</td>
</tr>
<tr>
<td rowspan="2" align="center">4</td>
<td>men</td>
<td align="right">9</td>
</tr>
<tr>
<td>women</td>
<td align="right">12</td>
</tr>
</table>
- Webブラウザでの表示結果
-