サイト内検索
...スタイルシート(css)...
スタイルシート・table
タイトルの位置
- タイトルの位置は、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などに対応しています。 IEには、対応していません。 |
bottom; | テーブルの下側に表示します。
Firefox・Opera・Safariなどに対応しています。 IEには、対応していません。 |
|
left ; | テーブルの左側に表示します。
Firefoxに対応しています。 IE・Opera・Safariなどには、対応していません。 |
|
right; | テーブルの右側に表示します。
Firefoxに対応しています。 IE・Opera・Safariなどには、対応していません。 |
サンプル
《caption-side: top;》 [headの中] <style type="text/css"><!-- table{ width: 200px; border: 1px #999999 solid; } td,th{ border: 1px #999999 solid; } .sample1{ caption-side: top; } --> </style> [bodyの中] <div class="sample1"><table> <tr> <th>No1</th> <th>No2</th> </tr> <tr> <td>No3</td> <td>No4</td> </tr> </table> </div> [ブラウザ上]
|
《caption-side:bottom;》 [headの中] <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> [bodyの中] <div class="sample2"><table> <tr> <th>No1</th> <th>No2</th> </tr> <tr> <td>No3</td> <td>No4</td> </tr> </table> </div> [ブラウザ上]
|