制作者の活動(PR)。

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での色指定についてを参照して下さい。

bgcolor属性はHTML 3.2では定義されておりません。

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

background属性

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

非公認属性のため、使わないようにしましょう。背景画像を表示させたいのであれば、スタイルシートを利用しましょう。
background属性をどうしても利用したい場合は、当然ながらbgcolor属性で背景色も適切に指定しておく必要があります。

<table>要素の属性一覧はここまで。

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

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

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

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

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

テーブル関連のタグを取り除いても内容が理解出来るテーブルを線形化されたテーブルと言います。

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

尚、表の背景画像や枠線に関しては非公認属性を利用しなければならず、その場合どの文書型にも適合しなくなります。どうしても適用したいのであればスタイルシートで実現すれば良いでしょう。

summary属性の書き方。

▲記事先頭
△前項目
▽次項目

以下の説明は制作者の私見であり、仕様書に拠るものではありません。

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

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

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

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

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

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

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

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

<table>要素の記述例。

▲記事先頭
△前項目
▽次項目

以下、XHTML 1.0での記述とします。

<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="ｉモード">
                ｉモード<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日現在)。と言うキャプションが表示されます。

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

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

<table>要素の記述例はここまで。

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

ページ外へのご案内。

marguerite.site@gmail.com

制作者の活動(PR)。

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

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

<table>要素とは。

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

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

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

<table>要素の扱い。

<table>要素の内容。

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

HTML 4.01の場合。

ISO-HTMLの場合。

XHTML 1.0及びXHTML 1.1の場合。

<table>要素の属性。