表(テーブル)

表の必要性

表は、一般的には、なんらかのデータを整理して見やすくするために使われる。 HTMLでは、それ例外にも、Webページのみばえを制御するために使われる。これは本来の表の役割ではないが、現状のHTMLにおいて段組機能は標準でないため、しばしばページのレイアウトを整える目的のために使われる。そして、最近のレイアウトに少しでも凝っているWebページではほとんど表機能が使われている状態である。

普通の表の作り方

表の領域は、<table> と </table> で囲む。
tableの属性である border の値は、枠線の幅を指定する。
表本体は、<tbody> と </tbody> で囲む。
<tr> と </tr> の間には、行要素を作成する。
<td> と </td> の間には、列要素を作成する。

もっとも単純な表は、1行1列の表であり、下記のようなHTMLによって作成される。

<table border="1">
<tbody>
  <tr>
    <td>
      表の内容をここに書く
    </td>
  </tr>
</tbody>
</table>

ブラウザに表示される表は、

表の内容をここに書く

2行3列の表は、以下のように書く。

<table border="1">
<tbody>
  <tr>
    <td>
      第1行第1列の内容
    </td>
    <td>
      第1行第2列の内容
    </td>
    <td>
      第1行第3列の内容
    </td>
  </tr>
  <tr>
    <td>
      第2行第1列の内容
    </td>
    <td>
      第2行第2列の内容
    </td>
    <td>
      第2行第3列の内容
    </td>
  </tr>
</tbody>
</table>

ブラウザに表示される表は、

第1行第1列の内容	第1行第2列の内容	第1行第3列の内容
第2行第1列の内容	第2行第2列の内容	第2行第3列の内容

上記の例の様に、行要素<tr></tr>の中に、列要素 <td></td>が含まれるので、その入れ子構造に合わせて、タグをインデント(書き始めの位置を一定桁だけ右側にずらすこと)をしておくと、HTML文書を見ただけで、表の構造が分かりやすい

<><><> <><><>

罫線や表要素(セル)のレイアウト

表を作る上で、その見栄えに関する代表的なパラメータを示す。

属性名	役割	値
border	罫線幅	整数値(ピクセル)
cellspacing	セル間隔	整数値(ピクセル)
cellpadding	セル内容と縦罫線の間の空白	整数値(ピクセル)
width	表全体の幅	ブラウザ表示範囲に対するパーセンテージピクセル数

段組としての表

段組とは、文章を横方向にグループとして分割することを意味する。表は、通常罫線という線によって、表の要素を区切っているが、この罫線を見えなく (border=0)し、かつセル間の空白の幅をやや広くとることによって、

これは左段の文章です。これは左段の文章です。これは左段の文章です。これは左段の文章です。これは左段の文章です。これは左段の文章です。これは左段の文章です。これは左段の文章です。

これは中段の文章です。これは中段の文章です。これは中段の文章です。これは中段の文章です。これは中段の文章です。これは中段の文章です。

これは右段の文章です。これは右段の文章です。これは右段の文章です。これは右段の文章です。これは右段の文章です。これは右段の文章です。

のように、文章を3段組にすることができる。ただし、通常のワードプロセッサの段組のように、自動的に１段目(左端の段)からあふれる文章を2段目(真中の段) に流し込むことはできない。

WYSIWYGエディタを使う

表をイチイチ書くのは、タグの数も多く面倒臭いし、インデント(書き始めの位置を右にずらすこと)に注意してタグを書いて行かないと、HTML文書そのものから、どのような表がブラウザに現れるかを想像することは難しい。

そこで、WYSIWYGエディタ(ここでは、Netscape Communicator)を使用すると、比較的簡単に、表の作成が可能である。

表計算ソフトの表をHTMLにする

Microsoft Excel においては、Excel2000 以降のバージョンより、ワークシート上で作成した表をHTMLファイルとして出力することができる。

手順

作成した表の範囲をマウスでドラッグして選択する
ファイル → 名前を付けて保存を選択
ファイルの種類を「Webページ (*.htm; *.html)」とする
上書き保存のチェックボックスから[選択範囲]をチェックする
保存するフォルダを選び、ファイル名を入力して、保存ボタンを押す
ファイルのヘッダ部にある <script>と</script> で囲まれた部分をscriptタグを含んだ状態で、表を掲載したいHTML文書のヘッダ部分に移す
<table></table>で囲まれた部分を、tableタグを含んだ状態で、表を掲載したいHTML文書のボディ部の適切な場所に移す

注意

このようにすると、見栄えをかなり細かく、かつ楽に設定して表を作成することができるが、IE 以外のブラウザを使ってブラウズすると、意図したとおりの見栄えは期待できないので、一般性はあまりない。また、Excelによって作成されたHTMLの表は、タグやスタイルが肥大化しており、純粋にHTMLにしたがって作成した表の何倍ものデータ量となり、ブラウズする際の転送時間もかなり長くなる。

しかし、既に作成されている複雑な表を、Webコンテンツとして再利用するにはラクな手法であるといえる。他の表計算ソフトも似たような機能を持っている。

本当は超多機能なHTMLの表

ここまでに説明したタグのみを使う限り、非常に単純な表しか作成できない。しかし実際には、HTMLにはもっと多くの表作成のためのタグや属性が用意されており、それらを使うことによって、より複雑な表作成も可能である。以下に示したものは、その他の代表的なタグおよび属性である。

表作成のためのタグおよび属性
タグ	属性	属性の値	役割
th	-	-	表の見出し要素(太字で表示される)
caption	-	-	表の注釈(タイトル)
td,th	colspan	結合するセル数	列方向にセルを結合
td,th	rowspan	結合するセル数	行方向にセルを結合

見やすい表のために

横に長くなりすぎない
縦に長くなりすぎない
行数や列数が多い場合、表を分割する

列間距離が開きすぎている表は、左右の項目の対応が取りにくい。また、多くの行をもつ表の例このような表は避けるべきである。16：30 東京行 JAL 1278 に間に合うバスは、片町バス停を何時に出発するのか？表を何度も上下にスクロールして、すぐには答えられないだろう。見にくい表は、情報を分かりやすく伝えるための手段という、表の意義をもはや失っている。このような表を見やすくするためには、

１行あるいは１列おきに背景色を変える
列や行の数が少なくなるように表を分割する
行項目名や列項目名を行の右端と左端、あるいは1画面あたり1行繰り返し記載する
Javascript等を利用して、常に表の項目名が画面上端あるいは左端に表示されるようにする
例: NHK番組表