HTML/XHTML/表/表のデザイン

Top

HTML-Tips Top

スタイルシート（CSS）のFont属性

HTMLの一般的な規則

表

	表のデザイン
	セルの間隔とセルの内のマージン＜＜画像工事中＞＞外枠の規則セルの境界線の規則表の巾と高さセルの中の改行を禁止するセルの位置を調整する表の背景の色と背景の画像枠とセルを区切る境界線の色（マイクロソフト）スタイルシート（CSS）を使って表をデザインするその他のインフォメーション

セルの間隔とセルの内のマージン＜＜画像工事中＞＞

表の行や列の間の間隔をピクセルで指定することができます。またセルの枠とセルの内容の間の距離を指定することもできます。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>セルの間隔とセルの内のマージン</title>
</head>
<body>

<h1>余裕を持って</h1>

<table border="8" cellspacing="10" cellpadding="20">
    <tr>
      <th>猿</th>
      <th>猫</th>
      <th>犬</th>
    </tr>
    <tr>
      <td>三猿</td>
      <td>ミノーシュ</td>
      <td>グルミット</td>
    </tr>
    <tr>
      <td>ゴンベ</td>
      <td>フィンドゥス</td>
      <td>スヌーピー</td>
    </tr>
　<tr>
　　 <td>キングコング</td>
　　 <td>フリッツ</td>
　　 <td>スクービィ・ドゥー</td>
　 </tr>
  </table>
</body>
</html>

説明:

以下の画像は開始タグ <table> の中の属性が、実際に表の中でどんな効果を発揮するかを示しています。

cellpadding= を使うとセルの内側の間隔、つまりセルの枠とセルの内容の間の距離をピクセルで指定することができます(cellpadding = セルの内側の間隔)。cellspacing= でセルの間隔をピクセルで指定することができます(cellspacing = セルの間隔)。border= でセルを区切る境界線が見えるような表を作る場合、cellpadding= と cellspacing= の効果がはっきり分かります。境界線が見えない表の場合はこの2つの属性は目では見えず、間隔が開くだけです。

外枠の規則

border= で表の枠が見えるような表を作ると、上下左右全方向に自動的に枠がつきます。しかし外側の4方向のどれを表示させ、どれを表示させないかを指定することもできます。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>外枠の規則</title>
</head>
<body>

<h1>空きがあります</h1>

<table border="3" frame="void">
    <tr>
      <td><b>猿</b></td>
      <td><b>猫</b></td>
      <td><b>犬</b></td>
    </tr><tr>
      <td>三猿</td>
      <td>ミノーシュ</td>
      <td>グルミット</td>
    </tr><tr>
      <td>ゴンベ</td>
      <td>フィンドゥス</td>
      <td>スヌーピー</td>
    </tr><tr>
      <td>キングコング</td>
      <td>フリッツ</td>
      <td>スクービィ・ドゥー</td>
    </tr>
  </table>

</body>
</html>

説明:

開始タグ <table> の中に border= という属性を使うというのがこの記述全ての前提になります。これによって外枠が作られます。

frame= という属性によって4方向のうちどの枠線を引くかを決めます(frame = 枠)。

frame="box" (box = 四角) とすると表の枠の上下左右全方向が見えるようになります(この記述は border= で得られる効果と同じになります。frame="border" という記述も許されていて、効果は同じです)。

以下の選択肢もあります

frame="void" (void = 無効)で枠がなくなります。しかし border= を記述するとセルを区切る境界線は見えます。こうすると表は外枠が四方とも無くて、中のセルを区切る境界線だけが見えるようになります(上の例はこのバリエーションです)。
frame="above" (above = 上) とすると表の上の枠線だけがつきます。
frame="below" (below = 下) とすると表の下の枠線だけがつきます。
frame="hsides" (hsides = horizontal sides = 横方向の縁) とすると表の上と下の枠線だけがつきます。
frame="vsides" (vsides = vertical sides = 縦方向の縁) とすると表の左右の枠線だけがつきます。
frame="lhs" (lhs = left hand side = 左側) とすると表の左の枠線だけがつきます。
frame="rhs" (rhs = right hand side = 右側) とすると表の右の枠線だけがつきます。

注意:

ネットスケープ 4.x はこの記述をまだサポートしていません。

セルの境界線の規則

表のセルを区切る境界線のどの線を表示させ、どの線を表示させないか自分で規則を指定することができます。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>セルの境界線の規則</title>
</head>
<body>

<h1>犬猿の仲？</h1>

<table border="1" rules="groups">
    <thead>
    <tr>
      <th>猿</th>
      <th>猫</th>
      <th>犬</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
      <td><i>干支：<br>入っている</i></td>
      <td><i>干支：<br>干支申請中</i></td>
      <td><i>干支：<br>入っている</i></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
      <td>三猿</td>
      <td>ミノーシュ</td>
      <td>グルミット</td>
    </tr><tr>
      <td>ゴンベ</td>
      <td>フィンドゥス</td>
      <td>スヌーピー</td>
    </tr><tr>
      <td>キングコング</td>
      <td>フリッツ</td>
      <td>スクービィ・ドゥー</td>
    </tr>
    </tbody>
  </table>

</body>
</html>

説明:

開始タグ <table> の中に border= という属性を使うというのがこの記述全ての前提になります。これでセルを区切る境界線が表示されます。

rules= で開始タグ <table> の中にセルを区切る境界線の規則の選択肢を選ぶことができます(rules = 線引き)。

以下の記述が可能です。

rules="none" (none = なし) セルを区切る境界線は全く表示されません。表の外側の枠は表示されます。
rules="rows" (rows = 横の列 )で表の行の間のセルを区切る境界線は全て表示されます。表の列の線は表示されません。
rules="cols" (cols = columns = 縦の列 )で表の列の間のセルを区切る境界線は全て表示されます。表の行の線は表示されません。
rules="groups" で表のヘッダー、ボディー、フッターの間のセルを区切る境界線が引かれます( 表のヘッダー、ボディー、フッターを定義するという章参照。上の例はこの記述を使用しています)。
rules="all" で表のセルを区切る境界線は全て引かれます(初期設定)。

注意:

ネットスケープ 4.x はこの記述をまだサポートしていません。

表の巾と高さ

表全体、あるいは個々の列や表に適した巾や高さを記述することができます。これによって表に必要なスペースを作ります。

巾の入力は width= で、高さは height= で行います。どの場合も具体的な数値を入力することができます。巾、あるいは高さをピクセルで入力することもできますし、パーセントでもかまいません。パーセントの場合は数字の後にパーセントの記号 (%)を入れます。

HTMLバリエーションの Strict で許されているのは表の全体巾の入力だけです。それ以外の記述は将来廃止予定となっています。将来はHTMLの規格からはずされます。その代わりとしてスタイルシート（CSS）を使ってこういった入力を行うことができます。いくつかのブラウザーはサポートしていますが、Transitional というバリエーションのHTML規格にも属していない記述方法もあります。以下の表はどういう記述が可能か、どのHTMLの規格に沿っているか、ブラウザーはその記述をサポートしているかをまとめてあります。

記述方法	サポート状況	意味
`<table width=>`		親要素の範囲で自由になる空間に対する表全体の巾を決めます。親要素は「文書」であってもかまいません。言い換えると、`body`要素、あるいは中で表が使われる他の要素、例えば `div` 要素や外の表のセルです。
`<table height=>`		ウインドウに対する表全体の高さを決めます。この記述はブラウザーからもう長い間サポートされていますし、実際よく使われますが、HTMLの規格には入っていません。
`<th width=>` あるいは `<td width=>`		表のセルの巾を決めます。同じ列の全てのセルの巾が決まります。将来廃止予定となっています。スタイルシート（CSS）の `<th style="width:100px">`で同じ効果が得られます。しかしこのような記述は古いブラウザーでは使えません。
`<th height=>` あるいは `<td height=>`		表のセルの高さを決めます。同じ行の全てのセルの高さが決まります。将来廃止予定となっています。スタイルシート（CSS）の `<td style="height:100px">`で同じ効果が得られます。しかしこのような記述は古いブラウザーでは使えません。

<tr height=>などという記述をサポートしているブラウザーもあります。そのような記述は全部まとめてHTMLから外れており、今後使うべきではありません。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表の巾と高さ</title>
</head>
<body>

<h1>HTMLで表の巾と高さを決める</h1>

<table border="1" width="90%">
    <tr>
      <td width="35%" height="100">猿</td>
      <td>猫</td>
      <td>犬</td>
    </tr><tr>
      <td>三猿</td>
      <td>ミノーシュ</td>
      <td>グルミット</td>
    </tr><tr>
      <td>ゴンベ</td>
      <td>フィンドゥス</td>
      <tdスヌーピー</td>
    </tr>><tr>
　　 <td>キングコング</td>
　　 <td>フリッツ</td>
　　 <td>スクービィ・ドゥー</td>
　 </tr>
  </table>

<h1>スタイルシート（CSS）で表の巾と高さを決める</h1>

<table border="1" style="width:90%">
    <tr>
      <td style="width:35%; height:100px">猿</td>
      <td>猫</td>
      <td>犬</td>
    </tr><tr>
      <td>三猿</td>
      <td>ミノーシュ</td>
      <td>グルミット</td>
    </tr><tr>
      <td>ゴンベ</td>
      <td>フィンドゥス</td>
      <td>スヌーピー</td>
    </tr><tr>
　　<td>キングコング</td>
　　<td>フリッツ</td>
　　<td>スクービィ・ドゥー</td>
　</tr>  
  </table>

</body>
</html>

説明:

例では同じ表が2回記述されています。　－　最初のケースではHTML属性 width= と height= が許された場所に使われています。　－　これは Transitional というHTMLのバリエーションに従っています。2つ目の表は巾と高さの記述をこれに相当するスタイルシート（CSS）の属性で行っています。そのためStrict というHTMLのバリエーションにも合います。2つ目の表はしかしインターネット・エクスプローラですとバージョン 4.x 以降、ネットスケープですと 6.x でないと使えません。

注意:

巾と高さの記述は表あるいはセルの内容がその枠にあたる要素より小さく、空白がある場合のみ効果があります。表の内容が大きいと、巾と高さの記述は効力を失います。表あるいはセル（とその列と行）は全体の内容が表示できるような大きさで示されます。残念ながらブラウザーのいくつか　－　例えばバージョン 4.x までのネットスケープ　－　は巾と高さの記述を表の内容によって必要以上に無効にしてしまいます。

表のセルの width= という記述は列全体に有効なので、列毎に1度だけ記述すれば足ります。一番いいのは表の最初の行に記述することです。表のセルの中の height= という記述でも同じ事が言えます。この記述がそこに属する行全てに有効なので、最初の行のセルに記述するのが一番いいでしょう。上の例では最初のセルの中にある <td width="50%" height="100"> で最初の列の巾と最初の行の高さが同時に定義されています。

ピクセルによる値の入力とパーセントの入力は問題を起こさないように常に気をつけてください。上の例では全ての巾はパーセント、そして高さだけはピクセルで決めてあります。この例ではブラウザーは全体の表を親要素に対して60％、そして最初の列には50％の巾を確保します。行の高さが100ピクセルという記述はこの場合問題を起こしません。

表の列の巾を定義する時の分かりやすい解決方法については 列をあらかじめ定義しておくという章に説明が載っています。しかしここに書かれている方法は古いブラウザーでも使えるという利点があります。

セルの中の改行を禁止する

セルの内容に自動的な改行禁止という指示をすることができます。表の列は表示の際その指示に従って行われます。しかしこの時使われる属性は将来廃止予定となっており、HTMLの規格からはずされます。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>セルの中の改行を禁止する</title>
</head>
<body>

<h1>長い名前</h1>

<table border="1">
 <tr>
  <td nowrap>じゅげむという名前はこれまで聞いた中で一番長い名前です。</td>
  <td style="white-space:nowrap">ドイツにも長い名前はありますが、これまでにこんなに長い名前を聞いたことはありませんでした。<a href="../../text/anzeige/nobr.htm">全部ご覧になりたい方はこちらをどうぞ。</a></td>
 </tr>
</table>

</body>
</html>

説明:

<th> あるいは <th> という開始タグの中にある nowrap という属性（値の入力はない）のために、セルの中のテキストには自動的な改行が行われません。セルとそれの属する全ての列は必要なだけの巾を取ります。

上の例では最初のセルの中にHTML属性の nowrap が使われています。そして2つ目のセルはそれに相当するスタイルシート（CSS）の例です。スタイルシート（CSS）を使った場合HTMLのバリエーション Strict にも合います。しかし、インターネット・エクスプローラですとバージョン 4.x 以降、ネットスケープですと 6.x でないと使えません。

注意:

XHTMLに合わせる場合は、 nowrap の属性は nowrap="nowrap" という風に書きます。
詳しくは XHTMLとHTMLという章を参照してください。

セルの位置を調整する

表のセルの内容は、ささまざまな内容、あるいは巾と高さの記述のために実際の内容が必要とするよりも大きなスペースを取ることができます。この場合セルの内容を横方向に（左揃え、センタリング、右揃え）でも縦方向（上揃え、中央揃え、下揃え）にでも位置調整することができます。これに相当する記述は個々のセルに(th 要素と td 要素)でも使えますし、行(tr)、ヘッド(thead)、ボディー(thbody) 、あるいはフッター(tfoot)といった表の領域にも使うことができます。この場合記述は各領域の全てのセルに有効です。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>セルの位置を調整する</title>
</head>
<body>

<h1>どこに置きますか？</h1>

<table border="1">
 <tr>
  <th width="200" height="100" align="left" valign="top">左上</th>
  <th width="200">中央、センタリング</th>
  <th width="200" align="right" valign="bottom">右下</th>
 </tr><tr align="center" valign="top">
  <td height="100">上、センタリング</td>
  <td>上、センタリング</td>
  <td>上、センタリング</td>
 </tr><tr align="right" valign="bottom">
  <td height="100">右下</td>
  <td>右下</td>
  <td>右下</td>
 </tr>
</table>

<h2>小数点も?</h2>

<table border="1">
 <colgroup><col><col align="char" char=","></colgroup>
 <tr><th>元素</th><th>含有量 mg</th></tr>
 <tr><td>硝酸塩</td><td>0,117126</td></tr>
 <tr><td>炭酸水素</td><td>330,0</td></tr>
</table>

</body>
</html>

説明:

align="left" で開始タグ <th> の中のヘッダのセルを左揃えにします。align="right" にすると右揃えになります。データーのセルは開始タグ <td> の中の align="center"でセンタリング、align="right" で右揃えにすることができます。もちろん align="center" という記述をヘッダのセルで行い、align="left"をデーターのセルの中で行うこともできます。しかし初期設定がそうなっているのでわざわざ自分で行う必要はありません(align = 位置調整、left = 左、center = センタリング、right = 右)。この記述は開始タグ <tr>、<thead>、<tbody>、<tfoot>でも行うことができます。そうするとこれに相当する領域の全てのセルは記述通りに位置調整されます。個々のセルの記述と領域全体の記述に対立するものが出た場合は個々のセルの記述が優先されます。HTML 4.0 以降では align="justify" も許されています。これによってセル内は両端揃えになります。

valign="top" で開始タグの中でセルを上揃えにすることができます。valign="bottom"とすると下揃えになります。valign="middle"という記述もできます。しかしこれは初期設定なので必ずしも必要ではありません(valign = vertical align = 横方向の位置調整、top = 上、bottom = 下、middle = 中央)。valign という属性も開始タグ<tr>、<thead>、<tbody>、<tfoot>の中に記述することができます。HTML 4.0 以降は valign="baseline"という記述も許されています。この記述をされた行の全てのセルがまとめて基本線に並びます。このセル全ての最初のテキストの行が常に同じ高さの所から始まります。

HTML 4.0 以降は char= と charoff= という記述と関連して align="char" という記述が許されています。align="char" で列の内容が小数点の箇所で位置調整されるように強制することができます。このほかに属性 char= も必要です(char = character = 記号)。値として小数点記号を入力します。これを行うと小数点が常に同じ場所に置かれることになります。小数点を決めるためのchar= という属性のほかに charoff= という属性を記述することもできます(charoff = character offset = 記号の位置)。これによりどの位置に記号が来るかを指定することができます。上の例ではカンマが小数点として定義されています。（例では あらかじめ定義された列にあたりますが）関連する値は小数点が常に同じ位置に来るように位置調整されます。HTMLの仕様では小数点の位置調整のサポートはブラウザーが自発的にするという風になっています。そして実際一般に普及しているブラウザーはこの記述を理解しません。

表の背景の色と背景の画像

表全体、行、あるいは個々のセルの背景の色を定義することができます。普及しているWeb ブラウザーは壁紙（ウォールペーパー）効果を使った背景の画像もサポートしていますが、この記述はHTMLの規格に入っていたことはありません。背景の色に関する記述も廃止予定とされており、将来はHTMLの規格からはずされます。背景の色、背景の画像ともスタイルシート（CSS）で定義することができます。

例:

実例: このようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表の背景の色と背景の画像</title>
</head>
<body text="#000099">

<h1>HTMLを使って背景に色をつける</h1>

<table border="1" bgcolor="#FFFF00">
 <tr>
  <td width="200" height="100"><h2>黄色</h2></td>
  <td width="200" bgcolor="#00FFFF"><h2>空色</h2></td>
  <td width="200"><h2>黄色</h2></td>
 </tr><tr  bgcolor="#FF00FF">
  <td height="100"><h2>ピンク</h2></td>
  <td><h2>ピンク</h2></td>
  <td><h2>ピンク</h2></td>
 </tr>
</table>

<h1>スタイルシート（CSS）を使って背景に色をつける</h1>

<table border="1" style="background-color:#FFFF00">
 <tr>
  <td width="200" height="100"><h2>黄色</h2></td>
  <td width="200" style="background-color:#00FFFF"><h2>空色</h2></td>
  <td width="200"><h2>黄色</h2></td>
 </tr><tr style="background-color:#FF00FF">
  <td height="100"><h2>ピンク</h2></td>
  <td><h2>ピンク</h2></td>
  <td style="background-image:url(background.jpg)"><h2>灰色</h2></td>
 </tr>
</table>

</body>
</html>

説明:

表の開始タグの中の属性 bgcolor= で表全体の背景の色を指定することができます(bgcolor = background color = 背景の色)。色の入力は HTMLの色の定義の規則に従います。その行の全てのセルの背景の色を決めるために表の行の開始タグ(<tr>)の中に属性bgcolor= を入力をすることもできます。データーのセル(<td>)あるいはヘッドののセル (<th>)の開始タグの中に bgcolor=を入力すると、これはその1つのセルの背景に対して有効になります。

同じ事について2つの異なる入力が重なった場合、個々のセルに対する色の入力が行全体あるいは表全体の入力より優先されます。行に関する入力で入力が重なった場合は、表全体の入力より行の入力が優先されます。

背景の画像を表や個々のセルに組み込むために background= という属性を使うと同じことができます。しかしこの属性は表に関してはHTMLの規格に入っていません。そして上の例には使われいません。

2つ目の例ではHTML規格に合わせた表が記述されています。ネットスケープの 4.x だけはスタイルシート（CSS）による表の記述を、まだサポートしていません。上の例では同じディレクトリーに
background.jpg という画像が置いてあるものと考えられます。しかし画像は他のディレクトリーにあってもかまいませんし(例えば /file/gazo/haikei/background.gif や ../gif/back.gif)、全く別なURIを指定してもかまいません(例えばhttp://www.my-other-server.de/gazo/back.jpg) 。

注意:

背景の色を定義したり、画像を指定したりする時は、テキストに適した対照的な色を定義してください。

枠とセルを区切る境界線の色（マイクロソフト）

枠とセルを区切る境界線に色をつけることができます。この記述はこれまで MS インターネット・エクスプローラだけが理解し、HTMLの規格には入っていません。代わりに枠は スタイルシート（CSS）を使ってデザイン しましょう。

表の開始タグ <table> の中の bordercolor= という属性で表の枠とセルを区切る境界線を統一した色に決めることができます(bordercolor = 境界線の色)。

明暗2つの異なる色を定義することで、単純な枠でなく、影のような効果を出すことができます。表の開始タグの中に2つの属性 bordercolordark= (bordercolordark = 暗い枠の色) と bordercolorlight= (bordercolorlight = 明るい枠の色)を記述します。

スタイルシート（CSS）を使って表をデザインする

特に表の場合 カスケーディング・スタイルシート（CSS）はデザインの大きな助けになります。個別にでもグループとしてでもスタイルシート（CSS）で表の全ての要素を希望通りに書式設定することができます。表の枠のためのスタイルシート（CSS）があります。スタイルシート（CSS）を使用する場合まずどうやって スタイルシートで書式設定をするかを知らなければなりません。それを理解すればスタイルシートの属性が使用できるようになります。この章のテーマにとって重要なのは以下のスタイルシートの属性です。

表の書式設定
文字の書式設定
位置調整、段落の書式設定
外側の余白と間隔
内側の余白
枠
 背景の色と画像
要素の位置調整と表示


	セルの結合
	表の構造

HTML Tips

HTMLの一般的な規則

表