实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0322作业</title>
<style type="text/css">
table{
margin: auto;/*表格居中*/
border-collapse: collapse;
box-shadow: 3px 3px 3px #888;
width: 60%;
background-image: url(images/bc.png);
background-repeat: no-repeat;
}
table,th,td{
border: 1px solid black;
text-align: center;
}
table caption {
font-size: 1.6em;
font-weight: border;
margin-bottom:15px;
margin-top: 10px
}
td,th {
padding: 4px;
}
.left {
text-align: left;
}
}
img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th{
background-color: rgba(180,180,0,0.3);
}
</style>
</head>
<body>
<table>
<caption>2017财富排行榜</caption>
<tr>
<th>序号</th>
<th colspan="2">头像姓名</th>
<th>行业</th>
<th>财富值(亿)</th>
<th>国籍</th>
</tr>
<tr>
<td>1</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">比尔·盖茨</td>
<td>微软</td>
<td>860</td>
<td>美国</td>
</tr>
<tr>
<td>2</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">沃伦·巴菲特</td>
<td>伯克</td>
<td>756</td>
<td>美国</td>
</tr>
<tr>
<td>3</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">杰夫·贝佐斯</td>
<td>亚马逊</td>
<td>728</td>
<td>美国</td>
</tr>
<tr>
<td>4</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">阿曼西奥</td>
<td>Zara</td>
<td>713</td>
<td>西班牙</td>
</tr>
<tr>
<td>5</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">马克·扎克伯格</td>
<td>facebook</td>
<td>560</td>
<td>美国</td>
</tr>
<tr>
<td>6</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">卡洛斯</td>
<td>电信</td>
<td>545</td>
<td>印度</td>
</tr>
<tr>
<td>7</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">拉里</td>
<td>软件</td>
<td>522</td>
<td>法国</td>
</tr>
<tr>
<td>8</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">查尔斯</td>
<td>石油</td>
<td>483</td>
<td>荷兰</td>
</tr>
<tr>
<td>9</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">迈克尔</td>
<td>彭博</td>
<td>483</td>
<td>德国</td>
</tr>
<tr>
<td>10</td>
<td colspan="2" class="left"><img src="images/bill2.png" width="35">谢尔盖</td>
<td>Google</td>
<td>475</td>
<td>英国</td>
</tr>
</table>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例博客列表 >0322作业
0322作业
- 烟火的博客原创转载
- 2018年03月26日 01:24:55923浏览
上一条：【3.23】PHP作业下一条：3.23作业：常用的四种css对齐方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
