HTML DOM 样式 captionSide 属性

htmlweb developmentfront end technology更新于 2024/3/11 2:52:17

HTML DOM 样式 captionSide 属性用于获取或设置表格标题的位置。表格标题只能设置在垂直位置，即顶部和底部。

以下是语法 −

设置 captionSide 属性 −

object.style.captionSide = "top|bottom|initial|inherit"

以上属性解释如下:

值	描述
top	用于将表格标题定位在表格上方。这是默认值。
bottom	用于将表格标题定位在表格下方。
initial	用于将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 captionSide 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #t1{
      caption-side: bottom;
      border: 2px dashed black;
   }
   td {
      border: 2px solid blue;
   }
   caption {
      font-size: 24px;
      font-weight: bold;
   }
</style>
<script>
   function changeCaptionPosition(){
      document.getElementById("t1").style.captionSide="top";
      document.getElementById("Sample").innerHTML="The caption side is now changed to top ";
   }
</script>
</head>
<body>
   <table id="t1">
      <caption>Demo Caption</caption>
      <tr>
         <th>demo head</th>
         <th>demo head</th>
      </tr>
      <tr>
         <td>there goes my data..</td>
         <td>there goes my..</td>
      </tr>
      <tr>
         <td>there goes my data..</td>
         <td>there goes my..</td>
      </tr>
   </table>
   <p>Change the above table caption position by clicking the below button</p>
   <button onclick="changeCaptionPosition()">Change Caption Position</button>
   <p id="Sample"></p>
</body>
</html>