table要素とは

<table>要素は、表（テーブル）を表す要素です。カレンダーや、時間割表などに使います。

意味・役割
表（テーブル）を表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
フロー・コンテンツ
（HTML5より前：ブロックレベル要素）
コンテンツ・モデル（梱包できる要素）
以下の順番で配置
  1. 任意で1つの<caption>要素
  2. 0個以上の<colgroup>要素
  3. 任意で1つの<thead>要素
  4. 任意で1つの<thead>要素
  5. それに続く１つの<tbody>要素または、1つ以上の<tr>要素
  6. それに続く、任意で1つの<tfoot>要素

（* HTML5.1から：<tfoot>要素を<tbody>要素の前に配置することはできません。）

（HTML5より前：<caption>、 <col>、 <colgroup>、 <thead>、 <tfoot>、 <tbody>、 <tr>）

この要素を配置できる親要素
フロー・コンテンツが配置できる要素

table要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

border属性

border（ボーダー）属性は、属性値に 空の文字列 か "1" を指定する事で、表（テーブル）に罫線を表示し、この表がレイアウト目的ではないことを表す属性です。HTML5では当初廃止予定でしたが、罫線が表示されない場合だと各セルの区別が難しくなることと、罫線を表示している表は、レイアウト目的ではない事を表す判断材料になるため残されました。

<table border="空 または、 1">
属性値
  • 空の文字列 または "1"： 罫線を表示し、レイアウト目的の表ではないことを表す
  • "0"： 罫線を表示しない （推奨されてません）
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<table border="1">

frame属性 HTML5で廃止

frame（フレーム）属性は、表の外枠の罫線のどこを表示させるかを指定する属性です。border属性が、空の文字列 か "1" が指定されていれば、自動的にframe属性の属性値は、"border"として解釈します。 なお、この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、CSSの:border-style プロパティ、border-width プロパティで行うようにしましょう。

<table frame="表の外枠の罫線を表示する箇所" >
属性値
  • "void"： 罫線を表示しない （初期値）
  • "above"： 上の罫線を表示
  • "below"： 下の罫線を表示
  • "lhs"： 左の罫線を表示
  • "rhs"： 右の罫線を表示
  • "hsides"： 上下の罫線を表示
  • "vsides"： 左右の罫線を表示
  • "box"： 上下左右の罫線を表示
  • "border"： 上下左右の罫線を表示
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table frame="below">

rules属性 HTML5で廃止

rules（ルール）属性は、表の内側の罫線のどこを表示させるかを指定する属性です。border属性が、空の文字列 か "1" が指定されていれば、自動的にrules属性の属性値は、"all"として解釈します。 なお、この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、 <thead>、 <tfoot>、 <tbody>、<colgroup>、 <col>に、 CSSの:border-style プロパティ、border-width プロパティで行うようにしましょう。

<table rules="表の内側の罫線を表示する箇所" >
属性値
  • "none"： 罫線を表示しない （初期値）
  • "groups"： 列、または行のグループの罫線を表示
  • "rows"： 行の罫線を表示
  • "cols"： 列の罫線を表示
  • "all"： 全ての罫線を表示
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table rules="rows">

cellspacing属性 HTML5で廃止

cellspacing（セルスペーシング）属性は、表のセルとセルの間隔を指定する属性です。この属性は、border属性と同時に使用することが一般的です。なお、この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、 CSSの:border-spacing プロパティで行うようにしましょう。

<table cellspacing="セルとセルの間隔" border="空 または、1">
属性値
  • 整数： 画像の横幅（px） （初期値："2"）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table cellspacing="10" border="1">

cellpadding属性 HTML5で廃止

cellpadding（セルパディング）属性は、セル内の余白を指定する属性です。この属性は、border属性と同時に使用することが一般的です。なお、この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、 <th>か、<td>に CSSの:padding プロパティで行うようにしましょう。

<table cellpadding="セル内の余白" border="空 または、1">
属性値
  • 整数： 画像の横幅（px）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table cellpadding="10" border="1">

width属性 HTML5で廃止

width（ウィズ）属性は、表の幅を指定する属性です。この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、CSSの:width プロパティで行うようにしましょう。

<table width="表の幅" >
属性値
  • 整数： 画像の横幅（px）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table width="400">

summary属性 HTML5で廃止

summary（サマリー）属性は、表の説明を指定する属性です。この属性は、音声ソフトや点字ディスプレイなどで閲覧している、視覚的にWEBサイトの情報を取得することが困難なユーザーに対して、表の情報を説明する目的で使用します。しかし、HTML5からは、summary属性が廃止になり、代わりに<caption>要素などを使って表の説明を行います。

<table summary="表の説明" >
属性値
表を説明する文字列
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0, XHTML1.1
使用例
<table summary="2016年11月のカレンダー">

align属性 XHTML1.1で廃止

align（アライン）属性は、表とそれに続く文章の揃え方を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:float プロパティまたは、margin プロパティで行うようにしましょう。

<table align="揃え方">
属性値
  • "left"： 表（テーブル）を左に配置し、テキストを右に回り込ませる
  • "center"： 表（テーブル）を中央に揃える
  • "right"： 表（テーブル）を右に配置し、テキストを左に回り込ませる
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<table align="center">

bgcolor属性 XHTML1.1で廃止

bgcolor（ビージーカラー）属性は、background（バックグラウンド） color（カラー）の略で、表の背景色を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:background-color プロパティで行うようにしましょう。

<table bgcolor="背景色">
属性値
  • "16進数RGB値"
  • "カラーネーム"
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<table bgcolor="#330000">

table要素のサンプル

基本的なtable要素の例

基本的なtable要素の例
<table>
  <tr>
    <th>名前</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>ボブ</td>
    <td>男</td>
  </tr>
  <tr>
    <td>ムカミ</td>
    <td>男</td>
  </tr>
  <tr>
    <td>メアリー</td>
    <td>女</td>
  </tr>
</table>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

border属性を指定した例

border属性を指定した例
<table border="1">
  <tr>
    <th>商品コード</th>
    <th>商品名</th>
    <th>単価</th>
  </tr>
  <tr>
    <td>D001</td>
    <td>製品A</td>
    <td>5,000</td>
  </tr>
  <tr>
    <td>D002</td>
    <td>製品B</td>
    <td>8,000</td>
  </tr>
  <tr>
    <td>D003</td>
    <td>製品C</td>
    <td>10,000</td>
  </tr>
</table>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

caption要素、thead要素、tbody要素を使った例

caption要素、thead要素、tbody要素を使った例
<table border="1">
  <caption>2017年1月のカレンダー</caption>
  <thead>
    <tr>
      <th>日</th>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

table要素の注意点

<table>は、レイアウトの目的で使用しないでください。CSSがまだ使われていない頃は、この<table>を使って、WEBサイトのレイアウトを行う目的で使用していました。ただし、<table>はあくまで表（テーブル）を表す要素ですので、デザイン的な目的で使用する場合は、CSSを使うようにしましょう。

仕様

HTML5.1
4.9.1. The table element
HTML5
4.9.1 The table element
HTML4.01
11.2.1 The TABLE element

関連する要素

関連するレッスン