cman.jpWEBページ作成
広告
<caption> 「表題」[読み方：キャプション]
広告
<caption> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| なし | <table> <table>の最初の要素 | フローコンテンツ 但し、<table>は不可 | 不可 |
<caption> の属性
【構文】
<table>
<caption>～内容～</caption>
～
</table>
<caption>～内容～</caption>
～
</table>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| align="表題位置" | 表題（タイトル）を表示する位置 ※HTML5で廃止。スタイルシートで指定。 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<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>
<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>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
スタイルシート(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>
<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>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
留意事項
| 関連するHTMLタグ | |
|---|---|
| table | 表 |
| 関連するCSS(STYLE) | |
|---|---|
| caption-side | テーブルのキャプションの表示位置 |
広告