テーブル(表)

HTMLでの表作成はワープロとは全く方法が異なるので最初は戸惑うかもしれませんが、 表のイメージとタグの関係を理解すれば決して難しいものではありません。

表を定義する要素

表はTABLE要素を使って定義し、次の各要素で表の各部を定義する。

ヘッダー:THEAD要素

表の見出しを定義する部分。

ボディ:TBODY要素

表として表示する内容を定義する部分。

行:TR要素

表の行を定義する要素。TRはTable Rowの略。

見出しセル:TH要素

ヘッダーで列見出しを定義する要素。THはTable Headerの略。

セル:TD要素

表に表示するデータのセルを定義する部分。TDはTable Dataの略。

キャプション:CAPTION要素

表題を定義する。

表の基本的な定義

次の例は3行3列の表の定義です。この例は表の定義部分のみを取り出したものです。

<TABLE border="1">
<THEAD>
<TR>
  <TH>見出し1</TH>
  <TH>見出し2</TH>
  <TH>見出し3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
  <TD>1</TD>
  <TD>2</TD>
  <TD>3</TD>
</TR>
<TR>
  <TD>4</TD>
  <TD>5</TD>
  <TD>6</TD>
</TR>
<TR>
  <TD>7</TD>
  <TD>8</TD>
  <TD>9</TD>
</TR>
</TBODY>
</TABLE>

この例は次のように表示されます。

表の範囲はTABLE要素(<TABLE>....</TABLE>)で指定します。border属性は表の線幅をピクセル単位で指定します。0を指定すると表の枠は表示されません。

行はTR要素で指定します。厳密には<TR>....</TR>と記述しますが、終了タグの</TR>は省略できます。このTR要素の数が行数を示しているといえます。

セルはTD要素で指定します。この要素の終了タグも省略できます。

セルに配置するデータは開始タグ<TD>の右側に配置します。

表題:CAPTION

表の内容を端的に示す表題はCAPTION要素で指定します。CAPTION要素はTABLE要素の直後に指定します。

<TABLE border="1">
<CAPTION>表の例<CAPTION>
<THEAD>
<TR>
  <TH>見出し1</TH>
  <TH>見出し2</TH>
  <TH>見出し3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
  <TD>1</TD>
  <TD>2</TD>
  <TD>3</TD>
</TR>
<TR>
  <TD>4</TD>
  <TD>5</TD>
  <TD>6</TD>
</TR>
<TR>
  <TD>7</TD>
  <TD>8</TD>
  <TD>9</TD>
</TR>
</TBODY>
</TABLE>

CAPTION要素を指定すると表の上に指定した表題の文字が表示されます。次のように表示されます。

TABLE要素の属性

border属性

この属性は表の線幅をピクセル単位で定義します。この属性を指定しなければ、表に線は表示されません。

<TABLE border="2">

border属性を省略した例

border="0"を指定した例

border="3"を指定した例

width属性

これまでの例では表やセルの幅はページを表示しているブラウザのウィンドウの幅あるいはセル内の文字数などに左右されています。しかし、表の幅を指定したいときはwidth属性を使います。指定する値はピクセル単位の値かウィンドウ幅に対するパーセンテージの値です。

表全体の幅は次のようにTABLE要素内で定義します。

<TABLE width="ピクセルあるいは%の値">

以下にwidthを400と80%にしたときの表示を示す。

セルの幅と高さ指定

セルの幅や高さはセルに入力した文字や画像の大きさによって変化します。セルの幅や高さを指定するには表全体への場合と同じようにwidth属性を使います。幅を指定したいセルのTD要素にwidth属性を指定します。また、セルの高さを指定したい場合、height属性を使用します。

<TD width="値" height="値">

セルの幅に対するパーセンテージ指定は表の幅に対しての割合になります。表の幅とセルの幅指定は同時に指定できます。

水平垂直の揃え

セル内の文字を水平あるいは垂直位置で揃えたい場合、align、valign属性を使います。

alignは次の値を指定できます。

valignは次の値を指定できます。

それぞれの使用例を示します。

<TABLE BORDER="1" width="400">
<TR>
  <TH width="100">alignのみ</TH>
  <TH width="100">valignのみ</TH>
</TR>
<TR>
  <TD height="40" align=left>left</TD>
  <TD valign=top>top</TD>
</TR>
<TR>
  <TD height="40" align=center>center</TD>
  <TD valign=middle>middle</TD>
</TR>
<TR>
  <TD height="40" align=right>right</TD>
  <TD valign=bottom>bottom</TD>
</TR>
</TABLE>

複数行あるいは列にまたがるセルの定義

行あるいは列の連続するセルを一つのセルとして定義することができます。行方向にはrowspan属性を、列方向にはcolspan属性を使います。これらの属性には結合したい行数あるいは列数を示す値(2以上)を指定します。次の表に例をいくつか示したものです。

<TABLE border="1" width="100">
<TR>
  <TD colspan="2">1</TD>
</TR>
<TR>
  <TD>2</TD>
  <TD>3</TD>
</TR>
</TABLE>

<TABLE border="1" width="100">
<TR>
  <TD rowspan="2">1<TD>2</TD>
</TR>
<TR>
  <TD>3</TD>
</TR>
</TABLE>

<TABLE border="1" width="100">
<TR>
  <TD>1<'/TD>
  <TD rowspan="2">2</TD>
</TR>
<TR>
  <TD>3</TD>
</TR>
</TABLE>

セルのマージン

表を構成するセルとセルの間隔やセルの枠とセル内のブントの間隔を指定できます。前者はcellspacing、後者はcellpadding属性を使います。これらの属性を使うと表を見やすくできます。

次の例はセル同士の間隔を10ピクセル、セルの枠からセル内の文字まで5ピクセルにする指定です。

<TABLE cellspacing="10" cellpadding="5">

マージン指定の有無による表示の差を示します。

マージン指定なし

マージン指定ありcellspacing="10"

マージン指定ありcellpadding="5"

マージン指定ありcellspacing="10"、cellpadding="5"

背景色の指定

表のセルには背景色を指定できる。BODY要素と同じbgcolor属性を使います。指定した場所によって色のつく範囲が異なります。

<TABLE border="1" cellpadding="4" bgcolor="pink">
<THEAD>
<TR>
  <TH>色つけの範囲</TH>
  <TH>指定する要素</TH>
</TR>
</THEAD>
<TBODY>
<TR bgcolor="lightcyan">
  <TD>行</TD>
  <TD>lightcyan</TD>
</TR>
<TR>
  <TD>セル</TD>
  <TD bgcolor="skyblue">skyblue</TD>
</TR>
</TBODY>
</TABLE>

色の値は名前および、16進数の数値で指定できます。代表的な色を色指定に示します。

背景画像の指定

表全体あるいはセルの背景に画像を指定できます。ページ全体の背景に画像を貼付ける場合と同じ、background属性を使います。次のように属性を指定します。

<TABLE background="画像ファイル名">