<<space >>  Home>>Works>>ホームページの作り方>>テーブルの基礎
5.テーブルの基礎
5.1.テーブルとは?
 Webページの構造の基本は、一般の文書と同じで『上から下』である。 4章までに紹介したHTMLタグやスタイルシートでは、 文章の理論的な構造や文章の見栄えを設定することは容易であったが、 デザイン的な文章や要素の配置は、padding属性 ・ margin属性 ・ text-align属性などで多少は設定できるものの、 細かい設定は困難であった。そこで使われるのがテーブルである。
 テーブルは表を作成するためのものであって、そのようなデザイン的な用途に使うことはふさわしくないと W3Cは注意しているが、 実際のところ、テーブルがデザイン的な用途で使われることで、さまざまなデザインのサイトが存在するので、 テーブルを使うな、と言われても「はい、そうですか。」とは言いにくい。 ただし、W3Cがデザイン的な要素に使うことを推奨していないのは、 テーブルに対応していない環境や音声ブラウザを考慮してのことなので、それはそれで重要なこともある。
 よって、サイト製作者としては、テーブルをデザイン的に用いる場合は、 『右から左、上から下』の基本的な構造は意識し、できれば、テーブルを使っていないページを別途用意するのがよいかと思う。 最近は、携帯端末からWebサイトを閲覧することも多いので、 テーブルを使っていないシンプルなサイトも需要があるので、作っておいて損はないはずだ。
 この章では、デザイン的なテーブルの使用(6章)の前に、基本的なテーブルの作り方を紹介していく。 


5.2.テーブルの作り方  <table> <tr> <td>
 テーブルは日本語で言う”表”のことである。 一般的に、表は多数の文字や数をコマによって分けて長方形に並べたものである。 横並びのコマをといい、上から順に、1行、2行・・・と数え、 一方縦並びのコマをといい、左から順に、1列、2列・・・と数える。 コンピュータの世界ではコマではなくセル(cell。英語でコマの意。)という呼び方が一般的であり、 HTML言語にも使われているので、 以後はセルと呼ぶ。
(1.1)(1.2)(1.3)
(2.1)(2.2)(2.3)
 テーブルは、基本的には table要素・tr要素・td要素の3つの要素によって構成され、 文字や数字だけでなく、画像やリンク、別のテーブルといったあらゆる要素をセルに置くことができる。
  • <table>・・・</table>は、テーブルを作るための要素である。 テーブルを作りたい位置にこれを記述することで、「ここにテーブルを作りますよ。」ということを示し、その要素内にはセルを作るための tr要素と td要素が含まれる。 table要素の属性では、テーブルの色や枠の太さといったテーブル全体の設定を行う。
  • <td>・・・</td>は、セルを1つを作るための要素である。 td は table data の略で、要素内にはそのセルの内容を記述する。 td 要素の属性では、その1つのセルについての設定を行う。
  • <tr>・・・</tr>は、 td要素を好きな数だけ要素内に含めることで、それらが同一の行にあることを指定する。 tr要素の属性では、要素内にある全ての td要素の設定を一括に設定する、つまり、 その行にある全てのセルについての設定を行う。

例えば、上の表は以下のようにして表すことができる。


<table border="1">
  <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>
</table>

 注意しなければならないのは、この例から分かるように、 td 要素は必ず tr 要素に含まれtr 要素は必ず td 要素に含まれるということだ。 1行しかないテーブルでも tr要素は必要であるし、 セルが1つだけしかないテーブルであっても、

<table> <tr> <td>(1.1)</td> </tr> </table>

といったように3つの要素が正しい順序で入れ子構造になっていなければならない。


※補足1:table要素内に含めることができる要素としては、tr 要素にも以下のようなものがあり、 これらは全て HTML4.x Strict DTD でも定義されている。ただ、 ブラウザ側が未対応であるかこれらを活かせるだけの機能がなかったり、 もしくは使う機会があまりなかったりするので、紹介は省略する。
<caption>、<th>、<thead>、<tbody>、<tfoot>、 <col>、<colgroup>


※補足2:td要素のcolspan属性を設定することで、横並びのセルを連結を行い、 rowspan属性を設定することで、縦並びのセルの連結を行うことができる。 属性値には、いくつのセルを連結するかを指定する。

<table border="1">
   <tr><td>(1.1)</td><td colspan="2">(1.2)    </td></tr>  
   <tr><td>(2.1)</td><td>(2.2)</td><td>(2.3)</td></tr>
</table>

<table border="1">
   <tr><td>(1.1)</td><td rowspan="2">(1.2)</td><td>(1.3)</td></tr>
   <tr><td>(2.1)</td><td>(2.3)                            </td></tr>
</table>

<table border="1">
   <tr><td>(1.1)</td><td>    (1.2)    </td><td>(1.3)</td></tr>
   <tr><td>(2.1)</td><td colspan="2" rowspan="2">(2.2)</td></tr>
   <tr><td>(3.1)                                        </td></tr>
</table>

ブラウザで読み込むと…
(1.1)(1.2)
(2.1)(2.2)(2.3)
(1.1)(1.2)(1.3)
(2.1)(2.3)
(1.1)(1.2)(1.3)
(2.1)(2.2)
(3.1)



5.3.table要素の属性1  border cellspacing cellpadding
 table要素の属性を使って tableの形を設定するには、まずテーブルの構造を知らねばならない。
tableの構造
【図1】

  一番外側の黒線がテーブルの境界線(border)、その内部がテーブルとなる。 内部にある四つの青と水色でできた四角形はセルであり、その周辺の黒線がセルの境界線である。 セルの内部の濃い青の部分は、セルに含まれるコンテンツ、すなわち1つのtd要素内のコンテンツである。 上でも述べたようにコンテンツとしては、文章・画像・さらに小さいテーブル・その他の要素などが置かれ、 右上のセルには、文章のイメージを **** で記してある。

 さて< table > は、特に属性を設定してない場合も、ブラウザで読み込んだときに、
<table border="0" cellspacing="2" cellpadding="1">
くらいの値がつけられて読み込まれている。 この3つの属性が、テーブルの形を設定する上で重要なものである。
  •  border 属性は、テーブルとセルの境界線( border )の太さを指定する。 属性値が0で境界線なし(透明なだけで、テーブルが消滅するわけではない)、 属性値が1で【図1】で言えば黒の部分の太さが全て1px になる。 ただし、2以上の値をいれた場合は、テーブルの境界線だけ(一番外枠のみ)がそれ相応に太くなり、 セルの境界線は1pxのままであるので注意が必要。セルの境界線の太さを変えたい場合は、 そのセルを作る td要素の style属性で設定する。
     ちなみに、 『Microsoft Internet Explorer』でも『Netscape Navigator』の標準の境界線は、 色は灰色で、スタイルはテーブルの境界線が outset( 凸 )、セルの境界線が inset(凹)となっているが。 これらの変更もスタイルシートで行う。スタイルシートの境界線の設定の詳細は 5章5節
  •  cellspacing 属性は、セルとセル、セルとテーブルの境界線の長さを設定する。 図1で言えば、黄色の部分の幅である。
  •  cellpadding 属性は、テーブル内の全てのセルについて、 セルの境界線とセルに含まれるコンテンツとの間の余白の長さを設定する。 図1で言えば水色の部分の幅の長さで、上下左右の余白は全て同じ長さである。 4章8節で紹介した、 スタイルシートの padding属性と同じように考えると、テーブルで設定する padding なので、 テーブルのコンテンツ(つまり、全てのセルを囲んだ部分)とテーブルの境界線との間の余白ということで、 【図2】のような設定をするための属性と勘違いするかもしれないが、 あくまでこれは cellpadding、つまり『セル』の『余白』の設定であることに注意。
     ちなみに、【図2】のようにしたければ、 table要素の style属性で padding の設定すればよいのだが、 『Microsoft Internet Explorer 6.x』では何故か認識されず、cellpadding属性を0にした時だけ、 cellpadding と同じ働きをしてしまうという奇妙な反応をする。
     また、td要素の style属性で padding の設定をすると、セル内の余白を、 【図3】のように自由に設定できる。
  •  上の3つ以外で重要な属性は、width 属性である。 長さを固定するか、パーセントで設定するかはデザイン次第である。
 

5.4.table要素の属性2  frame rules
 table要素の frame属性 rules属性を設定することで、 テーブル内の任意の境界線を表示することができる。


<table border="1"> 
 <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>
 <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

ブラウザで読み込むと…
1.11.21.3
2.12.22.3
3.13.23.3



上のような簡単なテーブルを用意して、実際にこれの table要素に frame属性と rules属性を設定していこう。

<table frame="above" rules="none"> <table frame="below" rules="none"> <table frame="hsides" rules="none">
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
<table frame="vsides" rules="none"> <table frame="rhs" rules="none"> <table frame="lhs" rules="none">
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
<table frame="void" rules="cols"> <table frame="void" rules="rows">
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
<table frame="void" rules="all"> <table frame="box" rules="none"> <table frame="border" rules="none">
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3
1.11.21.3
2.12.22.3
3.13.23.3


  ※ rules="all"、frame="box"、frame="border" は、設定しなくてもよい。


5.5.スタイルシートによるテーブルの設定
_
 4章で紹介したスタイルシートを使って、 テーブルの見栄えを設定できる。ここをしっかりとマスターすることが、 6章で、テーブルをデザイン的に活用する際に重要となる。
  •   背景色を設定する background-color :td 要素のstyle属性ではセル1つの背景色を設定し、 tableで設定すればテーブルの背景色となる。図1で言えば、前者が青の部分、後者が黄色の部分となる。 また、td 要素の背景色を設定していないと、そのセルは透明となり結果テーブルの背景色となる。 そしてtable 要素の背景色を設定していないと、そのテーブルは透明となり結果テーブルを含んでいる要素の背景色となる。
     ちなみに、tr 要素の style属性で背景色を設定した場合は、その tr 要素に含まれた全ての td要素の背景色を、 つまりその行の全てのセルの背景色を一括して設定する。
  •   フォントを設定する color、font-size、font-style、font-weight等: td 要素のstyle属性で、td要素内の文字のフォントを設定できる。 また、tr 要素で設定した場合は、その tr 要素に含まれている全ての td要素内の文字のフォントを一括して設定し、 table 要素で設定した場合は、そのテーブルに含まれている全ての td要素の文字のフォントを一括して設定する。
  •   文書の位置を設定する text-align: td 要素のstyle属性で、td要素内の文書の位置を設定できる。 例えば style="text-align:right" とすれば、そのセル内の文書は全て右寄りになる。 また、tr 要素で設定した場合は、その tr 要素に含まれている全ての td要素内の文書の位置を一括して設定し、 table 要素で設定した場合は、そのテーブルに含まれている全ての td要素の文書の位置を一括して設定する。
     文書の位置の設定方法には、スタイルシートを使わない方法= align属性を使う方法がある。 td要素もしくはtr要素の align属性を使っての設定は、align="center" といった感じ行われ、 text-align と同じ効果を得ることができる。ただ、table 要素の align属性は、 スタイルシートのtext-align と違い、 tableに含まれる全てのセル内の文書の位置の設定ではなく、テーブル自体の位置の設定となるので注意が必要。 table 要素の align属性は、HTML4.xでは非推奨なので、 tr 要素や td 要素でも、スタイルシートの text-align を使ったほうがよいかと思う。
  •   余白を設定する padding5.3.のcellpadding の説明の中でも少しふれたが、 td 要素のstyle属性で、【図3】のように、 td要素によって作られるセル内の余白を設定できる。 『Microsoft Internet Explorer』では、tr 要素で padding を設定した場合は、 その tr 要素に含まれている全ての td によって作られるセルの余白を一括して設定できるが、 『Netscape Navigator』ではサポートされていない。 また、 table 要素で padding を設定した場合は、 『Netscape Navigator』では【図2】のように、 テーブルのコンテンツとテーブルの境界線との間の余白を設定するが、 『Microsoft Internet Explorer』では、table 要素の cellpadding属性の設定と効果が同じである。
     一方、marginは、td 要素や tr 要素では設定しても意味はなく、 table要素で設定した場合、テーブルとその他の要素との余白の設定となる。
  •   境界線を設定する border: ブラウザによって対応が最も変わってしまうのが 境界線の設定であるが、 バグをださないために重要なのは、スタイルシート用いる場合、 border-color 属性、border-size 属性、border-style 属性 の3つ全て、 もしくはそれを一括して設定できる border 属性の設定をすることである。 td 要素のstyle属性ではセル1つの境界線を設定し、 tableで設定すればテーブルの境界線となる。 tr 要素の style属性で設定は基本的にできないが、 『Microsoft Internet Explorer』では、tr 要素で border-color を設定した場合は、 その tr 要素に含まれている全ての td によって作られるセルの境界線を一括して設定できるが、 『Netscape Navigator』ではサポートされていない。


Copyright(c) 2003 Mr.HAMACCO All Rights Reserved. space