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
注意:
  • 非推奨になったため、この属性を使用しないでください<table> 要素は CSS を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには 、例えば中央に表示するには margin-left および margin-rightauto を指定 (または margin0 auto を指定) します。
  • Firefox 4 より前には、 Firefox は、後方互換モードに限り、 middleabsmiddle、また 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 属性と同様の効果を与えるためには、 borderborder-colorborder-widthborder-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-styleborder-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 プロパティを使用してください。

シンプルな表

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

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

キャプション

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

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

行と列のスコープ

scope 属性は HTML5 で廃止されましたが、多くの読み上げソフトが読み上げソフトを使用していない人がセルの位置を推測することができる視覚的な関連付けをプログラム的に複製するために、この属性を頼りにしています。

<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" を宣言することは、セルが列の一番上にあることを記述するのに役立ちます。 <td> 要素に scope="row" を宣言することは、セルが行の最初の列であることを記述するのに役立ちます。

複雑な表

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

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

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

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1 あり あり あり
align1 あり1 あり あり あり
bgcolor1 あり1 あり あり あり
border1 あり1 あり あり あり
cellpadding1 あり1 あり あり あり
cellspacing1 あり1 あり あり あり
frame1 あり1 あり あり あり
rules1 あり1 あり あり あり
summary1 あり1 あり あり あり
width1 あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応118 あり4 あり あり あり
align118 あり4 あり あり あり
bgcolor118 あり4 あり あり あり
border118 あり4 あり あり あり
cellpadding118 あり4 あり あり あり
cellspacing118 あり4 あり あり あり
frame118 あり4 あり あり あり
rules118 あり4 あり あり あり
summary118 あり4 あり あり あり
width118 あり4 あり あり あり

関連情報

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

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