caption-side

优质

小牛编辑

125浏览

2023-12-01

描述 (Description)

caption-side属性确定table.s标题的元素框的位置。

可能的值 (Possible Values)

top - 将标题元素框放在表格框上方。
bottom - 将标题的元素框放在表格框下方。
left - 将标题的元素框放在表格框的左侧。
right - 将标题的元素框放在表格框的右侧。

适用于 (Applies to)

所有HTML定位元素。

DOM语法 (DOM Syntax)

object.style.captionSide = "left";

例子 (Example)

以下是显示此属性效果的示例 -

<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>

这将产生以下结果 -