收藏
批改状态：合格
老师批语：实际上你的作业并没有完成, 表格制作 是有问题的 .... 可能你也发现了...完了再改进一下, 圆角没有做完
用css控制表格中的样式：
<title>css圆角表格</title>
<style>
/*设置表格大小边框*/
table{
width: 500px;
height: 400px;
margin:0 auto;
text-align:center;
border:1px solid black;
border-radius:10px;
box-shadow:3px 3px gray ;
}
table{
background-image: url("http://img3***gtn.bdimg.com/it/u=2568114326,1575192997&fm=26&gp=0.jpg");
background-size: cover;
}
/*设置单元格背景色*/
table tbody tr:nth-of-type(1)> td:first-of-type,
table tbody tr:nth-of-type(5)> td:first-of-type,
table tbody tr:nth-of-type(9)> td:first-of-type {
background-color:lightseagreen;
opacity: 0.5;
}
table tbody>tr:nth-of-type(1)>td,
table tbody>tr:nth-of-type(2)>td,
table tbody>tr:nth-of-type(3)>td,
table tbody>tr:nth-of-type(5)>td,
table tbody>tr:nth-of-type(6)>td,
table tbody>tr:nth-of-type(7)>td,
table tbody>tr:nth-of-type(9)>td,
table tbody>tr:nth-of-type(10)>td,
table tbody>tr:nth-of-type(11)>td{
background-color:lightsalmon;
opacity: 0.5;
}
/*设置表格标题格式*/
caption{
font-size:1.5rem;
font-weight:bolder;
margin-bottom:15px;
}
/*设置表头背景色*/
table thead tr{
background-color: lightcyan;
}
/*设置小计行背景色*/
.color{
font-weight:bolder;
background-color: lightgrey;
}
/*设置总计行背景色*/
table tfoot tr{
font-size:1.3rem;
font-weight:bolder;
background-color: lightblue;
}
/* 设置表格圆角 */
table thead tr:nth-of-type(1)>th:nth-of-type(1) {
border-radius: 10px 0 0 0;
}
table thead tr:nth-of-type(1)>th:nth-of-type(7) {
border-radius: 0 10px 0 0;
}
table tfoot tr:nth-of-type(1)>td:nth-of-type(1) {
border-radius: 0 0 0 10px;
}
table tfoot tr:last-of-type>td:last-of-type {
border-radius: 0 0 10px 0;
}
</style>
</head>
<body>
<table>
<caption>水果销量表</caption>
<thead>
<tr>
<th>省份</th>
<th>江苏</th>
<th>山东</th>
<th>广东</th>
<th>北京</th>
<th>上海</th>
<th>天津</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">苹果</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr class="color">
<td>小计</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td rowspan="3">香蕉</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr class="color">
<td>小计</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td rowspan="3">哈蜜瓜</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr class="color">
<td>小计</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>900</td>
<td>900</td>
<td>900</td>
<td>900</td>
<td>900</td>
<td>900</td>
</tr>
</tfoot>
</table>
</body>点击 "运行实例" 按钮查看在线实例
效果图：
![XIE]9U]H5)){5[~QUOU7HW6.png](https://img.php.cn/upload/image/807/755/704/1568431459322459.png "1568431459322459.png")
总结：
通过使用各种选择器，可以用css设置表格的大小，字体、背景色等样式。表格背景填充图片时，图片会重复，可以通过设置background-size来进行调整。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
