<TABLE>テーブル(表)を表示

HTMLでの基本的な表(テーブル)は<TABLE>、<TR><TD>のそれぞれのタグを使い作成します。 テーブル(表)の基本構造は、その全体を<TABLE>~</TABLE>で囲って示し、表内(テーブル内)のセルは、<TH>または<TD>タグを使い表します。

<TH>とは「Table Header」の略称で、表内(テーブル内)で見出しとなるヘッダセルを示したい部分に使用します。 また<TD>とは「Table Data」の略称で、見出しではなくデータが入っているセルに使います。

各セルは直接<TABLE>~</TABLE>内に入れるのではなく、必ず横1列分ずつ<TR>~</TR>で囲ってまとめましょう。

なお一般的なブラウザでは、<TH>(ヘッダセル)内のテキストは太字でセンタリングされた状態で表示されます。

また表(テーブル)の枠を表示したくない場合は、TABLE要素のborder属性を指定しなければ、一般的には表示されることはありません。 逆に表全体の枠線を表示したい場合は「border="枠線の太さ(ピクセル数)"」とすれば、枠線の太さなどを指定することができます。 border属性は非推奨ではありませんが、見栄えに関する指定はスタイルシートを用いるという方針ならば、CSSを利用した方がいいでしょう。

なお稀なケースではありますが、以前はweb制作のテクニックとして表(テーブル)の配列機能を利用したページレイアウトが使われてました。 ですがHTML4.01ではレイアウト目的で<TABLE>を使うのはあまり好ましくない方法とされてます。 また本来の使い方ではないので、レイアウトにはスタイルシートを使用するようにしましょう。

使用した時の例

テーブルの全体構造(図)
<table>
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>フジリンゴ</td>
     <td>青森県南津軽郡藤崎町産のフジりんご</td>
     <td>甘みと酸味のバランスが抜群!さっぱりとした食感</td>
  </tr>
  <tr>
     <td>スリムレッド</td>
     <td>群馬県農業総合試験場北部分場産のリンゴ</td>
     <td>香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない</td>
  </tr>
</table>

<table border="2">
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>フジリンゴ</td>
     <td>青森県南津軽郡藤崎町産のフジりんご</td>
     <td>甘みと酸味のバランスが抜群!さっぱりとした食感</td>
  </tr>
  <tr>
     <td>スリムレッド</td>
     <td>群馬県農業総合試験場北部分場産のリンゴ</td>
     <td>香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない</td>
  </tr>
</table>

ブラウザ上の表示例

名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない
名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない

属性

border(枠線)
border="数値" 枠線(border)の表示・太さの設定。指定なし、数値0の場合は枠線は表示しない(初期値)

※HTML5の場合「1」のみ指定可能

bordercolor="" 枠線の色
bordercolordark="" 立体的な枠線の暗い部分の色
bordercolorlight="" 立体的な枠線の明るい部分の色
rules="all" テーブル内側の枠線の表示設定
  • all・・・・すべての境界
  • none・・・・なし(初期値)
  • groups・・・・グループの境界(<thead>、<tbody>、<tfoot>)
  • cols・・・・縦の列の境界
  • rows・・・・横の列の境界
frame="void" セルの枠線の表示設定
  • void・・・・非表示(初期値)
  • box・・・・上下左右
  • border・・・・上下左右
  • above・・・・上のみ
  • below・・・・下のみ
  • hsides・・・・上下のみ
  • vsides・・・・左右のみ
  • lhs・・・・左側のみ
  • rhs・・・・右側のみ
background(背景)
bgcolor="" 背景色の設定
background="url" 背景の画像設定
各種配置
align="center" テーブルの表示位置の設定
  • center・・・・中央
  • left・・・・左端(初期値)
  • right・・・・右端
width="" テーブルの横幅の設定
height="" テーブルの縦の高さの設定
hspace="" テーブルの横方向の余白の設定
vspace="" テーブルの縦方向の余白の設定
cellpadding="" セルと枠線の間の隙間の設定。px単位で設定
cellspacing="" 内側の枠の太さの設定。数値0で立体感のない通常の線となる

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

形式 <table>~</table> カテゴリ フローコンテンツ / パルパブルコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 caption / colgroup / thead / tbody / tfoot
開始タグ 必須 終了タグ 必須
属性 cols / datapagesize / datasrc / summary
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

音声ブラウザでの読み上げについて

状況によってはレイアウトをする目的でtable要素が使われることがあります。

これは状況によっては仕方がないことですが、table要素はあくまで表をマークアップするためのものです。 そのため、セルの区切り方によっては音声ブラウザなどの環境で内容が正しく伝わらない可能性があります。

ほとんどの音声ブラウザは、表(テーブル)のソースコード順に内容を上のセルから順番に読んでいきます。(左から右へと横1列ずつ読んでいく)
ですのでセルの内容が右隣のセルではなく、その下のセルへ続いてる場合は正しい順序で内容が読まれなくなってしまいます。 テーブルでレイアウトする際は、音声ブラウザでも正しく内容が伝わるように、この点だけには注意して下さい。

HTML5での状況と関連情報

HTML5ではborder、width、cellspacing、cellpadding、rules、frameの各属性が廃止されている。