WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <caption>「表題」

<caption> 「表題」[読み方:キャプション]

<caption>タグは、表の表題(タイトル)を指定する場合に使用します。
<table>の子要素となるため、必ず<table>~</table>の中に記述する必要があります。

HTML規格HTML4.01HTML5
使用可否
広告

<caption> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
なし<table>
<table>の最初の要素
フローコンテンツ
但し、<table>は不可
不可

<caption> の属性

【構文】
<table>
<caption>~内容~</caption>

</table>
属性意味値のサンプルなど
align="表題位置"表題(タイトル)を表示する位置
※HTML5で廃止。スタイルシートで指定。
意味
top表の上部中央(初期値)
bottom表の下部中央
left表の左
right表の右
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<caption>タグのサンプル

<table border="1" cellspacing="1" cellpadding="3">
<caption>秋の中間テスト結果</caption>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
ページTOP

スタイルシート(CSS)を使用し見た目を変えるサンプル

<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;}
#css-s1 td {background-color: #fff;text-align: center;}
-->
</style>

</head>

<table border="0" cellspacing="1" cellpadding="3" id="css-s1">
<caption>秋の中間テスト結果</caption>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
ページTOP

留意事項

  • align属性はHTML5で廃止されました。文字位置を指定したい場合は、サンプルのようにスタイルシートの「text-align」で指定してください。
  • <caption>は<table>タグ内で使用する必要があります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン