CSS之——06表格盒子模型2020.3.9_表格元素的盒子模型-CSDN博客

本文链接：https://blog.csdn.net/weixin_43079958/article/details/105058501

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格盒子模型</title>

<style>
/*    *号是一个通配符    */

*{
    margin:0px;
    padding :0dx;


}





/* 边框折叠 */
    table{
        border-collapse: collapse;
    }
    
    
    /* 边框设置 */
table,th,td{
border: rgb(253, 24, 112) solid 5px;

}
/* 设置表格的宽 可以直接给数字100px  也可以是比例 */

table{

    width :100%;
}
/* 设置高 */
th{
height: 50px;
}
td{
text-align :center;

/* 垂直方向设置 */
height:50px;
vertical-align: bottom;
}
/* 修改表格颜色 */
td{
    background-color: dimgray;
    color: floralwhite;
}



</style>










</head>
<body>
   <!-- 边框  -->
<table>
   <tr>
    <th>班级</th>
    <th>姓名</th>
    <th>年龄</th>
</tr>
<tr>
        <td>一班</td>
        <td>薛世豪</td>
        <td>20</td>

</tr>
<tr>
    <td>一班</td>
    <td>薛世豪</td>
    <td>20</td>

</tr><tr>
    <td>一班</td>
    <td>薛世豪</td>
    <td>20</td>

</tr><tr>
    <td>一班</td>
    <td>薛世豪</td>
    <td>20</td>

</tr><tr>
    <td>一班</td>
    <td>薛世豪</td>
    <td>20</td>

</tr>



</table>


<!-- 盒子模型 -->
<!-- 图片演示img -->
<img src="模型盒子.png"   alt="" width="800" >


</body>
</html>