原生 html 绘制表格
生活随笔
收集整理的這篇文章主要介紹了
原生 html 绘制表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
心血來潮，打開自己電腦的 idea 找到 n 久之前自己練手的 demo, 覺得還挺有用的，就隨手記錄一下咯。如果各位看官有更加便捷的方式或插件繪制表格的方法也可以留言討論一下哈。
實現效果：
完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>學生成績表</title> </head> <body><!--rowspan: 跨幾行 colspan: 跨幾列 cellspacing: 單元格之間的間距 cellpadding: 文字到單元格邊框的間距 bgcolor: 表格背景顏色 --> <table width="800px" border="1px" cellspacing="0px" cellpadding="10px" align="center" bgcolor="#fff"><!--表格的標題--><caption>學生成績表</caption><!--第一行--><tr><th>編號</th><th>姓名</th><th>性別</th><th>成績</th></tr><tbody align="center"><!--第二行--><tr><td>100</td><td>潘金蓮</td><td>女</td><td>80</td></tr><!--第三行--><tr><td>200</td><td>武大郎</td><td>男</td><td rowspan="2">90</td></tr><!--第四行--><tr><td>300</td><td>紅太狼</td><td>女</td></tr></tbody><!--第五行--><tfoot align="center"><tr><td>總成績</td><td colspan="3">900</td></tr></tfoot> </table><table width="800px" border="1px" cellspacing="0px" cellpadding="3px" align="center" style="margin: 100px auto;"><!--表格的標題--><caption style="font-size: 22px;">員工出差申請單</caption><!--第一行--><tbody align="center"><!--第一行--><tr><td>出差人</td><td>JEECG用戶</td><td>部門</td><td><input value="研發部"/></td></tr><!--第二行--><tr><td>目的地</td><td><select><option value="1">1</option><option value="2" selected>2</option></select></td><td>項目名稱</td><td><input name="radioGroup" type="text" value=""></td></tr><!--第四行--><tr><td>實際返回時間</td><td><input name="radioGroup" type="text" value=""></td><td>出差天數</td><td><input name="radioGroup" type="text" value=""></td></tr><tr><td>出差經費支出</td><td colspan="3"><input name="radioGroup" type="radio" value="1" >預支借款<input name="radioGroup" type="radio" value="2" checked>個人墊付</td></tr><tr><td>出發地</td><td><input name="radioGroup" value="1"></td><td>出行工具</td><td><input name="radioGroup" type="radio" value="1">客車<input name="radioGroup" type="radio" value="2">火車<input name="radioGroup" type="radio" value="3" >飛機</td></tr><tr><td rowspan="2">出差經費支出說明</td><td colspan="3"><textarea name="radioGroup" value="" style="max-width: 670px;"></textarea></td></tr><tr></tr><tr><td>部門領導審核</td><td><input name="radioGroup" type="text" value=""></td><td>財務審核</td><td><input name="radioGroup" type="text" value=""></td></tr><tr><td>出納放款</td><td><input name="radioGroup" type="text" value=""></td><td>總經理審核</td><td><input name="radioGroup" type="text" value=""></td></tr></tbody><!--第五行--><tfoot align="center"></tfoot> </table> </body> <style></style> </html>總結
以上是生活随笔為你收集整理的原生 html 绘制表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 10分钟教你如何在win10上操作win
- 下一篇： tkmybatis 默认值 问题