熊本大学大学院教授システム学専攻
目次:
【第7回】文字飾り、箇条書、表、フレーム
第1章
第3章
第4章

table要素

【本節の目的】
重要なブロックレベル要素であるtable要素の意味と使い方を習得する。

表 (table要素) の基本

HTMLで基本的な表を作ってみましょう。

[演習:基本的な表]

以下に説明する基本的な表について学習して下さい。

まずはテキストをしっかり読んで、HTMLでの表の作り方を習得して下さい。

その後、今回の演習で使っている 「week07\ex1.html」を秀丸エディタで開き (既に開いている場合は新しく開く必要はありません)、 以下のサンプルを参考にしながら、 本文(body要素の内容)に、 説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、 各要素の動作を理解して下さい。

表 (table要素、tr要素、th要素、td要素、caption要素)

要素の説明
表を作るには、table要素を使います。 ところで表は、表の中のひとつひとつの項目である「セル (cell)」、 セルの横方向のまとまりである「行 (row)」 セルの縦方向のまとまりである「列 (column)」から構成されます。

表の構成

表は、以下のような順序で書いて行きます。
  1. まず、表全体を示す table要素を書きます。
  2. 必要があれば、 caption要素を用いて表にタイトル (キャプション)をつけます。 caption要素は、table要素の開始タグの直後に記述します。
  3. 次にtable要素の内容として、行 (table row)を定義する tr要素を書き、 一行目を指定します。
  4. tr要素の内容として、その行の中にある各セルを、 見出しセル (teble header cell)を示す th要素か、 通常の(データ)セル (table data cell)を示す td要素で、 左側のセルから順に書きます。
  5. 1行の記述が済んだら、次の行を新たな tr要素で指定し、 その行中にあるセルを1行目と同じ要領で、左から順に書きます。
  6. 上記の作業を必要な行の数だけ繰り返せば、表の完成です。
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ブラウザでの表示結果

ul_ol

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ブラウザでの表示結果

ulol_nest


表中のセルの結合

セルを結合して複雑な表を作ってみましょう。

[演習:セルの結合]

以下に説明する表中のセルの結合のしかたについて学習して下さい。

まずはテキストをしっかり読んで、HTMLの表でのセルの結合の方法を習得して下さい。

その後、今回の演習で使っている 「week07\ex1.html」を秀丸エディタで開き (既に開いている場合は新しく開く必要はありません)、 以下のサンプルを参考にしながら、 本文(body要素の内容)に、 説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、 各要素の動作を理解して下さい。

セルの結合 (rowspan属性、colspan属性)

属性の説明
th要素やtd要素に、rowspan属性またはcolspan属性を指定することで、 複数のセルを一つのセルに結合させることができます。 rowspan属性は、行をまたいで縦方向に結合し、 colspan属性は、列をまたいで横方向に結合します。 どちらの属性も、属性値には結合するセル数を指定します。
rowspan属性またはcolspan属性を指定したら、 結合する範囲についてはセル数 (th要素もしくはtd要素の数)を調整する必要があります。 たとえば、rowspan属性で「2」と指定した場合、 次の行で結合の対象となるセルについては、既に記述したことになりますので、 行の中のセルを一つ減らした形でセルを記述することになります。
サンプルHTML
<table border="3">
  <caption> 単純な表 </caption>
  <tr>
    <th> 11 </th>
    <th> 12 </th>
    <th> 13 </th>
  </tr>
  <tr>
    <th> 21 </th>
    <th> 22 </th>
    <th> 23 </th>
  </tr>
  <tr>
    <th> 31 </th>
    <th> 32 </th>
    <th> 33 </th>
  </tr>
</table>
この表を、
  ・1行目の2番目のセルと、3番目のセルを(横方向に)結合して「1,2-3」
  ・2行目と3行目の2番目のセルを(縦方向に)結合して「2-3,2」
とするには、以下のようになります。
結合したために書かなくて良くなった th要素や td要素のところは、 分りやすいように空行にしています。
<table border="3">
  <caption> セルを結合した表 </caption>
  <tr>
    <th> 11 </th>
    <th colspan="2"> 1,2-3 </th>
    
  </tr>
  <tr>
    <th> 21 </th>
    <th rowspan="2"> 2-3,2 </th>
    <th> 23 </th>
  </tr>
  <tr>
    <th> 31 </th>
    
    <th> 33 </th>
  </tr>
</table>

Webブラウザでの表示結果

単純な表   →  複雑な表2


表のデザインの調整

HTMLは、文書の構造を決める記述言語なので、 デザインについては取り扱わないのが基本なのですが、 歴史的な経緯から、table要素に関してその一部は HTMLでデザインする場合が多いので、少しだけここでとり上げます。 詳細なデザインについては別の時間に学習します。

[演習:表のデザイン]

以下に説明する表のデザインの方法について学習して下さい。

まずはテキストをしっかり読んで、HTMLでの表のデザインの方法を習得して下さい。

実際の方法としては、上の演習で使った 「week07\ex1.html」を秀丸エディタで開き、 以下のサンプルを参考にしながら、 本文(body要素の内容)に、 説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、 各要素の動作を理解して下さい。

枠線の太さ (border属性)

属性の説明
枠線の太さを決めます。値は「ピクセル値」で指定します。
サンプルHTML
<table border="5">
  <caption> border="5"の例</caption>
  <tr>
    <td>1行左</td>  <td>1行右</td>
  </tr>
  <tr>
    <td>2行左</td>  <td>2行右</td>
  </tr>
</table>
枠線をなくすには、border属性の指定をしないか、border="0"とします。
<table border="0">
  <caption> border="0"の例</caption>
  <tr>
    <td>1行左</td>  <td>1行右</td>
  </tr>
  <tr>
    <td>2行左</td>  <td>2行右</td>
  </tr>
</table>
Webブラウザでの表示結果

border(5)   →  枠無し

セル間隔、セル内間隔 (cellspacing属性、cellpadding属性)

属性の説明
セルの枠線どうしの間隔(セル間隔)を、cellspacing属性で、 セルの枠線とセルの内容の間隔(セル内間隔)を、cellpadding属性で、 それぞれ「ピクセル値」で指定します。
サンプルHTML
<table border="5" cellspacing="10" >
  <caption> cellspacing="10"の(セル間隔を拡げた)例</caption>
  <tr>
    <td>1行左</td>  <td>1行右</td>
  </tr>
  <tr>
    <td>2行左</td>  <td>2行右</td>
  </tr>
</table>
<table border="5" cellpadding="10">
  <caption> cellpadding="10"の(セル内間隔を拡げた)例</caption>
  <tr>
    <td>1行左</td>  <td>1行右</td>
  </tr>
  <tr>
    <td>2行左</td>  <td>2行右</td>
  </tr>
</table>
<table border="5" cellspacing="10" cellpadding="10">
  <caption> セル間隔とセル内間隔をともに拡げた例</caption>
  <tr>
    <td>1行左</td>  <td>1行右</td>
  </tr>
  <tr>
    <td>2行左</td>  <td>2行右</td>
  </tr>
</table>
Webブラウザでの表示結果

border(5)   →  枠無し  →  枠無し

セル内容の位置 (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ブラウザでの表示結果

セル内位置指定

Copyright (C) Ryuichi Matsuba and Kenichi Sugitani 2003-2005, All Rights Reserved