caption-side

<caption>要素の配置を指定します。


ブラウザ

N6 / N7 / Fx1 / Fx2

▲PageTop

書式

要素[.class名][#id名]{ caption-side : 値; }

▲PageTop

指定できる値

値 初期値 意味
top ○ 上に配置します。
bottom 下に配置します。
left 左に配置します。
right 右に配置します。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        caption-side : top;
        width : 50%;
      }
      #sample1 td {
        border : 1px solid #000000;
      }
      #sample2 {
        caption-side : bottom;
        width : 50%;
      }
      #sample2 td {
        border : 1px solid #000000;
      }
      #sample3 {
        caption-side : left;
        width : 50%;
      }
      #sample3 td {
        border : 1px solid #000000;
      }
      #sample4 {
        caption-side : right;
        width : 50%;
      }
      #sample4 td {
        border : 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <table id="sample1">
      <caption>caption要素</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>caption-side</td><td>top</td>
      </tr>
    </table>
    <br>
    <table id="sample2">
      <caption>caption要素</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>caption-side</td><td>bottom</td>
      </tr>
    </table>
    <br>
    <table id="sample3">
      <caption>caption要素</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>caption-side</td><td>left</td>
      </tr>
    </table>
    <br>
    <table id="sample4">
      <caption>caption要素</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>caption-side</td><td>right</td>
      </tr>
    </table>
  </body>
</html>

表示結果

caption要素
プロパティ 指定した値
caption-side top

caption要素
プロパティ 指定した値
caption-side bottom

caption要素
プロパティ 指定した値
caption-side left

caption要素
プロパティ 指定した値
caption-side right

▲PageTop

関連項目

HTML

<table> / <caption>

▲PageTop

▲