实例 <!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> 运行实例 » 点击 "运行实例" 按钮查看在线实例