path: root/files/ja/web/html/element/table/index.html

---
title: '<table>: 表要素'
slug: Web/HTML/Element/table
tags:
  - Element
  - HTML
  - HTML tabular data
  - NeedsLiveSample
  - Reference
  - Sorting
  - Tables
  - Web
translation_of: Web/HTML/Element/table
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;table&gt;</code> 要素</strong>は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>
    <div class="content-models">
    <div id="table-mdls">以下の順となる。
    <ol>
     <li>任意の 1 個の {{HTMLElement("caption")}} 要素</li>
     <li>0 個以上の {{HTMLElement("colgroup")}} 要素</li>
     <li>任意の 1 個の {{HTMLElement("thead")}} 要素</li>
     <li>次の 2 つの選択肢から 1 つ:
      <ul>
       <li>0 個以上の {{HTMLElement("tbody")}} 要素</li>
       <li>1 個以上の {{HTMLElement("tr")}} 要素</li>
      </ul>
     </li>
     <li>任意の 1 個の {{HTMLElement("tfoot")}} 要素</li>
    </ol>
    </div>
    </div>
   </td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td>フローコンテンツを受け入れるすべての要素。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>すべて</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLTableElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3>

<dl>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取ります。</p>

 <ul>
  <li><code>left</code>: 表が文書の左端に表示される</li>
  <li><code>center</code>: 表が文書の中央に表示される</li>
  <li><code>right</code>: 表が文書の右端に表示される</li>
 </ul>

 <p> {{cssxref("margin-left")}} および {{cssxref("margin-right")}} に <code>auto</code> を指定したり、 {{cssxref("margin")}} に <code>0 auto</code> を指定したりすると、 <code>align</code> 属性と同様の効果を得ることができます。</p>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>表の背景色です。値は<a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進 RGB コード</a>で、その前に「<code>#</code>」が付きます。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの1つを使用することもできます。

 </p><p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。
 </p></dd>
 <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは {{htmlattrxref("frame", "table")}} 属性が void に設定されることを意味します。</p>

 <p>同様の効果を得るには、 {{cssxref("border")}} 一括指定プロパティを使用してください。
 </p></dd>
 <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>この属性は、セルの内容と境界線の間の空間を、表示・非表示を問わず定義します。 cellpadding の長さがピクセル数で定義されたのであれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。長さがパーセント値を用いて定義された場合は、内容は中央に配置され、垂直方向 (上下) の余白の合計値がこの値で表されます。水平方向 (左右) の余白の合計も同じことが言えます。</p>

 <p>同様の効果を得るには、 {{cssxref("border-collapse")}} プロパティを <code>&lt;table&gt;</code> 要素に適用し、値を collapse に設定した上で、 {{cssxref("padding")}} プロパティを {{HTMLElement("td")}} 要素に使用してください。
 </p></dd>
 <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>この属性は、2つのセルの間のスペースの寸法を、パーセント値またはピクセル値で定義します。この属性は水平方向と垂直方向の両方に適用され、表の上端と最初の行におけるセルの間、表の左端と最初の列の間、表の右端と最後の列の間、表の下端と最後の行の間に適用されます。</p>

 <p>同様の効果を得るには、 {{cssxref("border-spacing")}} プロパティを <code>&lt;table&gt;</code> 要素に適用してください。 <code>border-spacing</code> は、 {{cssxref("border-collapse")}} が collapse に設定されていると何の効果もありません。
 </p></dd>
 <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>これは列挙型の属性で、表を囲む枠線のどの方向が表示されなければならないかを定義します。</p>

 <p>同様の効果を得るには、 {{cssxref("border-style")}} および {{cssxref("border-width")}} プロパティを使用してください。
 </p></dd>
 <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>これは列挙型の属性で、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。</p>

 <ul>
  <li><span>none</span> は、罫線を表示しないことを示します。既定値です。</li>
  <li><code>groups</code> は、 {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} の各要素によって定義される行グループと、 {{HTMLElement("col")}} や {{HTMLElement("colgroup")}} 要素によって定義される列グループの間にのみ、罫線を表示します。</li>
  <li><code>rows</code> は、行の間の罫線を表示します。</li>
  <li><code>columns</code> は、列の間の罫線を表示します。</li>
  <li><code>all</code> は、行と列の間の罫線が表示されます。</li>
 </ul>

 <p>同様の効果を得るには、 {{cssxref("border")}} プロパティを {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}} のうち適切な要素に適用してください。</p>
 </dd>
 <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
 <dd>この属性は、表の内容の概要を示す代替テキストを定義します。代わりに {{HTMLElement("caption")}} 要素を使用してください。</dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>この属性は表の幅を定義します。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。
 </p></dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Simple_table" name="Simple_table">シンプルな表</h3>

<pre class="brush: html notranslate">&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;
</pre>

<p>{{EmbedLiveSample('Simple_table', '100%', '100')}}</p>

<h3 id="Further_simple_examples" name="Further_simple_examples">さまざまな表</h3>

<pre class="brush: html notranslate">&lt;p&gt;ヘッダーのあるシンプルな表&lt;/p&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;p&gt;thead、tfoot、tbody のある表&lt;/p&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;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;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;/table&gt;

&lt;p&gt;colgroup のある表&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup span="4"&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;p&gt;colgroup と col のある表&lt;/p&gt;
&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col style="background-color: #0f0"&gt;
    &lt;col 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;p&gt;caption のあるシンプルな表&lt;/p&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>

<div class="hidden">
<pre class="brush: css notranslate">table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}</pre>
</div>

<p>{{EmbedLiveSample('Further_simple_examples', '100%', '700')}}</p>

<h3 id="Table_sorting" name="Table_sorting">表のソート</h3>

<h4 id="Sorting_table_rows" name="Sorting_table_rows">表の行のソート</h4>

<p>HTML の表の行 ({{HTMLElement("tr")}} 要素) をソートするネイティブの方法はありません。しかし、 {{jsxref("Array/slice", "Array.prototype.slice()")}}, {{jsxref("Array/sort", "Array.prototype.sort()")}}, {{domxref("Node/removeChild", "Node.removeChild()")}}, {{domxref("Node/appendChild", "Node.appendChild()")}} を使用して、独自の <code>sort()</code> 関数を実装し、　<code>&lt;tr&gt;</code> 要素の {{domxref("HTMLCollection")}} をソートすることができます。</p>

<p>次の例では、このような例を見ることができます。これを &lt;tbody&gt; 要素に実装し、表のセルを値の昇順にソートし、それに合わせて表示を更新します。</p>

<h5 id="HTML">HTML</h5>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js notranslate">HTMLTableSectionElement.prototype.sort = function(cb){
  Array
    .prototype
    .slice
    .call(this.rows)
    .sort(cb)
    .forEach((e,i,a)=&gt;{
      this.appendChild(this.removeChild(e));
    },this);
}

document.querySelector('table').tBodies[0].sort(function(a, b){
    return a.textContent.localeCompare(b.textContent);
});
</pre>

<h5 id="Result" name="Result">結果</h5>

<p>{{EmbedLiveSample('Sorting_table_rows', '100%', '100')}}</p>

<h4 id="Sorting_rows_with_a_click_on_the_th_element" name="Sorting_rows_with_a_click_on_the_th_element">th 要素をクリックすることによるソート</h4>

<p>次の例では、 <code>document</code> にあるすべての <code>&lt;table&gt;</code> 要素のすべての <code>&lt;th&gt;</code> 要素にイベントハンドラーを追加しています。 <code>&lt;tbody&gt;</code> のすべての行を、行に含まれる <code>td</code> セルに基づいてソートします。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: この方法では、 <code>&lt;td&gt;</code> 要素が子孫要素のない生のテキストで作成されていることを想定しています。</p>
</div>

<h5 id="HTML_2">HTML</h5>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Numbers&lt;/th&gt;
      &lt;th&gt;Letters&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;A&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;B&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;C&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>

<h5 id="JavaScript_2">JavaScript</h5>

<pre class="brush: js notranslate">for (let table of document.querySelectorAll('table')) {
  for (let th of table.tHead.rows[0].cells) {
    th.onclick = function(){
      const tBody = table.tBodies[0];
      const rows = tBody.rows;
      for (let tr of rows) {
        Array.prototype.slice.call(rows)
          .sort(function(tr1, tr2){
            const cellIndex = th.cellIndex;
            return tr1.cells[cellIndex].textContent.localeCompare(tr2.cells[cellIndex].textContent);
          })
          .forEach(function(tr){
            this.appendChild(this.removeChild(tr));
          }, tBody);
      }
    }
  }
}</pre>

<h5 id="Result_2" name="Result_2">結果</h5>

<p>{{EmbedLiveSample('Sorting_rows_with_a_click_on_the_th_element', '100%', '100')}}</p>

<h3 id="Displaying_large_tables_in_small_spaces" name="Displaying_large_tables_in_small_spaces">巨大な表を小さな空間に表示</h3>

<p>ウェブ上の表でよくある問題は、コンテンツの量が多い場合、小さな画面ではネイティブにはあまりうまく動作しないこと、スクロール可能にする方法が明らかではないことです。特にマークアップが CDN からくると、ラッパーを持つように変更することができません。</p>

<p>この例では、小さな空間に表を表示する方法の一つを紹介しています。 HTML の内容は非常に大きいので非表示にしていますが、特に目立ったものはありません。この例では CSS の方が検査に便利です。</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;1&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;2&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;3&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;4&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;5&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;6&lt;sup&gt;3&lt;/sup&gt; equals:
      &lt;th&gt;7&lt;sup&gt;3&lt;/sup&gt; equals:
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;row 1: 1
      &lt;td&gt;row 1: 8
      &lt;td&gt;row 1: 27
      &lt;td&gt;row 1: 64
      &lt;td&gt;row 1: 125
      &lt;td&gt;row 1: 216
      &lt;td&gt;row 1: 343
    &lt;tr&gt;
      &lt;td&gt;row 2: 1
      &lt;td&gt;row 2: 8
      &lt;td&gt;row 2: 27
      &lt;td&gt;row 2: 64
      &lt;td&gt;row 2: 125
      &lt;td&gt;row 2: 216
      &lt;td&gt;row 2: 343
    &lt;tr&gt;
      &lt;td&gt;row 3: 1
      &lt;td&gt;row 3: 8
      &lt;td&gt;row 3: 27
      &lt;td&gt;row 3: 64
      &lt;td&gt;row 3: 125
      &lt;td&gt;row 3: 216
      &lt;td&gt;row 3: 343
    &lt;tr&gt;
      &lt;td&gt;row 4: 1
      &lt;td&gt;row 4: 8
      &lt;td&gt;row 4: 27
      &lt;td&gt;row 4: 64
      &lt;td&gt;row 4: 125
      &lt;td&gt;row 4: 216
      &lt;td&gt;row 4: 343
    &lt;tr&gt;
      &lt;td&gt;row 5: 1
      &lt;td&gt;row 5: 8
      &lt;td&gt;row 5: 27
      &lt;td&gt;row 5: 64
      &lt;td&gt;row 5: 125
      &lt;td&gt;row 5: 216
      &lt;td&gt;row 5: 343
    &lt;tr&gt;
      &lt;td&gt;row 6: 1
      &lt;td&gt;row 6: 8
      &lt;td&gt;row 6: 27
      &lt;td&gt;row 6: 64
      &lt;td&gt;row 6: 125
      &lt;td&gt;row 6: 216
      &lt;td&gt;row 6: 343
    &lt;tr&gt;
      &lt;td&gt;row 7: 1
      &lt;td&gt;row 7: 8
      &lt;td&gt;row 7: 27
      &lt;td&gt;row 7: 64
      &lt;td&gt;row 7: 125
      &lt;td&gt;row 7: 216
      &lt;td&gt;row 7: 343
    &lt;tr&gt;
      &lt;td&gt;row 8: 1
      &lt;td&gt;row 8: 8
      &lt;td&gt;row 8: 27
      &lt;td&gt;row 8: 64
      &lt;td&gt;row 8: 125
      &lt;td&gt;row 8: 216
      &lt;td&gt;row 8: 343
    &lt;tr&gt;
      &lt;td&gt;row 9: 1
      &lt;td&gt;row 9: 8
      &lt;td&gt;row 9: 27
      &lt;td&gt;row 9: 64
      &lt;td&gt;row 9: 125
      &lt;td&gt;row 9: 216
      &lt;td&gt;row 9: 343
    &lt;tr&gt;
      &lt;td&gt;row 10: 1
      &lt;td&gt;row 10: 8
      &lt;td&gt;row 10: 27
      &lt;td&gt;row 10: 64
      &lt;td&gt;row 10: 125
      &lt;td&gt;row 10: 216
      &lt;td&gt;row 10: 343
    &lt;tr&gt;
      &lt;td&gt;row 11: 1
      &lt;td&gt;row 11: 8
      &lt;td&gt;row 11: 27
      &lt;td&gt;row 11: 64
      &lt;td&gt;row 11: 125
      &lt;td&gt;row 11: 216
      &lt;td&gt;row 11: 343
    &lt;tr&gt;
      &lt;td&gt;row 12: 1
      &lt;td&gt;row 12: 8
      &lt;td&gt;row 12: 27
      &lt;td&gt;row 12: 64
      &lt;td&gt;row 12: 125
      &lt;td&gt;row 12: 216
      &lt;td&gt;row 12: 343
    &lt;tr&gt;
      &lt;td&gt;row 13: 1
      &lt;td&gt;row 13: 8
      &lt;td&gt;row 13: 27
      &lt;td&gt;row 13: 64
      &lt;td&gt;row 13: 125
      &lt;td&gt;row 13: 216
      &lt;td&gt;row 13: 343
    &lt;tr&gt;
      &lt;td&gt;row 14: 1
      &lt;td&gt;row 14: 8
      &lt;td&gt;row 14: 27
      &lt;td&gt;row 14: 64
      &lt;td&gt;row 14: 125
      &lt;td&gt;row 14: 216
      &lt;td&gt;row 14: 343
    &lt;tr&gt;
      &lt;td&gt;row 15: 1
      &lt;td&gt;row 15: 8
      &lt;td&gt;row 15: 27
      &lt;td&gt;row 15: 64
      &lt;td&gt;row 15: 125
      &lt;td&gt;row 15: 216
      &lt;td&gt;row 15: 343
    &lt;tr&gt;
      &lt;td&gt;row 16: 1
      &lt;td&gt;row 16: 8
      &lt;td&gt;row 16: 27
      &lt;td&gt;row 16: 64
      &lt;td&gt;row 16: 125
      &lt;td&gt;row 16: 216
      &lt;td&gt;row 16: 343
    &lt;tr&gt;
      &lt;td&gt;row 17: 1
      &lt;td&gt;row 17: 8
      &lt;td&gt;row 17: 27
      &lt;td&gt;row 17: 64
      &lt;td&gt;row 17: 125
      &lt;td&gt;row 17: 216
      &lt;td&gt;row 17: 343
    &lt;tr&gt;
      &lt;td&gt;row 18: 1
      &lt;td&gt;row 18: 8
      &lt;td&gt;row 18: 27
      &lt;td&gt;row 18: 64
      &lt;td&gt;row 18: 125
      &lt;td&gt;row 18: 216
      &lt;td&gt;row 18: 343
    &lt;tr&gt;
      &lt;td&gt;row 19: 1
      &lt;td&gt;row 19: 8
      &lt;td&gt;row 19: 27
      &lt;td&gt;row 19: 64
      &lt;td&gt;row 19: 125
      &lt;td&gt;row 19: 216
      &lt;td&gt;row 19: 343
    &lt;tr&gt;
      &lt;td&gt;row 20: 1
      &lt;td&gt;row 20: 8
      &lt;td&gt;row 20: 27
      &lt;td&gt;row 20: 64
      &lt;td&gt;row 20: 125
      &lt;td&gt;row 20: 216
      &lt;td&gt;row 20: 343
&lt;/table&gt;
</pre>
</div>

<p>これらのスタイルを見ると、表の {{cssxref("display")}} プロパティが <code>block</code> に設定されていることに気づくでしょう。これによりスクロールが可能になりますが、テーブルはその完全性の一部を失い、テーブルのセルが可能な限り小さくなろうとします。この問題を軽減するために、<code>&lt;tbody&gt;</code> の {{cssxref("white-space")}} を <code>nowrap</code>に設定しました。しかし、 <code>&lt;thead&gt;</code> ではこれを行わないようにしています。これは、長いタイトルで列がデータを表示するために必要以上に広くなるのを避けるためです。</p>

<p>下にスクロールしている間、表のヘッダーをページ上に保持するために、 {{cssxref("position")}} を <code>&lt;th&gt;</code> 要素の上で粘着するように設定しました。 {{cssxref("border-collapse")}}} を <code>collapse</code> に設定して <strong>いない</strong>ことに注意してください。</p>

<pre class="brush: css notranslate">table,
th,
td {
    border: 1px solid;
}

table {
    width: 100%;
    max-width: 400px;
    height: 240px;
    margin: 0 auto;
    display: block;
    overflow-x: auto;
    border-spacing: 0;
}

tbody {
    white-space: nowrap;
}

th,
td {
    padding: 5px 10px;
    border-top-width: 0;
    border-left-width: 0;
}

th {
    position: sticky;
    top: 0;
    background: #fff;
    vertical-align: bottom;
}

th:last-child,
td:last-child {
    border-right-width: 0;
}

tr:last-child td {
    border-bottom-width: 0;
}
</pre>

<h4 id="Result_3" name="Result_3">結果</h4>

<p>{{EmbedLiveSample('Displaying_large_tables_in_small_spaces', '100%', 240)}}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<h3 id="Captions" name="Captions">キャプション</h3>

<p> {{HTMLElement("caption")}} 要素は明確かつ簡潔に表の目的を示すことに価値があるため、これを提供することで、表の残りの部分を読む必要があるか、飛ばすかを判断するのに役立ちます。</p>

<p>これは読み上げソフトのような支援技術を利用して操作している人、弱視の人、認知問題を抱えた人にとって役立ちます。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_&lt;caption>">MDN &lt;caption&gt; を用いて表にタイトルをつける</a> </li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption &amp; Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li>
</ul>

<h3 id="Scoping_rows_and_columns" name="Scoping_rows_and_columns">行と列のスコープ付け</h3>

<p>ヘッダー要素の {{htmlattrxref("scope", "th")}} 属性は、単純な内容の場合はスコープが推測できるので冗長になります。しかし、支援技術によっては正しく推測することに失敗する事があるため、ヘッダーにスコープを設定すると使い勝手が向上することがあります。複雑な表では、スコープを指定するとセルとヘッダーの関係に関する必要な情報を提供することができます。</p>

<h4 id="Example" name="Example">例</h4>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;caption&gt;Color names and values&lt;/caption&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;Name&lt;/th&gt;
      &lt;th scope="col"&gt;HEX&lt;/th&gt;
      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Teal&lt;/th&gt;
      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="row"&gt;Goldenrod&lt;/th&gt;
      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>

<p> {{HTMLElement("th")}} 要素に <code>scope="col"</code> を宣言すると、セルが列の一番上にあることを記述するのに役立ちます。 {{HTMLElement("th")}} 要素に <code>scope="row"</code> を宣言すると、セルが行の最初の列であることを記述するのに役立ちます。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN 視覚障碍者向けの表</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li>
</ul>

<h3 id="Complicated_tables" name="Complicated_tables">複雑な表</h3>

<p>読み上げソフトのような支援技術は、ヘッダーのセルを厳密に水平又は垂直方向に関連付けすることができない表を解析するのが困難な場合があります。これはつまり、 {{htmlattrxref("colspan", "td")}} に {{htmlattrxref("rowspan", "td")}} 属性がある場合のことです。</p>

<p>できれば、テーブルの内容を表現するための別な方法、例えばより小さい表の集合に分解するなどで、 <code>colspan</code> 及び <code>rowspan</code> 属性に依存する必要がないようにすることを考慮してください。これは支援技術を使用している人が表の内容を理解しやすくするのに加えて、表のレイアウトの関連を理解することが難しい認識障碍を持った人にも利益になります。</p>

<p>表を分割することができないのであれば、 {{htmlattrxref("id")}} 及び {{htmlattrxref("headers", "td")}} 属性の組み合わせを用いて、表のセルとそのセルに関連したヘッダーをプログラム的に結び付けてください。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN 視覚障碍者向けの表</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table 要素')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table 要素')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.table")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><code>&lt;table&gt;</code> 要素をスタイルするのに特に役に立つであろう 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>