案例練習信息記錄:
- 表格案例來源:菜鳥教程中的漂亮的表格。
- 使用知識: html
- 具體腳本呈現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>漂亮的表格</title> </head> <body> <!-- 思路分析:①有表題——<caption></caption> ②一條線——<hr/> ③數字文本(2017-01-02---2017-05-02)居右——align="right" ④18行*12列 --> <table border="1" cellspacing="0"> <caption>受理員業務統計表<hr/> <p style="text-align: right;">2020-05-11---2020-05-xx</p> </caption> <tr id="1"> <td rowspan="2" colspan="2">受理員</td> <td rowspan="2" >受理數</td> <td rowspan="2" >自辦數</td> <td rowspan="2" >直接解答</td> <td colspan="2">擬辦意見</td> <td colspan="2">返回修改</td> <td colspan="3">工單類型</td> </tr> <tr id="2"> <td>同意</td> <td>比例</td> <td>數量</td> <td>比例</td> <td>建議件</td> <td>訴求件</td> <td>諮詢件</td> </tr> <tr id="3"> <td rowspan="8">受理處</td> <td>王豔</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="4"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="5"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="6"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="7"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="8"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="9"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="10"> <td>總計</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> <tr id="11"> <td rowspan="8">話務組</td> <td>王豔</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="12"> <td>王豔</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="13"> <td>王豔</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="14"> <td>王豔</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="15"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="16"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="17"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="18"> <td>總計</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> </table> </body> </html>
- 最終效果展示:
遇到的問題:目前對rowspan和colspan的理解不到位。後續仍需加強練習,完善最終效果。