<table>: 表要素

HTML の <table> 要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

試してみましょう

コンテンツカテゴリ フローコンテンツ
許可されている内容
以下の順となる。
  1. 任意の 1 個の <caption> 要素
  2. 0 個以上の <colgroup> 要素
  3. 任意の 1 個の <thead> 要素
  4. 次の 2 つの選択肢から 1 つ:
    • 0 個以上の <tbody> 要素
    • 1 個以上の <tr> 要素
  5. 任意の 1 個の <tfoot> 要素
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素。
暗黙の ARIA ロール table
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableElement

属性

この要素にはグローバル属性があります。

非推奨の属性

align

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

  • left: 表が文書の左端に表示される
  • center: 表が文書の中央に表示される
  • right: 表が文書の右端に表示される

margin-left および margin-right に auto を指定したり、 margin に 0 auto を指定したりすると、 align 属性と同様の効果を得ることができます。

bgcolor

表の背景色です。値は6 桁の 16 進 RGB コードで、その前に「#」が付きます。定義済みの色キーワードのうちの 1 つを使用することもできます。

同様の効果を得るには、 CSS の background-color プロパティを使用してください。

border

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

同様の効果を得るには、 border 一括指定プロパティを使用してください。

cellpadding

この属性は、セルの内容と境界線の間の空間を、表示・非表示を問わず定義します。 cellpadding の長さがピクセル数で定義されたのであれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。長さがパーセント値を用いて定義された場合は、内容は中央に配置され、垂直方向 (上下) の余白の合計値がこの値で表されます。水平方向 (左右) の余白の合計も同じことが言えます。

同様の効果を得るには、 border-collapse プロパティを <table> 要素に適用し、値を collapse に設定した上で、 padding プロパティを <td> 要素に使用してください。

cellspacing

この属性は、2 つのセルの間の空間の寸法を、パーセント値またはピクセル値で定義します。この属性は水平方向と垂直方向の両方に適用され、表の上端と最初の行におけるセルの間、表の左端と最初の列の間、表の右端と最後の列の間、表の下端と最後の行の間に適用されます。

同様の効果を得るには、 border-spacing プロパティを <table> 要素に適用してください。 border-spacing は、 border-collapse が collapse に設定されていると何の効果もありません。

frame

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

同様の効果を得るには、 border-style および border-width プロパティを使用してください。

rules

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

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

同様の効果を得るには、 border プロパティを <thead>, <tbody>, <tfoot>, <col>, <colgroup> のうち適切な要素に適用してください。

summary

この属性は、表の内容の概要を示す代替テキストを定義します。代わりに <caption> 要素を使用してください。

width

この属性は表の幅を定義します。代わりに CSS の width プロパティを使用してください。

例

シンプルな表

<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>
  <tbody>
    <tr>
      <td>本体 1</td>
      <td>本体 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター 1</td>
      <td>フッター 2</td>
    </tr>
  </tfoot>
</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>

表のソート

表の行のソート

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

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

HTML
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
JavaScript
HTMLTableSectionElement.prototype.sort = function(cb){
  Array
    .prototype
    .slice
    .call(this.rows)
    .sort(cb)
    .forEach((e,i,a)=>{
      this.appendChild(this.removeChild(e));
    },this);
}

document.querySelector('table').tBodies[0].sort(function(a, b){
    return a.textContent.localeCompare(b.textContent);
});
結果

th 要素をクリックすることによるソート

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

メモ: この方法では、 <td> 要素が子孫要素のない生のテキストで作成されていることを想定しています。

HTML
<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
JavaScript
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);
      }
    }
  }
}
結果

巨大な表を小さな空間に表示

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

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

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

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

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;
}

結果

アクセシビリティの考慮

キャプション

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

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

行と列のスコープ付け

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

例

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

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

複雑な表

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

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

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

仕様書

Specification
HTML Standard
# the-table-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報