<table>

概要

HTML の table 要素（<table>）は、 2 つまたはそれ以上の次元のデータを表します。

使用可能な場所

属性

他の全ての HTML 要素と同様に、この要素はグローバル属性を持ちます。

align

この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取り得ます。

• 表が文書の左に表示されることを意味する left
• 表が文書の中央に表示されることを意味する center
• 表が文書の右に表示されることを意味する right

注意：

• 既に非推奨とされているため、この属性を使用しないで下さい。 <table> 要素は CSS を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには、 text-align や vertical-align CSS プロパティを使用するべきです。【訳注: 横方向に左揃えまたは右揃えとする場合、表の位置については後方互換モード時の text-align プロパティも該当しますが、この align 属性と違って後続のテキスト等の流し込みは発生しません。テキストの流し込みまで考慮する場合、同様の結果をもたらすのは float プロパティです。表を横方向に中央揃えとする場合は、標準準拠モードでは margin-left プロパティ及び margin-right プロパティをいずれも auto にし、後方互換モードでは text-align プロパティ を center にすることで同様の結果が得られます。】
• Firefox 4 より前には、 Firefox は、後方互換モードに限り、 middle や absmiddle、また center と同義の abscenter もサポートしていました。

bgcolor

この属性は、表及びそのコンテンツの背景色を定義します。値は「#」を前置した、 sRGB で定義される 6 桁の 16 進コードの 1 つです。 16 個のあらかじめ定義された色文字列から、 1 つを使用することができます。

	black = "#000000"		green = "#008000"
	silver = "#C0C0C0"		lime = "#00FF00"
	gray = "#808080"		olive = "#808000"
	white = "#FFFFFF"		yellow = "#FFFF00"
	maroon = "#800000"		navy = "#000080"
	red = "#FF0000"		blue = "#0000FF"
	purple = "#800080"		teal = "#008080"
	fuchsia = "#FF00FF"		aqua = "#00FFFF"

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 bgcolor 属性と同様の効果を与えるためには、 background-color CSS プロパティを使用するべきです。

border

この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは frame 属性が void に設定されることを意味します。

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 border 属性と同様の効果を与えるためには、 border や border-color、 border-width、 border-style CSS プロパティを使用するして下さい。

cellpadding

この属性は、セルのコンテンツと、枠線（表示・非表示を問わない）の間の余白を定義します。もしピクセル長であれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。もしパーセント長であれば、コンテンツは中央に置かれ、全体の垂直方向（上下）の余白がこのパーセントに相当するでしょう。全体の水平方向（左右）の余白も同じです。

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 cellpadding 属性と同様の効果を与えるためには、 <table> 要素自身の border-collapse プロパティの値を collapse とした上で、 <td> 要素に padding プロパティを使用して下さい。

cellspacing

この属性は、パーセント値またはピクセル値で、水平方向と垂直方向の両方の 2 つのセルの間及び、表の上端と最初の行のセル、表の左端と最初の列、表の右端と最後の列、表の下端と最後の行の間の、余白の大きさを定義します。

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 cellspacing 属性と同様の効果を与えるためには、 <table> 要素自身の border-collapse プロパティの値を collapse とした上で、 <td> 要素に margin プロパティを使用して下さい。

frame

この列挙属性は、表を囲む枠線のどの方向が表示されなければならないかを定義します。以下の値を持つことができます。

	above		below
	hsides		vsides
	lhs		rhs
	border		box
	void

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 frame 属性と同様の効果を与えるためには、 border-style や border-width CSS プロパティを使用して下さい。

rules

この列挙属性は、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。

• none。罫線は表示されないことを示す、初期値です。
• groups。 <thead> 要素や <tbody> 要素、<tfoot> 要素によって定義される行グループと、 <col> 要素や <colgroup> 要素によって定義される列グループの間にのみ、罫線が表示されます。
• rows。行の間の罫線が表示されます。
• columns。列の間の罫線が表示されます。
• all。行と列の間の罫線が表示されます。

注意：

• 罫線のスタイリングはブラウザに依存し、変更することができません。
• 既に非推奨とされているため、この属性を使用しないで下さい。罫線は CSS を使って定義・スタイルされるべきです。  border CSS プロパティを、適切な <thead> 要素や <tbody> 要素、 <tfoot> 要素、 <col> 要素あるいは <colgroup> 要素に使用して下さい。

summary

この属性は、ユーザーエージェントが表を表示することができない場合に、表を説明するための代替テキストを定義します。一般的には、目の見えない人が点字スクリーンを使ってウェブブラウズするように、視覚障がい者が表から情報を得ることができるように、表の説明を含みます。もしこの属性に追加された情報が、非視覚障がい者にとっても役に立つものである場合は、代わりとして <caption> 要素の使用を検討して下さい。 summary 属性は必須ではなく、 <caption> 要素がその役割を果たす場合は、省略することができます。

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。代わりに、表を説明するための以下の方法の 1 つを使って下さい。

• 表を囲んでいる本文（表について説明することを、セマンティックに伝達する方法ではありません）。
• 表の <caption> 要素。
• 表の <caption> 要素内の、 <details> 要素。
• <table> 要素を <figure> に含め、隣接した本文で説明を加える。
• <table> 要素を <figure> に含め、隣接した <figcaption> 要素の中に本文で説明を加える。
• 例えば <th> 要素や <thead> 要素を使うことなどで、それ以上の説明が必要無いように表を調整する。

width

この属性は表の幅を定義します。表が使用するべき、ピクセル長または、そのコンテナの幅の割合を表すパーセント値とすることができます。

使用上の注意： 既に非推奨とされているため、この属性を使用しないで下さい。表は CSS を使ってスタイルされるべきです。 代わりに、 width CSS プロパティを使用して下さい。

DOM インターフェース

この要素は、 HTMLTableElement インターフェイスを実装しています。

例

<!-- シンプルな表 -->
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- ヘッダのあるシンプルな表 -->
<table>
  <tr>
    <th>名</th>
    <th>性</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- thead、tfoot、tbody のある表 -->
<table>
  <thead>
    <tr>
      <th>ヘッダ 1</th>
      <th>ヘッダ 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>フッタ 1</td>
      <td>フッタ 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>内容 1</td>
      <td>内容 2</td>
    </tr>
  </tbody>
</table>

<!-- colgroup のある表 -->
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>国</th>
    <th>首都</th>
    <th>人口</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>アメリカ合衆国</td>
    <td>ワシントンD.C.</td>
    <td>3億9百万人</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>スウェーデン</td>
    <td>ストックホルム</td>
    <td>9百万人</td>
    <td>スウェーデン語</td>
  </tr>
</table>

<!-- colgroup と col のある表 -->
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<!-- caption のあるシンプルな表 -->
<table>
  <caption>素晴らしいキャプション</caption>
  <tr>
    <td>素晴らしいデータ</td>
  </tr>
</table>

結果

ブラウザの互換性

参照

• 表に関連する他の HTML 要素。 <caption> 要素、 <col> 要素、 <colgroup> 要素、 <tbody> 要素、 <td> 要素、 <tfoot> 要素、 <th> 要素、 <thead> 要素、 <tr> 要素。
• <table> 要素をスタイルするのに特に役に立つであろう CSS の プロパティ。
  • 表の幅を操作するための width
  • セルの線や、罫線、枠線の外観を操作するための border、 border-style、 border-color、 border-width、 border-collapse、 border-spacing
  • 個別のセルの内容をスタイルするための margin や padding
  • テキストやセルの内容の配置を定義するための text-align や vertical-align