<!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>
06表格盒子模型2020.3.9
猜你喜欢
转载自blog.csdn.net/weixin_43079958/article/details/105058501
今日推荐
周排行