mozilla

Revision 392385 of <table>

  • リビジョンの URL スラグ: Web/HTML/Element/table
  • リビジョンのタイトル: <table>
  • リビジョンの ID: 392385
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント HTML/Element/table Web/HTML/Element/table

このリビジョンの内容

概要

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

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

使用可能な場所

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

属性

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

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

注意:

  • 既に非推奨とされているため、この属性を使用しないで下さい。 {{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには、 {{cssxref("text-align")}} や {{cssxref("vertical-align")}} CSS プロパティを使用するべきです。{{yakuchu("横方向に左揃えまたは右揃えとする場合、表の位置については後方互換モード時の text-align プロパティも該当しますが、この align 属性と違って後続のテキスト等の流し込みは発生しません。テキストの流し込みまで考慮する場合、同様の結果をもたらすのは float プロパティです。表を横方向に中央揃えとする場合は、標準準拠モードでは margin-left プロパティ及び margin-right プロパティをいずれも auto にし、後方互換モードでは text-align プロパティ を center にすることで同様の結果が得られます。")}}
  • Firefox 4 より前には、 Firefox は、後方互換モードに限り、 middleabsmiddle、また center と同義の abscenter もサポートしていました。
{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
この属性は、表及びそのコンテンツの背景色を定義します。値は「#」を前置した、 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"
使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 bgcolor 属性と同様の効果を与えるためには、 {{cssxref("background-color")}} CSS プロパティを使用するべきです。
{{htmlattrdef("border")}} {{Deprecated_inline}}
この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは {{htmlattrxref("frame", "table")}} 属性が void に設定されることを意味します。
使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 border 属性と同様の効果を与えるためには、 {{cssxref("border")}} や {{cssxref("border-color")}}、 {{cssxref("border-width")}}、 {{cssxref("border-style")}} CSS プロパティを使用するして下さい。
{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}
この属性は、セルのコンテンツと、枠線(表示・非表示を問わない)の間の余白を定義します。もしピクセル長であれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。もしパーセント長であれば、コンテンツは中央に置かれ、全体の垂直方向(上下)の余白がこのパーセントに相当するでしょう。全体の水平方向(左右)の余白も同じです。

使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 cellpadding 属性と同様の効果を与えるためには、 {{HTMLElement("table")}} 要素自身の {{cssxref("border-collapse")}} プロパティの値を collapse とした上で、 {{HTMLElement("td")}} 要素に {{cssxref("padding")}} プロパティを使用して下さい。
{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}
この属性は、パーセント値またはピクセル値で、水平方向と垂直方向の両方の 2 つのセルの間及び、表の上端と最初の行のセル、表の左端と最初の列、表の右端と最後の列、表の下端と最後の行の間の、余白の大きさを定義します。
使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 cellspacing 属性と同様の効果を与えるためには、 {{HTMLElement("table")}} 要素自身の {{cssxref("border-collapse")}} プロパティの値を collapse とした上で、 {{HTMLElement("td")}} 要素に {{cssxref("margin")}} プロパティを使用して下さい。
{{htmlattrdef("frame")}} {{Deprecated_inline}}
この列挙属性は、表を囲む枠線のどの方向が表示されなければならないかを定義します。以下の値を持つことができます。
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は CSS を使ってスタイルされるべきです。 frame 属性と同様の効果を与えるためには、 {{cssxref("border-style")}} や {{cssxref("border-width")}} CSS プロパティを使用して下さい。
{{htmlattrdef("rules")}} {{Deprecated_inline}}
この列挙属性は、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。
  • none。罫線は表示されないことを示す、初期値です。
  • groups。 {{HTMLElement("thead")}} 要素や {{HTMLElement("tbody")}} 要素、{{HTMLElement("tfoot")}} 要素によって定義される行グループと、 {{HTMLElement("col")}} 要素や {{HTMLElement("colgroup")}} 要素によって定義される列グループの間にのみ、罫線が表示されます。
  • rows。行の間の罫線が表示されます。
  • columns。列の間の罫線が表示されます。
  • all。行と列の間の罫線が表示されます。
注意:
  • 罫線のスタイリングはブラウザに依存し、変更することができません。
  • 既に非推奨とされているため、この属性を使用しないで下さい。罫線は CSS を使って定義・スタイルされるべきです。  {{cssxref("border")}} CSS プロパティを、適切な {{HTMLElement("thead")}} 要素や {{HTMLElement("tbody")}} 要素、 {{HTMLElement("tfoot")}} 要素、 {{HTMLElement("col")}} 要素あるいは {{HTMLElement("colgroup")}} 要素に使用して下さい。
{{htmlattrdef("summary")}} {{Deprecated_inline}}
この属性は、ユーザーエージェントが表を表示することができない場合に、表を説明するための代替テキストを定義します。一般的には、目の見えない人が点字スクリーンを使ってウェブブラウズするように、視覚障がい者が表から情報を得ることができるように、表の説明を含みます。もしこの属性に追加された情報が、非視覚障がい者にとっても役に立つものである場合は、代わりとして {{HTMLElement("caption")}} 要素の使用を検討して下さい。 summary 属性は必須ではなく、 {{HTMLElement("caption")}} 要素がその役割を果たす場合は、省略することができます。

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

  • 表を囲んでいる本文(表について説明することを、セマンティックに伝達する方法ではありません)。
  • 表の {{HTMLElement("caption")}} 要素。
  • 表の {{HTMLElement("caption")}} 要素内の、 {{HTMLElement("details")}} 要素。
  • {{HTMLElement("table")}} 要素を {{HTMLElement("figure")}} に含め、隣接した本文で説明を加える。
  • {{HTMLElement("table")}} 要素を {{HTMLElement("figure")}} に含め、隣接した {{HTMLElement("figcaption")}} 要素の中に本文で説明を加える。
  • 例えば {{HTMLElement("th")}} 要素や {{HTMLElement("thead")}} 要素を使うことなどで、それ以上の説明が必要無いように表を調整する。
{{htmlattrdef("width")}} {{Deprecated_inline}}
この属性は表の幅を定義します。表が使用するべき、ピクセル長または、そのコンテナの幅の割合を表すパーセント値とすることができます。
使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。表は CSS を使ってスタイルされるべきです。 代わりに、 {{cssxref("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>

結果

John Doe
Jane Doe
John Doe
Jane Doe
ヘッダ 1 ヘッダ 2
フッタ 1 フッタ 2
内容 1 内容 2
首都 人口 言語
アメリカ合衆国 ワシントンD.C. 3億9百万人 英語
スウェーデン ストックホルム 9百万人 スウェーデン語
Lime Lemon Orange
Green Yellow Orange
素晴らしいキャプション
素晴らしいデータ

ブラウザの互換性

{{CompatibilityTable}}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0

参照

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

このリビジョンのソースコード

<h2 id="Summary">概要</h2>
<p>HTML の table 要素(<code>&lt;table&gt;</code>)は、 2 つまたはそれ以上の次元のデータを表します。</p>
<div class="note">
  <strong>注意:</strong> <a href="/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> が作られる前、 HTML の&nbsp; {{HTMLElement("table")}} 要素はしばしば、ページレイアウトの方法として用いられました。この使い方は HTML 4 から推奨されておらず、 {{HTMLElement("table")}} 要素はレイアウト目的に使用される<strong>べきではありません</strong>。</div>
<h2 id="Usage_context">使用可能な場所</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/ja/docs/HTML/Content_categories" title="HTML/Content categories">コンテンツカテゴリ</a></td>
      <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a></td>
    </tr>
    <tr>
      <td>許可された内容</td>
      <td>
        <div class="content-models">
          <div id="table-mdls">
            以下の順となる。
            <ul>
              <li>任意の 1 個の {{HTMLElement("caption")}} 要素</li>
              <li>0 個以上の {{HTMLElement("colgroup")}} 要素</li>
              <li>任意の 1 個の {{HTMLElement("thead")}} 要素</li>
              <li>次の 2 つの選択肢から 1 つ
                <ul>
                  <li>1 個の {{HTMLElement("tfoot")}} 要素で、以下のものが後続する
                    <ul>
                      <li>0 個以上の {{HTMLElement("tbody")}} 要素</li>
                      <li>または、 1 個以上の{{HTMLElement("tr")}} 要素</li>
                    </ul>
                  </li>
                  <li>2 つ目の選択肢は、以下のものに任意の 1 個の {{HTMLElement("tfoot")}} 要素が後続する
                    <ul>
                      <li>0 個以上の {{HTMLElement("tbody")}} 要素</li>
                      <li>または、 0 個以上の{{HTMLElement("tr")}} 要素</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>タグの省略</td>
      <td>不可。開始タグと終了タグの両方が必要です。</td>
    </tr>
    <tr>
      <td>許可された親要素</td>
      <td>フローコンテンツを受け入れる全ての要素。</td>
    </tr>
    <tr>
      <td>標準文書</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td>
    </tr>
  </tbody>
</table>
<h3 id="Attributes">属性</h3>
<p>他の全ての HTML 要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>
<dl>
  <dt>
    {{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
  <dd>
    この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取り得ます。
    <ul>
      <li>表が文書の左に表示されることを意味する left</li>
      <li>表が文書の中央に表示されることを意味する center</li>
      <li>表が文書の右に表示されることを意味する right</li>
    </ul>
    <div class="note">
      <p><strong>注意:</strong></p>
      <ul>
        <li>既に非推奨とされているため、<strong>この属性を使用しないで下さい</strong>。 {{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには、 {{cssxref("text-align")}} や {{cssxref("vertical-align")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを使用するべきです。{{yakuchu("横方向に左揃えまたは右揃えとする場合、表の位置については後方互換モード時の text-align プロパティも該当しますが、この align 属性と違って後続のテキスト等の流し込みは発生しません。テキストの流し込みまで考慮する場合、同様の結果をもたらすのは float プロパティです。表を横方向に中央揃えとする場合は、標準準拠モードでは margin-left プロパティ及び margin-right プロパティをいずれも auto にし、後方互換モードでは text-align プロパティ を center にすることで同様の結果が得られます。")}}</li>
        <li>Firefox 4 より前には、 Firefox は、後方互換モードに限り、 <code>middle</code> や <code>absmiddle</code>、また <code>center</code> と同義の <code>abscenter</code> もサポートしていました。</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
  <dd>
    この属性は、表及びそのコンテンツの背景色を定義します。値は「#」を前置した、 sRGB で定義される 6 桁の 16 進コードの 1 つです。 16 個のあらかじめ定義された色文字列から、 1 つを使用することができます。<br />
    <table>
      <tbody>
        <tr>
          <td style="width: 24px; background-color: black;">&nbsp;</td>
          <td><span>black</span> = "#000000"</td>
          <td style="width: 24px; background-color: green;">&nbsp;</td>
          <td><span>green</span> = "#008000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: silver;">&nbsp;</td>
          <td><span>silver</span> = "#C0C0C0"</td>
          <td style="width: 24px; background-color: lime;">&nbsp;</td>
          <td><span>lime</span> = "#00FF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: gray;">&nbsp;</td>
          <td><span>gray</span> = "#808080"</td>
          <td style="width: 24px; background-color: olive;">&nbsp;</td>
          <td><span>olive</span> = "#808000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: white;">&nbsp;</td>
          <td><span>white</span> = "#FFFFFF"</td>
          <td style="width: 24px; background-color: yellow;">&nbsp;</td>
          <td><span>yellow</span> = "#FFFF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: maroon;">&nbsp;</td>
          <td><span>maroon</span> = "#800000"</td>
          <td style="width: 24px; background-color: navy;">&nbsp;</td>
          <td><span>navy</span> = "#000080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: red;">&nbsp;</td>
          <td><span>red</span> = "#FF0000"</td>
          <td style="width: 24px; background-color: blue;">&nbsp;</td>
          <td><span>blue</span> = "#0000FF"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: purple;">&nbsp;</td>
          <td><span>purple</span> = "#800080"</td>
          <td style="width: 24px; background-color: teal;">&nbsp;</td>
          <td><span>teal</span> = "#008080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: fuchsia;">&nbsp;</td>
          <td><span>fuchsia</span> = "#FF00FF"</td>
          <td style="width: 24px; background-color: aqua;">&nbsp;</td>
          <td><span>aqua</span> = "#00FFFF"</td>
        </tr>
      </tbody>
    </table>
    <div class="note">
      <strong>使用上の注意: </strong>既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 bgcolor 属性と同様の効果を与えるためには、 {{cssxref("background-color")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを使用するべきです。</div>
  </dd>
  <dt>
    {{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
  <dd>
    この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは {{htmlattrxref("frame", "table")}} 属性が void に設定されることを意味します。<br />
    <div class="note">
      <strong>使用上の注意:</strong> 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 border 属性と同様の効果を与えるためには、 {{cssxref("border")}} や {{cssxref("border-color")}}、 {{cssxref("border-width")}}、 {{cssxref("border-style")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを使用するして下さい。</div>
  </dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
  <dd>
    この属性は、セルのコンテンツと、枠線(表示・非表示を問わない)の間の余白を定義します。もしピクセル長であれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。もしパーセント長であれば、コンテンツは中央に置かれ、全体の垂直方向(上下)の余白がこのパーセントに相当するでしょう。全体の水平方向(左右)の余白も同じです。</dd>
  <dd>
    <br />
    <div class="note">
      <strong>使用上の注意:</strong> 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 cellpadding 属性と同様の効果を与えるためには、 {{HTMLElement("table")}} 要素自身の {{cssxref("border-collapse")}} プロパティの値を collapse とした上で、 {{HTMLElement("td")}} 要素に {{cssxref("padding")}} プロパティを使用して下さい。</div>
  </dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
  <dd>
    この属性は、パーセント値またはピクセル値で、水平方向と垂直方向の両方の 2 つのセルの間及び、表の上端と最初の行のセル、表の左端と最初の列、表の右端と最後の列、表の下端と最後の行の間の、余白の大きさを定義します。<br />
    <div class="note">
      <strong>使用上の注意:</strong> 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 cellspacing 属性と同様の効果を与えるためには、 {{HTMLElement("table")}} 要素自身の {{cssxref("border-collapse")}} プロパティの値を collapse とした上で、 {{HTMLElement("td")}} 要素に {{cssxref("margin")}} プロパティを使用して下さい。</div>
  </dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
  <dd>
    この列挙属性は、表を囲む枠線のどの方向が表示されなければならないかを定義します。以下の値を持つことができます。<br />
    <table style="width: 668px;">
      <tbody>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>above</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>below</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>hsides</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>vsides</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>lhs</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>rhs</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>border</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>box</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>void</span></td>
        </tr>
      </tbody>
    </table>
    <div class="note">
      <strong>使用上の注意:</strong> 既に非推奨とされているため、この属性を使用しないで下さい。{{HTMLElement("table")}} 要素は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 frame 属性と同様の効果を与えるためには、 {{cssxref("border-style")}} や {{cssxref("border-width")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを使用して下さい。</div>
  </dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
  <dd>
    この列挙属性は、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。
    <ul>
      <li><span>none</span>。罫線は表示されないことを示す、初期値です。</li>
      <li><span>groups。 </span>{{HTMLElement("thead")}} 要素や {{HTMLElement("tbody")}} 要素、{{HTMLElement("tfoot")}} 要素によって定義される<span>行グループ</span>と、 {{HTMLElement("col")}} 要素や {{HTMLElement("colgroup")}} 要素によって定義される列グループの間にのみ、罫線が表示されます。</li>
      <li>rows。行の間の罫線が表示されます。</li>
      <li>columns。列の間の罫線が表示されます。</li>
      <li><span>all。</span>行と列の間の罫線が表示されます。</li>
    </ul>
    <div class="note">
      <strong>注意:</strong>
      <ul>
        <li>罫線のスタイリングはブラウザに依存し、変更することができません。</li>
        <li>既に非推奨とされているため、この属性を使用しないで下さい。罫線は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使って定義・スタイルされるべきです。&nbsp; {{cssxref("border")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを、適切な {{HTMLElement("thead")}} 要素や {{HTMLElement("tbody")}} 要素、 {{HTMLElement("tfoot")}} 要素、 {{HTMLElement("col")}} 要素あるいは {{HTMLElement("colgroup")}} 要素に使用して下さい。</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
  <dd>
    この属性は、ユーザーエージェントが表を表示することができない場合に、表を説明するための代替テキストを定義します。一般的には、目の見えない人が点字スクリーンを使ってウェブブラウズするように、視覚障がい者が表から情報を得ることができるように、表の説明を含みます。もしこの属性に追加された情報が、非視覚障がい者にとっても役に立つものである場合は、代わりとして&nbsp;{{HTMLElement("caption")}} 要素の使用を検討して下さい。 summary 属性は必須ではなく、 {{HTMLElement("caption")}} 要素がその役割を果たす場合は、省略することができます。<br />
    <div class="note">
      <p><strong>使用上の注意: </strong>既に非推奨とされているため、この属性を使用しないで下さい。代わりに、表を説明するための以下の方法の 1 つを使って下さい。</p>
      <ul>
        <li>表を囲んでいる本文(表について説明することを、セマンティックに伝達する方法ではありません)。</li>
        <li>表の {{HTMLElement("caption")}} 要素。</li>
        <li>表の {{HTMLElement("caption")}} 要素内の、 {{HTMLElement("details")}} 要素。</li>
        <li>{{HTMLElement("table")}} 要素を {{HTMLElement("figure")}} に含め、隣接した本文で説明を加える。</li>
        <li>{{HTMLElement("table")}} 要素を {{HTMLElement("figure")}} に含め、隣接した {{HTMLElement("figcaption")}} 要素の中に本文で説明を加える。</li>
        <li>例えば {{HTMLElement("th")}} 要素や {{HTMLElement("thead")}} 要素を使うことなどで、それ以上の説明が必要無いように表を調整する。</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
  <dd>
    この属性は表の幅を定義します。表が使用するべき、ピクセル長または、そのコンテナの幅の割合を表すパーセント値とすることができます。<br />
    <div class="note">
      <strong>使用上の注意:</strong> 既に非推奨とされているため、この属性を使用しないで下さい。表は <a href="/ja/docs/CSS" title="CSS">CSS</a> を使ってスタイルされるべきです。 代わりに、 {{cssxref("width")}} <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティを使用して下さい。</div>
  </dd>
</dl>
<h3 id="DOM_interface">DOM インターフェース</h3>
<p>この要素は、 <code><a href="/ja/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code> インターフェイスを実装しています。</p>
<h3 id="Examples">例</h3>
<pre class="brush: html">
&lt;!-- シンプルな表 --&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

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

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

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

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

&lt;!-- caption のあるシンプルな表 --&gt;
&lt;table&gt;
  &lt;caption&gt;素晴らしいキャプション&lt;/caption&gt;
  &lt;tr&gt;
    &lt;td&gt;素晴らしいデータ&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<h4 id="Result">結果</h4>
<!-- Simple table -->
<table class="standard-table">
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
<!-- Simple table with header -->
<table class="standard-table">
  <tbody>
    <tr>
      <th>名</th>
      <th>性</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
<!-- Table with thead, tfoot, and tbody -->
<table class="standard-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>
<!-- Table with colgroup -->
<table class="standard-table">
  <colgroup class="columns" span="4">
  </colgroup>
  <tbody>
    <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>
  </tbody>
</table>
<!-- Table with colgroup and col -->
<table class="standard-table">
  <colgroup>
    <col class="column1" />
    <col class="columns2plus3" span="2" />
  </colgroup>
  <tbody>
    <tr>
      <th>Lime</th>
      <th>Lemon</th>
      <th>Orange</th>
    </tr>
    <tr>
      <td>Green</td>
      <td>Yellow</td>
      <td>Orange</td>
    </tr>
  </tbody>
</table>
<!-- Simple table with caption -->
<table class="standard-table">
  <caption>素晴らしいキャプション</caption>
  <tbody>
    <tr>
      <td>素晴らしいデータ</td>
    </tr>
  </tbody>
</table>
<h3 id="Browser_compatibility">ブラウザの互換性</h3>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>4.0</td>
        <td>7.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile("1")}}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="See_also">参照</h3>
<ul>
  <li>表に関連する他の HTML 要素。 {{HTMLElement("caption")}} 要素、 {{HTMLElement("col")}} 要素、 {{HTMLElement("colgroup")}} 要素、 {{HTMLElement("tbody")}} 要素、 {{HTMLElement("td")}} 要素、 {{HTMLElement("tfoot")}} 要素、 {{HTMLElement("th")}} 要素、 {{HTMLElement("thead")}} 要素、 {{HTMLElement("tr")}} 要素。</li>
  <li><span style="font-family: Courier New;">&lt;table&gt;</span> 要素をスタイルするのに特に役に立つであろう CSS の プロパティ。
    <ul>
      <li>表の幅を操作するための {{cssxref("width")}}</li>
      <li>セルの線や、罫線、枠線の外観を操作するための {{cssxref("border")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}}、 {{cssxref("border-width")}}、 {{cssxref("border-collapse")}}、 {{cssxref("border-spacing")}}</li>
      <li>個別のセルの内容をスタイルするための {{cssxref("margin")}} や {{cssxref("padding")}}</li>
      <li>テキストやセルの内容の配置を定義するための {{cssxref("text-align")}} や {{cssxref("vertical-align")}}</li>
    </ul>
  </li>
</ul>
このリビジョンへ戻す