【caption-side】テーブル(表)のキャプションの位置を変更

caption-sideプロパティでは、テーブル(表)に対するキャプションの位置を指定することができます。

通常<CAPTION>タグでテーブル(表)にキャプション(タイトル)を付けると、キャプションの位置はテーブルの上に配置されます。 ですがcaption-sideプロパティを使用することで、キャプションの位置を上、または下に配置することができます。

さらにテーブル(表)の上または下に配置したキャプションを右や左に寄せて配置したい場合は、併せてtext-alignプロパティをキャプション要素に対して指定します。

なおこのプロパティはNetscape4.7以前のバージョンには対応していませんので、ご注意下さい。

書式

  • caption-side : ……… キャプションの位置を指定する

★:top、bottom、inherit

top
テーブル(表)の上にキャプションを表示する
bottom
テーブル(表)の下にキャプションを表示する

使用した時の例

.sample1 {caption-side: bottom;}
.sample2 {caption-side: bottom; text-align: left;}

table {border: solid 1px #ccc; width: 100%;}
<table>
<caption class="sample1">caption-side: bottom</caption>
  <tr>
     <th>価格</th>
     <th>商品名</th>
     <th>品番</th>
  </tr>
  <tr>
     <td>1,000円</td>
     <td>消しゴム</td>
     <td>k-5485</td>
  </tr>
  <tr>
     <td>6,000円</td>
     <td>テープ</td>
     <td>ts-5265-00</td>
  </tr>
</table>

<table>
<caption class="sample2">caption-side: bottom; text-align: left;</caption>
  <tr>
     <th>価格</th>
     <th>商品名</th>
     <th>品番</th>
  </tr>
  <tr>
     <td>1,000円</td>
     <td>消しゴム</td>
     <td>k-5485</td>
  </tr>
  <tr>
     <td>6,000円</td>
     <td>テープ</td>
     <td>ts-5265-00</td>
  </tr>
</table>

ブラウザ上の表示例

caption-side: bottom
価格 商品名 品番
1,000円 消しゴム k-5485
6,000円 テープ ts-5265-00
caption-side: bottom; text-align: left;
価格 商品名 品番
1,000円 消しゴム k-5485
6,000円 テープ ts-5265-00

対応ブラウザなどのデータ

初期値 top 値の継承 継承する
適用可能な要素 caption要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報