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

列印頁面