The Wayback Machine - https://web.archive.org/web/20170813163114/https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

<table>

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

注意： CSS が作られる前、 HTML の  <table> 要素はしばしば、ページレイアウトの方法として用いられました。この使い方は HTML 4 から推奨されておらず、 <table> 要素はレイアウト目的に使用されるべきではありません。

使用可能な場所

コンテンツカテゴリ フローコンテンツ
許可された内容
以下の順となる。
  • 任意の 1 個の <caption> 要素
  • 0 個以上の <colgroup> 要素
  • 任意の 1 個の <thead> 要素
  • 次の 2 つの選択肢から 1 つ
    • 1 個の <tfoot> 要素で、以下のものが後続する
      • 0 個以上の <tbody> 要素
      • または、 1 個以上の<tr> 要素
    • 2 つ目の選択肢は、以下のものに任意の 1 個の <tfoot> 要素が後続する
      • 0 個以上の <tbody> 要素
      • または、 1 個以上の<tr> 要素
タグの省略 不可。開始タグと終了タグの両方が必要です。
許可された親要素 フローコンテンツを受け入れる全ての要素。
標準文書 HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

属性

他の全ての HTML 要素と同様に、この要素はグローバル属性を持ちます。以下に挙げるその他の属性は、非推奨になるでしょう。

align
この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取り得ます。
  • 表が文書の左に表示されることを意味する left
  • 表が文書の中央に表示されることを意味する center
  • 表が文書の右に表示されることを意味する right

注意：

  • 既に非推奨とされているため、この属性を使用しないで下さい。 <table> 要素は CSS を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには 、例えば中央に表示するには margin-left および margin-right に auto を指定 (または margin に 0 auto を指定) します。
  • 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-spacing CSS プロパティを使用してください。
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>

さまざまな表

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

<p>thead、tfoot、tbody のある表</p>
<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>

<p>colgroup のある表</p>
<table>
  <colgroup span="4"></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>

<p>colgroup と col のある表</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col 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>

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0[1] 6.0 1.0

[1] Internet Explorer 9 では、{HTMLElement("table")}} と :hover に関するレンダリングの不具合があります。詳しくは :hover のブラウザ実装状況をご覧ください。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank, sii
 最終更新者: yyss,