| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {caption-side: 値 } |
| 値 の形式 | top，bottom，before，after |
| 初 期 値 | before |
| 対応ブラウザー | C3+ / e8+ / N?+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
| 適用可能な要素 | <table> |
| 継 承 | する |
caption-sideプロパティ は，table要素 に対する指定で，caption要素（最初の子要素）による「標題」の表示位置 を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| top | 標題は表（テーブル）の上に表示します。 |
| bottom | 標題は表（テーブル）の下に表示します。 |
| before | 標題は表（テーブル）の開始位置の前に表示します。 （初期値） |
| after | 標題は表（テーブル）の終了位置の後に表示します。 |
CSS3 では，CSS2.1 までにあった top と bottom に加えて，before と after の ２つの値が導入される予定です。 これは，縦書きの表などにも対応が可能なようにするためのようです。
通常の横書きの表では，before と after は，それぞれ， top と bottom に同一になります。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- table.sample { border: 2px solid black; margin: 20px auto; border-collapse: collapse; } table.sample td { padding: 5px; border: 1px solid gray; } table.sample caption { font-weight: bold; margin: 5px; } caption.cp1 { caption-side: top; } caption.cp2 { caption-side: bottom; } --> </style> |
| HTML <body> ～ </body> |
<table class="sample"> <caption class="cp1">上位置キャプション</caption> <tr><td>テキスト１</td><td>テキスト２</td></tr> <tr><td>テキスト３</td><td>テキスト４</td></tr> </table> <table class="sample"> <caption class="cp2">下位置キャプション</caption> <tr><td>テキスト１</td><td>テキスト２</td></tr> <tr><td>テキスト３</td><td>テキスト４</td></tr> </table> |
| ブラウザー 表示例 | ||||||||
|---|---|---|---|---|---|---|---|---|
|