サイト内検索
...HTML・XHTMLタグ...
table
タイトルの位置指定
- タイトルの位置には、caption要素にalign属性を指定します。
- Internet Explorer(Windows版) と Opera のみに対応しています。
- [使い方]
- <table>
- <caption align="bottom">[タイトル]</caption>
- <tr>
- <th ></th>
- <td></td>
- </tr>
- </table>
- [メモ・・・W3Cの検証サービス・・・]
- HTML 4.01 Strict ・ XHTML1.0 Strictでは、推奨されていませんので、
- Validするには、スタイルシートを使用します。
- caption-sideプロパティ・text-alignプロパティを組み合わせて指定します。
- [サンプル]
- .sample{caption-side: middle; text-align: left;}
属性 | 属性値 | 説明 |
---|---|---|
align= | "top" | 表の上側中央に表示します。(デフォルト・指定なし) |
"bottom" | 表の下側中央に表示します。 | |
"left" | 表の左寄りに表示します。 | |
"right" | 表の右寄りに表示します。 |
サンプル
《タイトルを下側に指定》
[bodyの中]
<table border="1"><caption align="bottom">
[タイトル]
</caption>
<tr>
<th>見出し左</th><th>見出し右</th>
</tr>
<tr><td>No1</td><td>No2</td></tr>
<tr><td>No3</td><td>No4</td></tr>
<tr><td>No4</td><td>No6</td>
</tr>
</table>
caption-side・text-alignを指定
[bodyの中]
<table border="1"><caption style="caption-side: bottom; text-align: right;">
[タイトル]
</caption>
<tr>
<th>見出し左</th><th>見出し右</th>
</tr>
<tr><td>No1</td><td>No2</td></tr>
<tr><td>No3</td><td>No4</td></tr>
<tr><td>No5</td><td>No6</td>
</tr>
</table>
[ブラウザ上]
見出し左 | 見出し右 |
---|---|
No1 | No2 |
No3 | No4 |
No5 | No6 |