Visual Basic 中学校 > HTML講座 >

第４回　テーブル・フレーム

１．テーブル

１−１．テーブルの概要

テーブルとは表形式にデータを並べて意味を持たせる構造です。

例

この例は国の名前と人口と面積を並べているだけですが、この並べ方によって「アメリカの人口は3.14億人である」という意味が表現されています。

１−２．HTMLでのテーブルの表現

HTMLでは以下の要素を組み合わせることで、基本的なレイアウトの表を作成することができます。

table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

多くのテーブルは次の４つの要素から作られるようです。ここではこの４つの要素を使ってテーブルを表現する方法を説明します。

テーブルは、セル(td要素)の集まりを、行(tr要素)で囲み、その行の集合をtable要素で囲む３階層の入れ子で表現します。

テーブルの行をtr要素で表されるので、テーブルの行数はtr要素の数で決定します。つまり、tr要素が3回出現するテーブルの行数は3です。

行の中のセルの数はtd要素で表されるので、テーブルの列数はtd要素の数で決定します。tr要素ごとに異なる数のtd要素を持つこともできますが、普通の縦×横の票の場合、すべてのtr要素内のtd要素の数は同じになるようにします。

例:：4行・3列の表

この例では、先頭の行は列の名前を表していてデータそのものを表現するためのものではありません。このような部分はほとんどの場合表の先頭にあるため「ヘッダー」と呼びます。

ヘッダー部分はtd要素ではなくth要素で表すと意味が明確になります。

例：4行・3列の表。ただし、先頭の1行はヘッダー行。

Webブラウザーによってはtd要素とth要素を同じように表示するため画面上では区別できない場合があります。その場合、td要素とth要素を区別する意味が感じにくいかもしれませんが、第1回で説明したようにHTMLとは表示方式を指定するものではなく意味を指定するものであることに注意してください。画面上で区別できなくても要素を区別することは重要です。

１−３．線の表示

一般的な図書に掲載されている表は縦と横が線で区切られていますが、HTMLのtable要素で表される表は何も指定していない場合、線が表示されません。

著者注：仕様書上明記されている個所は見つけられませんでした。IE4などの古いWebブラウザーでは、陰影のある枠線で描画することもあるようです。

線の表示有無や色・太さなどは表示に関する要素なのでHTMLで記述する対象外です。表示に関する要素はCSSを使って指定します。ここでは簡単にCSSを使ってtable要素を黒い線で表示する例を紹介します。

style要素の中でCSSを使ってtable, th, tdに枠線をつけて描画するように指定しています。

１−４．幅・高さの指定

１−４−１．ピクセルによる指定

行・列の幅や高さも表示に関する要素なのでHTMLではなくCSSで指定します。幅を指定するにはwidthプロパティ、高さを指定するにはheightプロパティを使用します。

例

この例ではピクセル単位で幅100, 高さ100を指定しています。ピクセルとは画面に表示する画素の単位でたとえば、ディスプレイの解像度を1024×768にしている場合、横方向に表示できるピクセルの数は1024です。

１−４−２．%による指定

幅や高さの指定はpxではなく%で指定することもできます。次の例ではテーブルの幅を画面の半分(50%)にします。

１−４−３．レイアウトの決定の複雑さ

テーブルに限ったことではありませんが、HTML文書が表示されるときの最終的な幅や高さや位置の決定はさまざまな要素や設定を加味して行われるためWebサイトの制作者が意図したとおりにならない場合があります。

たとえば、テーブルの幅を500pxとして、各列の幅の合計が300pxの場合、実際にどのように表示されるか、あるいはセルの中に巨大な画像を表示するようにしている場合などさまざまなケースが考えられます。

また、HTMLのレイアウトはもともとはWebブラウザーのウィンドウのサイズに応じて柔軟に変わるようにできており、上掲のCSSのようにWebサイトの制作者が幅や高さを指定しだすと、ユーザーが自由にウィンドウサイズを変えられる利便性が損なわれることがあります。

たとえば、画面の左半分にWebサイトを表示して、右半分でそれを見ながら作業したいユーザーのことを考えてみてください。もし、Webサイトの制作者が画面の横幅いっぱいのwidthを指定した場合、このユーザーはかなりの不便を強いられます。一方、Webサイトの制作者が横幅を指定していない場合、ユーザーは自分の好きなサイズのウィンドウで作業できます。

ただし、ここで言いたいのはサイズを指定してはいけないということではなくサイズを指定するときはそのWebサイトを使うユーザーが、どのようにしてそのWebサイトを使うのか想定してからにした方がよいということです。

たまたまWebサイトの制作者が作業中の画面をみて、そこで綺麗に見えるように幅や高さを設定した場合、ユーザーにとってもそれが見やすいのかどうかを考えるようにして下さい。

１−５．セルの結合

１−５−１．結合の概要

テーブルのセルを結合すると、以下のような縦×横で構成されているテーブルではなく、

以下のように部分的にセルが結合されているテーブルを表現することができます

セルを結合するにはtd要素のcolspan属性またはrowspan属性を使います。

１−５−２．横方向の結合

横方向にセルを結合するにはcolspan属性を使います。値には結合するセルの数を書きます。

この例では5のセルにcolspan="2"が指定されているので、このセルは右のセルと結合した状態になります。この場合5の右にtd要素は書きません。

１−５−３．縦方向の結合

縦方向にセルを結合するにはrowspan属性を使います。値には結合するセルの数を書きます。

この例では4のセルにrowspan="2"が指定されているので、このセルは下のセルと結合した状態になります。この場合4の下にtd要素は書きません。

１−５−４．縦横の結合

横方向と縦方向の両方のセルと結合するにはcolspan属性とrowspan属性の両方を使います。値にはそれぞれの方向に結合するセルの数を書きます。

この例では5のセルにcolspan="2"が指定されているので、このセルは右のセルと結合した状態になりますから5の右にtd要素は書きません。同様にrowspan="2"が指定されているので、5の下のtd要素も書きません。

この場合、右下のセルも結合対象になるため、5の右下のtd要素もなくなります。

１−６．課題

次のテーブルを使用した自己紹介をHTML文書で作成してください。

• ○○○の部分は自分の言葉で埋めてください。
• 好きな本の色は赤くしてください。
• テーブルは黒い単色の細い線で書いてください。
• その他、自分の好みに応じてプラスアルファのスタイルを適用して構いません。

２．フレーム

２−１．フレームの廃止

ここで説明する「フレーム」は、HTML4では有効であったが、HTML5ではWebサイトの制作者が使ってはいけない要素になっています。

参考：HTML5 11.2 「Elements in the following list are entirely obsolete, and must not be used by authors 」

フレームはユーザーの操作性が悪く、機械的なサイトの解析にも支障があるため今後使わない技術とされたのです。ユーザーの操作性の悪さについては視覚的でないユーザーエージェントの場合特に顕著です。

しかしながら、ユーザーエージェントにおいては従来通りフレームを解釈することがHTML5でも定められていて、今までフレームを使って作られてきた多くのWebサイトはHTML5時代でもそのまま表示できることが保障されています。

参考：HTML5 10.5 「When an html element's second child element is a frameset element, the user agent is expected to render the frameset element as described below across the surface of the viewport, instead of applying the usual CSS rendering rules.」

このような状況から今後フレームを使う機会はどんどん減っていくことかと思いますが2011年時点ではほとんどのWebサイトの制作者はHTML4やXHTML1.0が多く使われているためフレームの使い方も知らずにWebサイトの制作に参加することはできず、かつ既にフレームを使って作られたサイトが大量にあるためにHTML5に移行するにあたってもフレームがどのようなものであるか知っておくことは必須です。

そのため、廃止される技術ではありますがここでフレームについて説明します。

２−２．フレームの概要

フレームとは、Webブラウザーで１つの画面に複数のWebページを表示する技術です。

よく使われるのは画面の左側や上側の領域にメニューを表示して、残りの領域に主たる内容を表示する構成です。

この場合、すべてを１つのWebページとして作成することもできますが、メニューなど他のページでも同じものを使う場合はメニューだけを独立したWebページにしておいて、個々のWebページと一緒に画面に表示するようにすれば制作の手間が減り便利です。

２−３．画面分割の方法

フレームを使って画面を複数のページに分割するにはframeset要素とframe要素を使用します。

frameset要素は画面をどのように分割するかを示します。frame要素は分割された各領域にどのWebページを読み込むかを指定します。

次の例では画面を左右に分割し、左側は200pxの幅でa.htmに割り当て、右側の残りの部分はb.htmに割り当てます。

フレームを使う場合bodyタグはframsetタグの子タグのnoframesタグの子タグとして出現し、その役割はユーザーエージェントがフレームをサポートしていない場合に表現する内容を提供することにあります。

現状では、ほとんどのWebサイトはこのbodyタグの中に「このWebサイトはフレームに対応していないブラウザーでは表示できません。」という内容を指定しており、ユーザーの操作性の低下要因と指摘されています。

フレームをサポートしているWebブラウザーの場合この例では画面は次のようになります。

分割の方法はframeset要素の属性で示し、横に分割する場合はcols属性、縦に分割する場合はrows属性を使用します。

属性の値は分割したい領域の数だけ , (カンマ)で区切って領域の大きさを指定します。最後の領域には*を使って「残りすべて」を表現することができます。領域のサイズの単位はpxの他%や比率での指定も使用できます。

例：縦に３つに分割し、上から100px, 200px, 残りすべてを割り当てる

この例では画面は次のようになります。

縦方向の分割と、横方向の分割の両方を含む場合は、frameset要素を入れ子にします。

例：

２−４．フレーム間のハイパーリンクの連携

フレーム分割されている場合、何も考慮せずにハイパーリンクのa要素を配置すると、そのa要素は自分のフレーム内で画面遷移を行うことになります。

※画面遷移とは、ハイパーリンクなどを使ってある画面から別の画面に移動することを指します。

メニューと本文を分ける目的で画面分割している場合、メニューのリンクをクリックして本文の方のフレームを遷移させるには、各フレームに名前を付けたうえでa要素にターゲットの指定を追加します。

フレームに名前を付けるにはframe要素のname属性を使用します。

次の例では画面を左右に分割し、左の領域をmenuFrameと名付け、右の領域をmainFrameと名付けています。

■test.htm

a要素ではtarget属性でフレームの名前を指定します。

上記の例で、a.htmに配置しているa要素を使って右の領域を遷移させるにはa.htmに次のように記述します。

■a.htm

a要素のtarget属性には以下の特別な値を指定することもできます。

参考：HTML5 5.1.6