# 水果庫靜態頁面呈現 ###### tags: `JavaWeb CSS` ```htmlembedded= <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="demo05.css"> </head> <body> <div id="div_container"> <div id="div_fruit_list"> <table id="tbl_fruit"> <tr> <th class="w20">名稱</th> <th class="w20">單價</th> <th class="w20">數量</th> <th class="w20">小計</th> <th>操作</th> </tr> <tr> <td>蘋果</td> <td>5</td> <td>20</td> <td>100</td> <td><img src="xx.jpg" class="delimg">&nbsp;</td> </tr> <tr> <td>西瓜</td> <td>3</td> <td>20</td> <td>60</td> <td><img src="xx.jpg" class="delimg">&nbsp;</td> </tr> <tr> <td>鳳梨</td> <td>4</td> <td>25</td> <td>100</td> <td><img src="xx.jpg" class="delimg">&nbsp;</td> </tr> <tr> <td>水梨</td> <td>3</td> <td>30</td> <td>90</td> <td><img src="xx.jpg" class="delimg">>&nbsp;</td> </tr> <tr> <td>總計</td> <td colspan="4">999</td> </tr> </table> </div> </div> </body> </html> ``` ```css body{ margin: 0; padding: 0; background-color: gray; } div{ position: relative; float: left; } #div_container{ width: 80%; height: 100%; border: 0px solid blue; margin-left: 10%; float: left; background-color: honeydew; } #tbl_fruit{ width: 60%; line-height: 28px; } #tbl_fruit,#tbl_fruit th,#tbl_fruit tr,#tbl_fruit td{ border: 1px solid gray; border-collapse: collapse; text-align: center; font-size: 16px; font-family: 黑体; font-weight: lighter; color: saddlebrown; } .w20{ width: 20%; } #div_fruit_list{ width: 100%; border: 0px solid red; margin-top: 120px; margin-left: 20%; } .delimg{ width: 24px; height: 24px; } ``` ![](https://i.imgur.com/k4xdB39.png)