<table>テーブル(表)の作成

<table>タグは、テーブル(表の形をした1次元以上のデータ)を作成する際に使用します。 テーブルとは、縦・横・格子状に並べられたセルの集合体を表す要素で、<thead>、<tr>、<td>などの複数の要素から構成されています。 その始まりと終わりを示すのがtable要素です。

使い方は、<table>~</table>内に<tr>~</tr>を配置し、横の行を示します。 さらにその中にth要素やtd要素を配置する事でセルを定義します。 ただしこれは必要最低限の要素でテーブルを作る場合です。

テーブル構造をより明確にするには、<thead>、<tbody>、<tfoot>や<colgroup>などを合わせて使うべきでしょう。 そしてこれらの要素を使う事で、同時にCSSでの装飾を手助けしてくれます。

またtable要素はレイアウト目的で使用してはいけません。 これは検索エンジンが正しい情報を読み上げられなかったり、読み上げブラウザにおいて正しい順序で読み上げる事ができない場合などがあるからです。 なのでレイアウト目的の場合は、スタイルシートのポジショニング関連の機能を使うようにします。

またtable要素をレイアウト目的で使っていない事を明確に示すには、border属性を指定します。 ただしその値は空文字列か「1」である必要があります。 例えばborder="1"と指定した場合、一般的なブラウザではテーブル(表)のセルに罫線が引かれて表示されます。

HTML5での変更点

HTML5のtable要素では、border属性の定義が変わり、レイアウト目的でないことを示すようになりました。 またHTML4.01では罫線の太さを表しましたが、HTML5では罫線の太さは表さず、罫線を引くかどうかだけを表します。

他の属性は、frame属性、rules属性、align属性、bgcolor属性、summary属性、width属性、cellspacing属性、cellpadding属性が廃止され、table要素の直下にcol要素が配置できなくなりました。

なおHTML5ではtbody要素の後にtfoot要素を配置できるようになりましたが、HTML5.1ではtbody要素の前にtfoot要素は配置できなくなったので注意して下さい。

書式

  • <table 属性="値">~</table> ……… テーブル(表)を作成する

属性

border="" 罫線を引くかどうかを指定。値は1、もしくは空文字列

使用した時の例

テーブルの全体構造(図)
<table border="1">
  <tr>
     <th>見出し1</th>
     <th>見出し2</th>
     <th>見出し3</th>
  </tr>
  <tr>
     <td>内容1-1</td>
     <td>内容2-1</td>
     <td>内容3-1</td>
  </tr>
  <tr>
     <td>内容1-2</td>
     <td>内容2-2</td>
     <td>内容3-2</td>
  </tr>
</table>

ブラウザ上の表示例

見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2
<table border="1">
  <tr>
     <th>見出し1</th>
       <td>内容1-1</td>
       <td>内容1-2</td>
  </tr>
  <tr>
     <th>見出し2</th>
       <td>内容2-1</td>
       <td>内容2-2</td>
  </tr>
  <tr>
     <th>見出し3</th>
       <td>内容3-1</td>
       <td>内容3-2</td>
  </tr>
</table>

ブラウザ上の表示例

見出し1 内容1-1 内容1-2
見出し2 内容2-1 内容2-2
見出し3 内容3-1 内容3-2

対応ブラウザなどのデータ

形式 <table>~</table> カテゴリ フローコンテンツ, パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 caption,colgroup,thead,tbody,tfoot
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~