收藏
批改状态：合格
老师批语：
利用CSS对表格的控制，比以前只用html更简练，比如，利用border-collapse把表格边框折叠；利用text-
align:center使表格文本居中；利用margin: 50px auto，使整个表格全部居中；利用box-shadow: 3px 3px 3px，使
表格向右下方产生投影，具有立体效果。
利用border radius使表格中图片变成圆形，利用box-shadow使表格有投影效果。
利用background-color:rgba(155, 155, 0, 0.3)，使表头具有草绿色并且透明的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.CSS表格设置</title>
<style>
/*第一步:给整个表格以及内部的所有单元格加上边框*/
table,th,td {
border: 1px solid #333;
}
/*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
table {
/*折叠表格线*/
border-collapse: collapse;
text-align: center;
width: 90%;
/*表格居中*/
margin: 50px auto;
box-shadow: 3px 3px 3px #888;
background-image: url(../images/gs/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 30px;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th {
background-color: rgba(155,155,0,0.3);
color: brown;
}
.blue {
color: blue;
font-weight: bolder;
font-size: 1em;
}
</style>
</head>
<body>
<table>
<caption>§ 海岛游排行榜 §</caption>
<tr>
<th>名次</th>
<th>海岛</th>
<th>别称</th>
<th>经典照片</th>
<th>签证信息</th>
<th>交通</th>
<th>特色旅行</th>
</tr>
<tr>
<td>1</td>
<td>大溪地</td>
<td>南太平洋超级度假天堂</td>
<td><img src="../images/gs/11.jpg" alt="" width="70"></td>
<td>法国大使馆</td>
<td>从国内可以经东京、奥克兰转机前往大溪地教</td>
<td class="blue">帆船环岛游，看传说中的面包树；海底喂食鲨鱼</td>
</tr>
<tr>
<td>2</td>
<td>塞舌尔</td>
<td>最纯净的奢华海岛</td>
<td><img src="../images/gs/22.jpg" alt="" width="70"></td>
<td>免签</td>
<td>从香港乘坐塞舌尔航空</td>
<td class="blue">和乌龟嬉戏，看国宝海椰子、沙滩友</td>
</tr>
<tr>
<td>3</td>
<td>圣托里尼</td>
<td>最浪漫纯净的蓝白世界</td>
<td><img src="../images/gs/33.jpg" alt="" width="70"></td>
<td>申根签</td>
<td>从雅典乘船6-8个小时可以到达</td>
<td class="blue">无敌海景和美丽的夕阳，克里特岛的迷宫</td>
</tr>
<tr>
<td>4</td>
<td>毛里求斯</td>
<td>天堂的故乡</td>
<td><img src="../images/gs/44.jpg" alt="" width="70"></td>
<td>免签</td>
<td>上海直飞或香港中转</td>
<td class="blue">潜水，看奇幻的七色大地和落差超高的瀑</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：css中表格的设置: 加边框，表格线折叠为实绩，表格宽度，对齐，外边距，阴影等
总结：
本次课程，我学习了CSS表格的设置。具体来说；
表格线折叠，实现了表格变为实线的方法；
表格宽度的设置，我自己制作的表格，我写成了70%;
表格中插入图片，并且利用box-shadow来实现阴影效果；
利用border-radius 50%实现图片形状为圆形；
还有比较基本的内边距padding和外边距margin的设置。
疑问：如果我表格中文字比较多，字体变小，是不是可以利用class来设置？
1)我每次做作业，插入的图片都显示不了，我把我本地实际效果图片上传。
2)图片的文件夹images是不是跟0322的文件夹同级？引入图片的img src="../images/gs/2.jpg"是不是只能两个dot?
附实际效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
