CSS - caption-side 属性

CSS caption-side 属性指定表格标题应显示的位置（顶部或底部）。

语法

caption-side: top | bottom | initial | inherit;

属性值

值	描述
top	将标题放在表格上方。默认值。
bottom	将标题放在表格下方。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS Caption Side 属性示例

以下示例使用不同的值解释了 caption-side 属性。

使用 Top 值的 Caption Side 属性

要将表格的标题放在其上方，我们使用 caption-side 属性的 top 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border-collapse: collapse;
         padding: 10px;
         background-color: lightgreen;
         text-align: center;
      }

      #example {
         caption-side: top;
      }
   </style>
</head>

<body>
    <h2>
        CSS caption-side property
    </h2>
    <p>
        caption-side: top
    </p>
    <table id="example" border="2">
         <caption>
             <strong>
                Table 2.1 Subject Toppers
             </strong>
         </caption>
         <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Ankit</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>Priya</td>
            <td>Physics</td>
            <td>87</td>
         </tr>
         <tr>
            <td>Kumar</td>
            <td>Chemistry</td>
            <td>92</td>
         </tr>
    </table>
</body>

</html>

使用 Bottom 值的 Caption Side 属性

要将表格的标题放在其下方，我们使用 caption-side 属性的 bottom 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border-collapse: collapse;
         padding: 10px;
         background-color: lightgreen;
         text-align: center;
      }

      #example {
         caption-side: bottom;
      }
   </style>
</head>

<body>
    <h2>
        CSS caption-side property
    </h2>
    <p>
        caption-side: bottom
    </p>
    <table id="example" border="2">
         <caption>
             <strong>
                Table 2.1 Subject Toppers
             </strong>
         </caption>
         <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Ankit</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>Priya</td>
            <td>Physics</td>
            <td>87</td>
         </tr>
         <tr>
            <td>Kumar</td>
            <td>Chemistry</td>
            <td>92</td>
         </tr>
    </table>
</body>

</html>

支持的浏览器

属性
caption-side	1.0	8.0	1.0	1.0	4.0

css_properties_reference.htm

打印页面