<table>: 表要素

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

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

属性

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

非推奨の属性

align

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

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

margin-left および margin-rightauto を指定したり、 margin0 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>309000000人</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>スウェーデン</td>
    <td>ストックホルム</td>
    <td>9000000人</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>

アクセシビリティの考慮事項

キャプション

<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" を宣言すると、セルが行の最初の列であることを記述するのに役立ちます。

複雑な表

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

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

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

仕様書

仕様書 状態 備考
HTML Living Standard
table 要素 の定義
現行の標準
HTML5
table 要素 の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
tableChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
align
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
bgcolor
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
border
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
cellpadding
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
cellspacing
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
frame
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
rules
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
summary
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
width
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報