caption要素[HTML5]

<caption>…… テーブル(表)にキャプションをつける

<caption>タグは、テーブル(表)にキャプションをつける際に使用します。<caption>は<table>~</table>の最初の子要素として配置します。

キャプションとは、表のタイトルや説明のことです。例えば、<caption>~</caption>の中に段落を配置して、表の説明文を入れても問題ありません。<figure>~</figure>の子要素に、lt;figcaption>と<table>しか存在しない場合、<figcaption>がテーブルのキャプションとして機能するので、<caption>は省略するべきでしょう。

一般的なブラウザでは、キャプションはテーブルの上部に表示されますが、CSSのcaption-sideプロパティで表示位置を指定することができます。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、caption要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。HTML5では、caption要素のalign属性は廃止されています。揃え位置の指定にはCSSを使用してください。

■HTML5での使用例

[html]
<table>
<caption>
<p>これは、2つのサイコロを振った場合の合計値の早見表です。最初の横行と縦行は、それぞれのサイコロの目を表します。</p>
</caption>
<tbody>
<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><th>2</th><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><th>3</th><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><th>4</th><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><th>5</th><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><th>6</th><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
</table><table>
<caption>
<p>これは、2つのサイコロを振った場合の合計値の早見表です。最初の横行と縦行は、それぞれのサイコロの目を表します。</p>
</caption>
<tbody>
<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><th>2</th><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><th>3</th><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><th>4</th><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><th>5</th><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><th>6</th><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
</table>
[/html]

参考:http://www.htmq.com/html5/caption.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート   パーマリンク