当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS caption-side用法及代码示例


此属性用于指定放置表格标题的位置。在HTML表格中使用。此属性可以与显示属性设置为caption-side的任何元素一起使用。

用法:

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

属性:


  • top:它指定将表标题放在表的顶部。它是默认值。

    用法:

    caption-side:top;

    例:

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

    输出:

  • botttom:此属性指定将表标题放在表的底部。

    用法:

    caption-side:bottom;

    例:

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

    输出:

  • initial:它将属性设置为其默认值。

    用法:

    captipn-side:initial

    例:

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

    输出:

支持的浏览器:CSS caption-side属性支持的浏览器如下:

  • 谷歌浏览器1.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0


相关用法


注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | caption-side Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。