サイト内検索
...スタイルシート(css)...
スタイルシート・ｔａｂｌｅ
タイトルの位置
- タイトルの位置は、caption-sideプロパティを指定します。
- caption要素に適用できます。
- [使い方]
- .sample{caption-side: top;}
- [メモ]
- caption-sideでのleft・right指定は、
W3C・CSS検証サービスでは推奨されていません。
text-align(left・center・right)や vertical-align(top・middle・bottom)
と組み合わせると細かい指定が出来ます。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| caption-side: | top; | テーブルの上側に表示します。
Firefox・Opera・Safariなどに対応しています。 ＩＥには、対応していません。 |
| bottom; | テーブルの下側に表示します。
Firefox・Opera・Safariなどに対応しています。 ＩＥには、対応していません。 |
|
| left ; | テーブルの左側に表示します。
Firefoxに対応しています。 ＩＥ・Opera・Safariなどには、対応していません。 |
|
| right; | テーブルの右側に表示します。
Firefoxに対応しています。 ＩＥ・Opera・Safariなどには、対応していません。 |
サンプル
|
《caption-side: top;》 [ｈｅａｄの中] <style type="text/css"><!-- table{ width: 200px; border: 1px #999999 solid; } td,th{ border: 1px #999999 solid; } .sample1{ caption-side: top; } --> </style> [ｂｏｄｙの中] <div class="sample1"><table> <tr> <th>Ｎｏ１</th> <th>Ｎｏ２</th> </tr> <tr> <td>Ｎｏ３</td> <td>Ｎｏ４</td> </tr> </table> </div> [ブラウザ上]
|
《caption-side:bottom;》 [ｈｅａｄの中] <style type="text/css"><!-- table{ width: 200px; border: 1px #999999 solid; } td,th{ border:1px #999999 solid; } .sample2{ caption-side: bottom;text-align: left; } --> </style> [ｂｏｄｙの中] <div class="sample2"><table> <tr> <th>Ｎｏ１</th> <th>Ｎｏ２</th> </tr> <tr> <td>Ｎｏ３</td> <td>Ｎｏ４</td> </tr> </table> </div> [ブラウザ上]
|
