<table>要素(表(テーブル))。

表(テーブル)である<table>要素についての説明です。

<table>要素(表(テーブル))・目次。

<table>要素とは。

<table>要素とは、表(テーブル)、すなわちデータを縦横二次元に並べたブロックを指します。

<table>要素を利用出来るHTML文書型。

<table>要素は、以下の文書型で利用出来ます。

<table>要素の実装上の注意。

<table>要素については、以下の点にご留意下さい。

対応出来ない場合、表関連のタグを全て無視して前から順に出力する事になるでしょう。

<table>要素が含まれるXHTML モジュール。

<table>要素が含まれるXHTML モジュールは文書型により異なります。

XHTML 1.1

XHTML 1.1では<table>要素はテーブル(表)モジュールに属します。

XHTML 1.0 ベーシック及びXHTML モバイル・プロファイル

XHTML 1.0 ベーシック及びXHTML モバイル・プロファイルでは<table>要素はベーシックテーブル(基本表)モジュールに属します。

<table>要素の扱い。

<table>要素はブロックレヴェル要素です。

<table>要素の内容。

<table>要素の内容は文書型に依って異なりますが、表を構成する部品となります。

HTML 3.2, XHTML 1.0 ベーシック及びXHTML モバイル・プロファイルの場合。

  1. 一個以内の<caption>要素
  2. 一個以上の<tr>要素

から成ります。

HTML 4.01の場合。

  1. 一個以内の<caption>要素
  2. 零個以上の<col>要素または<colgroup>要素
  3. 一個以内の<thead>要素
  4. 一個以内の<tfoot>要素
  5. 一個以上の<tbody>要素(または<tr>要素)

から成ります。

HTML 4.01では最後には

と規定されておりますが、<tbody>要素の開始タグ・終了タグとも省略が可能であり、従って、実質的には上記の通り<tbody>要素または<tr>要素を一個以上となります。

ISO-HTMLの場合。

  1. 一個以内の<caption>要素
  2. 零個以上の<col>要素または<colgroup>要素
  3. 一個以内の<thead>要素
  4. 一個以内の<tfoot>要素
  5. 一個以上の<tbody>要素

から成ります。

XHTML 1.0及びXHTML 1.1の場合。

  1. 一個以内の<caption>要素
  2. 零個以上の<col>要素または<colgroup>要素
  3. 一個以内の<thead>要素
  4. 一個以内の<tfoot>要素
  5. 一個以上の<tbody>要素または<tr>要素

から成ります。

<table>要素の属性。

<table>要素には、以下の属性が定められております。

summary属性(ISO-HTMLでは必須)

表の構造に関する説明が入ります。

共通属性

<table>要素で使える共通属性には

があります。

以下の属性はISO-HTMLでは利用出来ません。

width属性
表の横幅をピクセル数かパーセンテージで指定します。
border属性

表の枠線の太さをピクセル単位で指定します。

cellspacing属性
表の各コマ間の余白の幅をピクセル数で指定します。
cellpadding
表の各コマ内の余白の幅をピクセル数で指定します。

以下に挙げる<table>要素の属性はHTML 3.2及びISO-HTMLでは利用出来ません。

frame属性

表の外枠の表示を指定します。

値は以下の通りです。

void
外枠を引きません(デフォルト)。
above
上の枠線のみ引きます。
below
下の枠線のみ引きます。
hsides
上下の枠線のみ引きます。
vsides
左右の枠線のみ引きます。
lhs
左の枠線のみ引きます
rhs
右の枠線のみ引きます。
box
上下左右とも枠線を引きます。
border
上下左右とも枠線を引きます。
rules属性

表内の罫線の表示を指定します。

値は以下の通りです

none
罫線を引きません(デフォルト)
groups
罫線は<thead>要素, <tfoot>要素及び<tbody>要素の間、及び<col>要素及び<colgroup>要素で指定された列グループの間にのみ引かれます。
rows
行間のみ、すなわち横の罫線のみ引きます。
cols
列間のみ、すなわち縦の罫線のみ引きます。
all
縦横全ての罫線が引かれます。

以下に挙げる<table>要素の属性はHTML 3.2, トランジッショナル文書型及びフレームセット文書型でのみ利用出来る属性で、いずれも排除勧告が出されております。

align属性

align属性は表の配置を指定します。

値には以下の五つがあります。

left
左に寄せます。後続するテキスト類は、右に廻り込みます。
right
右に寄せます。後続するテキスト類は、左に廻り込みます。
center
中央に寄せます。

尚、align="lift"属性及びalign="right"属性が与えられた<img>要素以降のテキストの廻り込みを解除するには<br>要素のclear属性を用います。

bgcolor属性

表の背景色を指定します。指定出来る値はHTMLでの色指定についてを参照して下さい。

以下は非公認属性です。利用した場合はどの文書型にも適合しなくなります。従ってなるべく使わないようにすべきものです。

background属性

表全体の背景画像のURIを指定します。

<table>要素に関する注意事項。

<table>要素はレイアウトに使わないようにしましょう。

<table>要素に対応出来ないユーザエージェントでは、表の内容を書かれている順にそのまま出力するでしょう。

また、携帯電話向けのフルブラウザの中にも意味の無いテーブルを解除して表示するものがあります。

今やテーブルレイアウトは非常にリスクが高くなったと言えますので、なるべく使わないようにしましょう。

どうしてもテーブルをレイアウトで使いたい場合は、テーブル関連の要素タグを取り払っても内容が理解できるような文書構成にしましょう。

また、レイアウトとまで行かなくても、枠線を付けたり背景色などを一時的に変えるためだけにテーブルを使うのも好ましい事ではありません。

summary属性の書き方。

summary属性は表の構造に関する説明を書くものです。

また、音声出力など非視覚系の環境、或いは視覚系でもCUI(クイ)環境など表のレンダリングが不可能か困難な環境でHTML文書を利用しようとする場合に、表の構造を知るための手助けとなる事が期待されております。

と言う事は、例えば<table>要素の記述例に於いて、以下のようなsummary属性値では好ましくないと思われます。

<table summary="携帯電話各キャリアのサーヴィス名と世代を縦方向に、GIF画像, JPEG画像及びPNG画像の対応状況を横方向で示しております。">

なぜなら、とかと言うのはグラフィカルな環境でない限り見えない、つまり、縦とか横とか言われても通じない恐れがあるからです。

ですから、summary属性値となる記述には出来るだけ表示に関する表現を使わないように心掛けるべきと思われます。

制作者は、以下のように書いてみました。

<table summary="携帯電話各キャリアのサーヴィス名と世代ごとにGIF画像, JPEG画像及びPNG画像がそれぞれ対応しているかどうかを示しております。">

<table>要素の記述例。

<table summary="携帯電話各キャリアのサーヴィス名と世代ごとにGIF画像, JPEG画像及びPNG画像がそれぞれ対応しているかどうかを示しております。" border="1" cellspacing="0" cellpadding="8">
    <caption>各携帯電話キャリアで使える画像形式(平成18年 5月20日現在)。</caption>
    <colgroup span="2" class="carrier" />
    <colgroup span="3">
        <col class="gif" />
        <col class="jpeg" />
        <col class="png" />
        </colgroup>
    <thead>
        <tr>
            <th colspan="2"></th>
            <th scope="col" abbr="GIF">GIF画像</th>
            <th scope="col" abbr="JPEG">JPEG画像</th>
            <th scope="col" abbr="PNG">PNG画像</th>
            </tr>
        </thead>
    <tfoot>
        <tr>
            <th colspan="2"></th>
            <th scope="col" abbr="GIF">GIF画像</th>
            <th scope="col" abbr="JPEG">JPEG画像</th>
            <th scope="col" abbr="PNG">PNG画像</th>
            </tr>
        </tfoot>
    <tbody id="imode">
        <tr>
            <th scope="rowgroup" colspan="2" abbr="iモード">
                iモード<br />(エヌ・ティ・ティ・ドコモ)
                </th>
            <td>表示可</td>
            <td>旧型機で不可</td>
            <td>表示不可</td>
            </tr>
        </tbody>
    <tbody id="EZWeb">
        <tr>
            <th scope="rowgroup" rowspan="2" abbr="EZウェブ">EZウェブ<br />(KDDI)</th>
            <th scope="row" abbr="WAP 1">WAP 1.0</th>
            <td colspan="2">表示不可(但しサーヴァ変換で対応)</td>
            <td>表示可</td>
            </tr>
        <tr>
            <th scope="row" abbr="WAP 2">WAP 2.0</th>
            <td colspan="3">表示可</td>
            </tr>
        </tbody>
    <tbody id="SoftBank">
        <tr>
            <th scope="rowgroup" rowspan="2" abbr="ソフトバンク">ソフトバンク</th>
            <th scope="row" abbr="2G">第二世代</th>
            <td>表示不可</td>
            <td>初期機で不可</td>
            <td>表示可</td>
            </tr>
        <tr>
            <th scope="row" abbr="3G">第三世代</th>
            <td colspan="3">表示可</td>
            </tr>
        </tbody>
    </table>

これを現行のグラフィカルなユーザエージェントで表示させると以下のような表になるでしょう。

まず、冒頭に<caption>要素による各携帯電話キャリアで使える画像形式(平成18年 5月20日現在)。と言うキャプションが表示されます。

表本体は七行五列の表となり、その表示は一行目から順に以下のようになるでしょう。

  1. 一行目には、<thead>要素により、左から二列空いて三列目からGIF画像, JPEG画像, PNG画像と表示されます。
  2. 二行目には、左の二列に跨ってiモード(エヌ・ティ・ティ・ドコモ), 表示可, 旧型機で不可, 表示不可と表示されます。
  3. 三行目には、左端のEZウェブが下の行に跨って表示され、以後WAP 1.0, 二列に跨って表示不可(但しサーヴァ変換で対応), 表示可と表示されます。
  4. 四行目には、三行目左端のEZウェブが跨って表示され、以後WAP 2.0, 三列に跨って表示可と表示されます。
  5. 五行目には、左端のソフトバンクが下の行に跨って表示され、以後第二世代, 表示不可, 初期機は表示不可, 表示可と表示されます。
  6. 六行目には、三行目左端のEZウェブが跨って表示され、以後第三世代, 三列に跨って表示可と表示されます。
  7. 七行目には、<tfoot>要素により、左から二列空いて三列目からGIF画像, JPEG画像, PNG画像と表示されます。

関連項目。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com