Day.01.19 css中table的属性

2024年1月13日 116次阅读 来源: 挂树上的骷髅怪 
<!DOCTYPE html>
<html>
 <head>
 <meta  charset="utf-8">
  <title> table属性 </title>
  <style type="text/css">
    table{
        width:500px;
        text-align:center;
        border:4px solid silver;
        border-collapse:collapse;
        background-color:pink;
        margin:0 auto;
        
    }
    tr,td,th{
        border:1px solid blue;
        line-height:40px;
    }
    tr.tr-th{
        background-color:silver;
    }
  </style>
 </head> 
 <body>
    <table> 
        <caption><h1>英雄排行榜</h1></caption>
        <tr class="tr-th">
            <th width="15%">编号</th>
            <th width="15%">姓名</th>
            <th width="70%">外号</th>
        </tr>
        <tbody>
        <tr>
            <td>001</td>
            <td>诺克萨斯之手</td>
            <td>这货不是德莱德莱德莱德莱德莱德莱德莱德莱德莱文</td>
        </tr>

        <tr>
            <td>002</td>
            <td>德玛西亚之力</td>
            <td>盖伦</td>
        </tr>

        <tr>
            <td>003</td>
            <td>寒冰射手</td>
            <td>艾希</td>
        </tr>

        <tr>
            <td>004</td>
            <td>虚空先知</td>
            <td>蚂蚱</td>
        </tr>
        </tbody>
    </table>
 </body>
</html>

总结:
1.border-collapse:表示将表格的边框,合并到一起;
2.margin:0 auto;表示把表格页面居中;
3.caption-side:上下左右的位置;
4.table-layout:automatic;默认值,分配表格中的各个列;

    原文作者：挂树上的骷髅怪
    原文地址: https://www.jianshu.com/p/97eee142f07f
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞