CSS-キャプション側

説明

_caption-side_プロパティは、table.sキャプションの要素ボックスの配置を決定します。

可能な値

top -キャプションの要素ボックスをテーブルボックスの上に配置します。
bottom -キャプションの要素ボックスをテーブルボックスの下に配置します。
left -キャプションの要素ボックスをテーブルボックスの左側に配置します。
right -キャプションの要素ボックスをテーブルボックスの右側に配置します。

に適用されます

すべてのHTML配置要素。

DOM構文

object.style.captionSide = "left";

例

これは、このプロパティの効果を示す例です-

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>

   </body>
</html>

これにより、次の結果が生成されます–

Css-caption-side

目次

CSS-キャプション側

説明

可能な値

に適用されます

DOM構文

例