<!DOCTYPE html><html><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: 60%; /*表格置中*/ 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; /*width:80px;*/ } th { background-color: rgba(155,155,0,0.3); color: brown; } .green { color: darkgreen; font-weight: bolder; font-size: 1.2em; } </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/1.jpg" alt="" width="50"></td> <td>一陽指</td> <td>全真教</td> <td>空手打死過一隻狗</td> </tr> <tr> <td>2</td> <td>張無忌</td> <td>魔教教主</td> <td><img src="../images/gs/2.jpg" alt="" width="50"></td> <td>九陽神功</td> <td>明教</td> <td>同時交了5個女朋友</td> </tr> <tr> <td>3</td> <td>周伯通</td> <td>老頑童</td> <td><img src="../images/gs/3.jpg" alt="" width="50"></td> <td>全真教</td> <td>左右互搏術</td> <td>給皇帝戴過綠帽子</td> </tr> <tr> <td>4</td> <td>陳近南</td> <td>南霸天</td> <td><img src="../images/gs/4.jpg" alt="" width="50"></td> <td>天地會</td> <td>吃西瓜</td> <td>吃葡萄從來不吐葡萄皮</td> </tr></table></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
