table要素

HTMLでは、表を挿入することができます。

本ページでは、table要素について説明します。

table要素とは

table要素は、HTMLに以下のような表を挿入します。

3列×3行の表が表示されています。その上にはタイトルが表示されています。

tableは、以下の要素と組み合わせて使われます。

【tableで使う要素】
要素 説明 必要性
caption 表のタイトル オプション
colgroup 列のグループ オプション
thead 表のヘッダー オプション
tbody 表の本体部分 オプション
tr 表の行 必須
th ヘッダーを示すセル 通常は存在
td データを示すセル 通常は存在
tfoot 表のフッター オプション

trで行を作成し、その中でthやtdを使います。captionは、オプションです。theadやtbody、tfootがあると、CSSなどでスタイルを指定する時に使えます。

tableの定義は、以下のとおりです。

【tableの定義】
コンテンツカテゴリ フローコンテンツ認知可能コンテンツ
可能な親要素 フローコンテンツを包含できる要素
可能なコンテンツ 次の順序で記述:
  1. オプションでcaption
  2. 0個以上のcolgroup
  3. オプションでthead
  4. 0個以上のtbodyまたは1つ以上のtr
  5. オプションでtfoot
オプションでスクリプトサポート要素
タグの省略 不可
DOMインターフェース HTMLTableElement

利用例

以下は、tableを使ったHTMLの例です。

【tableの利用例】
<table>
  <caption>表のタイトル</caption>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
    <tr>
      <td>データ1-1</td>
      <td>データ1-2</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
    </tr>
</table>

上記により、表が表示されますが、スタイル付けしないとデフォルトではほとんど表に見えません。表のスタイルなどを変える方法は、「HTMLに表を挿入して装飾する」をご参照ください。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
table
【スマートフォン】
項目 Sa An Op Ch Fx Sm
table
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る