※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 7.表(テーブル)の属性
表（テーブル）の属性には、さまざまなものがありますが、一般的によく使用すると思われるものに絞って説明をします。
表（テーブル）の属性もHTML4.01ではスタイル属性、スタイルシートでの記述を推奨しています。
今までの記述方法の下にスタイル属性での代替方法をピンクで記述しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
今までの記述方法の下にスタイル属性での代替方法をピンクで記述しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
1.TABLEタグでは、表全体の属性が指定できます。
| BGCOLOR="#CCCCFF" BGCOLOR="BLUE" background-color: #ccccff; background-color: #blue; | 表全体の背景色を指定します。 |
| BACKGROUND="image01.gif" background-image: url(image01.gif); | 表全体の背景画像を指定します。 |
| WIDTH="120" WIDTH="50%" width: 120px; width: 50%; | 表全体の幅を指定します。 数字のみの場合ピクセル単位の指定となります。 ％指定を行うと表示できる幅をパーセントで指定できます。 セル幅をピクセルで指定する場合、単位を省略することができます。 スタイル属性、スタイルシートでは単位を省略できません。 |
| HEIGHT="120" HEIGHT="80%" height: 120px; height: 80%" | 表全体の高さを指定します。 数字のみの場合ピクセル単位の指定となります。 ％指定を行うと表示できる高さをパーセントで指定できます。 セル高さをピクセルで指定する場合、単位を省略することができます。 スタイル属性、スタイルシートでは単位を省略できません。 |
| BORDER="1" border-width: 1px; border-style: solid; border-color: #ccccff; border: 1px solid #cccccc; | 表の外枠の幅を指定します。 この指定がないと次のセル間罫線も表示されません。 スタイル属性、スタイルシートでは表の外枠、セルの外枠はそれぞれ別々に指定します。 |
| CELLSPACING="2" | セル間罫線の幅を指定します。 |
| CELLPADDING="4" | セル内の余白を指定します。 |
| ALIGN="left" ALIGN="center" ALIGN="right" float: left; float: center; float: right" | 表の左寄せ・中央揃え・右寄せを指定します。 この指定をすると表の回りに文字が回り込みます。 回り込ませたくない場合は、DIVタグやPタグでその表を挟みます。 |
| summary="表のサンプル"; | その表の解説を記述します。 |
2.CAPTIONタグでは、表題の属性が指定できます。
| ALIGN="top" | 表題を表の上に表示します。 |
| ALIGN="bottom" | 表題を表の下に表示します。 |
3.THタグ、TDタグでは、セルの属性が指定できます。
| abbr="タイトルの説明"; | 「TH」タグのみに使用し、そのタイトルの説明を記述します。 |
| BGCOLOR="#CCCCFF" BGCOLOR="BLUE" background-color: #ccccff; background-color: #blue; | セルの背景色を指定します。 |
| BACKGROUND="image01.gif" background-image: url(image01.gif); | セルの背景画像を指定します。 |
| WIDTH="120" WIDTH="50%" width: 120px; width: 50%; | セルの幅を指定します。 数字のみの場合ピクセル単位の指定となります。 ％指定を行うと表示できる幅をパーセントで指定できます。 |
| HEIGHT="120" HEIGHT="80%" height: 120px; height: 80%" | セルの高さを指定します。 数字のみの場合ピクセル単位の指定となります。 ％指定を行うと表示できる高さをパーセントで指定できます。 |
| ALIGN="left" ALIGN="center" ALIGN="right" text-align: left; text-align: center; text-align: right" | セル内の文字の左揃え・中央揃え・右揃えを指定します。 |
| VALIGN="top" VALIGN="middle" VALIGN="bottom" vertical-align: top; vertical-align: middle; vertical-align: bottom; | セル内の文字の上揃え・中央揃え・下揃えを指定します。 |
| NOWRAP white-space: nowrap; | 文字の折り返し禁止。 この指定をすると改行マークか文末がくるまで1行で表示されます。 セル幅や表幅が指定されていないと、表幅が自動的に広がります。 |
| COLSPAN="3" | セルを右方向に結合します。 |
| ROWSPAN="2" | セルを下方向に結合します。 |
それでは、上記の属性を使用したサンプルをいくつか見ていきましょう。
■ 表の属性を使用したサンプル
「TABLE」タグの属性の多くはHTML4.01で推奨されていません。
したがって、これまでのサンプルはスタイル属性を使用した記述に変更しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
したがって、これまでのサンプルはスタイル属性を使用した記述に変更しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<table style="background-color: #cccccc;" summary="サンプル"> <caption>【表 題】</caption> <tbody> <tr> <th style="background-color: #ffffff; padding: 8px;" abbr="見出し">見出しセル</th> </tr> <tr> <td style="background-color: #ffffff; padding: 8px;">明細セル</td> </tr> </tbody> </table> |
||
<table style="background-color: #cccccc; border: 8px outset #cccccc;"> <tr> <td>表の表示サンプル</td> <td>テスト表示</td> </tr> </table> |
||
<table style="border: 10px outset #ffffff;" summary="サンプル"> <tr> <td style="background-color: #00ffff; border:10px inset #0000ff;">表の表示サンプル</td> <td style="background-color: #ff00ff; border:10px inset #66ff66;">テスト表示</td> </tr> </table> |
||
<table style="border: 4px dotted #6666ff;" summary="サンプル"> <tr> <td style="background: #00ffff; border: 10px solid #0000ff;">表の表示サンプル</td> <td style="background: #ff00ff; border: 10px solid #66ff66;">テスト表示</td> </tr> </table> |
||
<table style="background-image: url(../../images/grade01.jpg);" cellspacing="8" summary="サンプル"> <tr> <td style="width: 40px"><span style="color: blue;">表の表示サンプル</span></td> <td><span style="color: red;">テスト表示</span></td> </tr> </table> |
||
<table style="background: #009900; width: 200px; height: 100px;" cellspacing="10" summary="サンプル"> <tr> <td style="background-color: #00ffff; vertical-align: middle; text-align: center;">表の表示サンプル</td> <td style="background-color: #ff00ff; vertical-align: bottom; text-align: right;">テスト表示</td> </tr> </table> |
||
<table style="background-color: #009900; width: 100px" cellspacing="4" summary="サンプル"> <tr> <td style="background-image: url(../../images/exp/renga0.gif); padding: 16px; white-space: nowrap;">表の表示サンプル</td> <td style="background-color: #ff00ff; white-space: nowrap;">テスト表示</td> </tr> </table> |