プロパティ名適用対象継承
caption-side配置位置caption要素有り
  
説明
配置位置top表の上側(デフォルト)
bottom表の下側
left表の左側
right表の右側
caption-sideプロパティは、表のタイトルの位置を指定します。
には、top、bottom、left、rightのどれかを指定します。

注意画像 ●Internet Explorer7迄は、bottom、left、rightには対応していません。Internet Explorer8は、topとbottomに対応しています。
●Firefox3は、すべてに対応しています。

hilyou_sampl06.gif

サンプルソース
【CSS】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- table{width:300px; border:1px solid black; margin:10px; } th,td{border:1px solid red; color:blue; font-size:1.1em; } .sampl01{border-collapse:collapse;} .title01{caption-side:top;} .title02{caption-side:bottom;} .title03{caption-side:left;} .title04{caption-side:right;} caption{margin:5px; color:red; font-weight:bold; } --> </style> </head> 【HTML】 <body> <table class="sampl01"> <caption class="title01">県庁所在地と旧国名</caption> <tr><th>県名</th><th>県庁所在地</th><th>旧国名</th></tr> <tr><td>青森県</td><td>青森市</td><td>陸奥国</td></tr> <tr><td>岩手県</td><td>盛岡市</td><td>陸奥国</td></tr> <tr><td>宮城県</td><td>仙台市</td><td>陸前国</td></tr> <tr><td>秋田県</td><td>秋田市</td><td>羽後国</td></tr> </table> <table class="sampl01"> <caption class="title02">県庁所在地と旧国名</caption> <tr><th>県名</th><th>県庁所在地</th><th>旧国名</th></tr> <tr><td>青森県</td><td>青森市</td><td>陸奥国</td></tr> <tr><td>岩手県</td><td>盛岡市</td><td>陸奥国</td></tr> <tr><td>宮城県</td><td>仙台市</td><td>陸前国</td></tr> <tr><td>秋田県</td><td>秋田市</td><td>羽後国</td></tr> </table> <table class="sampl01"> <caption class="title03">県庁所在地と旧国名</caption> <tr><th>県名</th><th>県庁所在地</th><th>旧国名</th></tr> <tr><td>青森県</td><td>青森市</td><td>陸奥国</td></tr> <tr><td>岩手県</td><td>盛岡市</td><td>陸奥国</td></tr> <tr><td>宮城県</td><td>仙台市</td><td>陸前国</td></tr> <tr><td>秋田県</td><td>秋田市</td><td>羽後国</td></tr> </table> <table class="sampl01"> <caption class="title04">県庁所在地と旧国名</caption> <tr><th>県名</th><th>県庁所在地</th><th>旧国名</th></tr> <tr><td>青森県</td><td>青森市</td><td>陸奥国</td></tr> <tr><td>岩手県</td><td>盛岡市</td><td>陸奥国</td></tr> <tr><td>宮城県</td><td>仙台市</td><td>陸前国</td></tr> <tr><td>秋田県</td><td>秋田市</td><td>羽後国</td></tr> </table> </body> </html>