<<PREV | TOP | NEXT>>

CAPTION 要素

last modified 23rd/Oct. 2000

  1. TABLE - 表
  2. TABLE 要素
  3. CAPTION 要素 - 表題
  4. 行グループ要素 - THEAD, TFOOT, TBODY 要素
  5. 列グループ要素 - COLGROUP, COL 要素
  6. TR 要素 - 行要素
  7. セル要素 - TH, TD 要素
    1. セルの結合
    2. セル内の文字列揃え
    3. CSS による文字列揃え - 'text-align', 'vertical-align'
  8. 表のボーダー表示
  9. 表の幅の指定

表には、 TABLE 要素の summary 属性による要約の他に、「見だし」（キャプション）を記述できます。

CAPTION 要素は一つの表に一つだけしか存在せず、且つ TABLE 要素の開始タグ直後にしか現れられません。

<table>
<caption>表のキャプション</caption>
...the rest of the table...
</table>

CAPTION 要素の文書型定義

<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ENTITY % CAlign "(top|bottom|left|right)">
<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  align       %CAlign;       #IMPLIED  -- relative to table --
  >

属性の定義

align = top|bottom|left|right [CI]

CAPTION 要素の配置位置は、非推奨属性の align 属性で表に対する表示位置を調整できますが、 Transitional でも valign 属性は定義されていません。

<table>
<caption align="bottom">表題</caption>
...
</table>

CSS による表題の配置指定

表のcaptionの表示位置を設定します。

caption-sidetop | bottom | left | right | inherit

CAPTION 要素に子要素は事実上存在しませんが継承するとはどう言う事でしょうか。 TABLE 要素に 'caption-side' を指定すれば、その子孫要素である CAPTION 要素に適用されるという意味です。

caption { caption-side: bottom;
          text-align: right }

この例では、表のタイトルの表示位置は表の下、テキストは右揃いで表示される。

3行3列の表の例
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

CAPTION 要素の文字列の水平位置は 'text-align' で揃える事が出来ます。

right, left の場合の注意

'caption-side' が 'right' か 'left' の場合、 'width' の値が caption を表示する幅になりますが、 'width: auto;' とすると表示幅がブラウザに一任されます。どのような表示幅を採用するかに規定がありませんので、 'caption-side' に 'right', 'left' を指定する際には、 'width' 値を 'auto' 以外の具体的な値にするよう御奨めします。

また、 'right', 'left' の場合、 caption の水平位置は 'vertical-align' で指定します。

CSS の基本的な仕組みに付いては「CSS の紹介」を参照ください。

'caption-side', 'text-align' などの具体的な定義に付いては「CSS 入門」を参照ください。

<<PREV | TOP | NEXT>>

FC2> モビット