实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格作业</title>
<meta charset="utf-8">
<style type="text/css">
/*第一步:给整个表格以及内部的所有单元格加上边框*/
table,th,td{
border: 1px solid #ADADAD;
border-collapse: collapse;
}
/*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
table{
/*取消表格重叠线*/
text-align: center; /*文本字体居中*/
width: 60%; /*设置表格的各项宽度*/
/*表格居中*/
margin: 50px auto; /*设置所以外边距为50px 浏览器自动计算边距*/
box-shadow: 5px 5px 5px #888; /* 设置阴影*/
background-image: url(http://b244.photo.store.qq.com/psb?/V10loTtB3fq1ru/N9TzY3lb9D6tYB19wZQNWdKZv9QlhBE.d2qv4EZodlk!/b/dPQAAAAAAAAA&bo=IAMgAwAAAAARBzA!&rf=viewer_4);
background-repeat: no-repeat;
background-size: cover; /*background-size 属性规定背景图像的尺寸。 */
}
/* 设置标题字体*/
table caption {
font-size: 1.5em;
font-weight: bolder;
margin-bottom: 40px;
}
/* 设置th td 的边距 */
th,td {
padding: 10px;
}
table caption{
color:#FF1493
}
/* 图片美化 */
td img{
border-radius: 10%;
box-shadow: 2px 2px 2px #888; /* 阴影 */
}
th {
background-color: rgba(221,160,221,0.3);
color:#9932CC;
}
.t1{
color: #FF1493;
font-size: 1.5em
}
</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>iphoneX</td>
<td><img src="https://paimgcdn.baidu.com/4F67A6C66541F8DE?src=https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/dsp-image/165719748.jpg&rz=urar_2_968_600&v=0" width="70"></td>
<td>8888</td>
<td>2017-03-21</td>
<td>1</td>
<td>手机</td>
</tr>
<tr>
<td>2</td>
<td>《Web安全深度剖析》</td>
<td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1571605706,3235519020&fm=58&bpow=627&bpoh=800&u_exp_0=1384626602,2918751887&fm_exp_0=86" width="70"></td>
<td>88</td>
<td>2017-03-21</td>
<td>1</td>
<td rowspan="2">书籍</td>
</tr>
<tr>
<td>3</td>
<td>《Web之困》</td>
<td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1906678913,1983976938&fm=58&bpow=363&bpoh=363" width="70"></td>
<td>69</td>
<td>2017-04-23</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>面包</td>
<td><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=797027269,22671544&fm=58&bpow=757&bpoh=542" width="70"></td>
<td>18</td>
<td>2018-03-22</td>
<td>10</td>
<td rowspan="2">食品</td>
</tr>
<tr>
<td>5</td>
<td>卫龙</td>
<td><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2578380559,181146733&fm=27&gp=0.jpg" width="70"></td>
<td>3</td>
<td>2017-06-22</td>
<td>22</td>
</tr>
<tr>
<td>6</td>
<td>遥控直升机</td>
<td><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=300256822,1629061715&fm=27&gp=0.jpg" width="70"></td>
<td>340</td>
<td>2018-03-22</td>
<td>1</td>
<td>玩具</td>
</tr>
<tr>
<th>总价格</th>
<td colspan="5" class="t1"><b>10000</b></td>
</tr>
</table>
<center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=543714473&auto=1&height=66"></iframe></center>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
