Tidadigi Logo

CSS caption-side Property

Thuộc tính này dùng để xác định vị trí đặt tiêu đề bảng. Nó được sử dụng trong các bảng HTML. Thuộc tính này sử dụng được cho element có display là caption-side.

Cú pháp: 

caption-side: top|bottom|block-start|block-end|inline-start|inline-end|initial|inherit;

Thuộc tính:   

  • top: Nó chỉ định tiêu đề bảng được đặt ở phía trên cùng của bảng. Đây là giá trị mặc định.
  • bottom: Thuộc tính này xác định tiêu đề bảng được đặt ở dưới cùng của bảng.
  • initial: Nó đặt thuộc tính về giá trị mặc định ban đầu của nó.

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính caption-side:top;.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>caption-side property</title>
    <style>
        .geeks {
            caption-side: top;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            caption-side: top:
        </h2>
        <table class="geeks" border="1">
            <caption>
                Table 4.1 Student Details
            </caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output: 

css-caption-side-property

Ví dụ:  Trong ví dụ này, ta sử dụng thuộc tính caption-side:bottom;.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>caption-side property</title>
    <style>
        .geeks {
            caption-side: bottom;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            caption-side: bottom:
        </h2>
        <table class="geeks" border="1">
            <caption>
                Table 4.1 Student Details
            </caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output: 

css-caption-side-property

Ví dụ:   Trong ví dụ này, ta sử dụng thuộc tính caption-side: initial;.

HTML 
<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            caption-side: initial;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">
              GeeksForGeeks
          </h1>

        <h2>caption-side:initial:</h2>
        <table class="geeks" border="1">
            <caption>Table 4.1 Student Details</caption>
            <tr>
                <th>Student Name</th>
                <th>Enroll_no.</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>234</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>Govind madan</td>
                <td>235</td>
                <td>kolkata</td>
            </tr>
            <tr>
                <td>Suraj Roy</td>
                <td>236</td>
                <td>Mumbai</td>
            </tr>
            </tr>
                <td> Dhruv Mishra</td>
                <td>237</td>
                <td>Dehadun</td>
            </tr>
        </table>
    </center>
</body>
</html>

Output: 

css-caption-side-property

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi CSS caption-side Property được liệt kê dưới đây:  

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0

Last Updated : 21/07/2025