HTML5商務表格的設計與實現
阿新 • • 發佈：2018-12-05
用HTML5、CSS3實現常見的商務表格，程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商務表格的設計</title> <style type="text/css"> .table{ height: 800; } .table-con th,tr{ width: 350px; padding: 7px; } .table-con th{ background-color: orange;/*背景顏色*/ color: #FFFFFF; } .oreange{ background-color: #FFEDDB; } table{ text-align: left; } </style> </head> <body> <h3>商務表格的 設計</h3> <hr /> <div class="table"> <div class="table-con"> <table border="solid 1px" cellspacing="0" cellpadding="15px"> <caption>招聘資訊表</caption> <tr ><th >地點</th><th>招聘職位</th><th>公司</th></tr> <tr > <td>全國</td> <td>產品培訓</td> <td>騰訊</td> </tr> <tr class="oreange"> <td>全國</td> <td>前端開發</td> <td>阿里巴巴</td> </tr> <tr> <td>上海</td> <td>互動設計師</td> <td>網易遊戲</td> </tr> <tr class="oreange"> <td>北京</td> <td>視覺設計師</td> <td>360</td> </tr> <tr> <td>深圳</td> <td>資料分析</td> <td>IBM</td> </tr> <tr class="oreange"> <td>杭州</td> <td>資料研發工程師</td> <td>微軟</td> </tr> </table> </div> </div> </body> </html>