使用HTML表格制作简易的个人简历表
生活随笔
收集整理的這篇文章主要介紹了
使用HTML表格制作简易的个人简历表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用HTML表格制作簡易的個人簡歷表
一、創建過程
二、原理
主要使用HTML表格的不規則表格屬性以及HTML表格的基本屬性
三、使用的主要代碼
四、主要代碼的基本元素代碼
table屬性:border:邊框
cellpadding:單元格的內邊距(單元格邊框與內容之間的距離)
cellspacing:單元格的外邊距(單元格之間的距離)
width:寬度
height:高度
align:對齊方式(整個表格)
bgcolor 背景顏色(純色填充)
bordercolor 邊框顏色
background: 背景圖片
tr屬性(行)
tr是沒有寬高屬性的
align:水平對齊方式(內容)
valign:垂直對齊方式
td屬性(單元格)
width :每個單元格的寬度
height:每個單元格的高度
align:水平(單個單元格的內容)
valign:垂直
跨行 rowspan屬性 縱向向下 包含自己
跨列 colspan屬性 橫向向右 包含自己
五、主要代碼及注釋
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><table border="1" cellpadding="0" cellspacing="0" width="700px" height="1000px" align="center">/*創建表格 設置邊框為1 設置單元格內邊距和外邊距都為0 設置寬度為700像素 高度為1000像素并且將表格整體居中*/<caption><b>個人簡歷</b></caption>/*創建表格標題*/<tr><td colspan="8" rowspan="2" align="center"><b>個人求職簡歷</b></td>/*跨行合并8格,跨列合并兩格并將表格內容居中*/</tr><tr></tr><tr><td align="center" width="13%" height="3%">姓名</td>/*將單元格內容居中并設置寬度為13%高度3%*/<td colspan="2" width="24%"></td><td align="center" width="13%">性別</td><td colspan="2" width="24%"></td><td colspan="2" rowspan="6" width="26%"></td></tr><tr><td align="center" height="3%">年齡</td><td colspan="2"></td><td align="center">出生日期</td><td colspan="2"></td></tr><tr><td align="center" height="3%">所在城市</td><td colspan="2"></td><td align="center">從事行業</td><td colspan="2"></td></tr><tr><td align="center" height="3%">學歷</td><td colspan="2"></td><td align="center">名族</td><td colspan="2"></td></tr><tr><td align="center" height="3%">婚姻狀況</td><td colspan="2"></td><td align="center">身份證</td><td colspan="2"></td></tr><tr><td align="center" height="3%">畢業學校</td><td colspan="2"></td><td align="center">計算機能力</td><td colspan="2"></td></tr><tr><td colspan="8"></td></tr><tr><td rowspan="3" align="center">家庭成員</td><td colspan="2" align="center" height="3%">姓名</td><td align="center">成員關系</td><td colspan="2" align="center">職務</td><td colspan="2" align="center">工作單位</td></tr><tr><td colspan="2"></td><td></td><td colspan="2"></td><td colspan="2"></td></tr><tr><td colspan="2"></td><td></td><td colspan="2"></td><td colspan="2"></td></tr><tr><td colspan="8"></td></tr><tr><td rowspan="5" align="center">工作經歷</td><td colspan="2" align="center" height="3%">工作時間</td><td align="center">公司名稱</td><td colspan="2" align="center">職位名稱</td><td colspan="2" align="center">所屬部門</td></tr><tr><td colspan="2"></td><td></td><td colspan="2"></td><td colspan="2"></td></tr><tr><td rowspan="2" colspan="2"></td><td rowspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr><td colspan="2"></td><td colspan="2"></td></tr><tr><td colspan="2"></td><td></td><td colspan="2"></td><td colspan="2"></td></tr><tr><td colspan="8"></td></tr><tr><td rowspan="2" align="center">教育情況</td><td colspan="2" align="center" height="3%">時間</td><td align="center">學校</td><td colspan="4" align="center">學歷</td></tr><tr><td colspan="2"></td><td></td><td colspan="4"></td></tr><tr><td colspan="8"></td></tr></tr><tr><td rowspan="2" align="center">培訓經歷</td><td colspan="2" align="center" height="3%">時間</td><td align="center">培訓機構</td><td colspan="4" align="center">培訓內容</td></tr><tr><td colspan="2"></td><td></td><td colspan="4"></td></tr><tr><td align="center">備注</td><td colspan="7"></td></tr><tr><td colspan="8"></td></tr><tr><td rowspan="4" align="center">自我評價</td><td rowspan="4" colspan="7"></td></tr><tr></tr><tr></tr><tr></tr></table></body> </html>六、效果圖
| 個人求職簡歷 | |||||||
| 姓名 | 性別 | ||||||
| 年齡 | 出生日期 | ||||||
| 所在城市 | 從事行業 | ||||||
| 學歷 | 名族 | ||||||
| 婚姻狀況 | 身份證 | ||||||
| 畢業學校 | 計算機能力 | ||||||
| 家庭成員 | 姓名 | 成員關系 | 職務 | 工作單位 | |||
| 工作經歷 | 工作時間 | 公司名稱 | 職位名稱 | 所屬部門 | |||
| 教育情況 | 時間 | 學校 | 學歷 | ||||
| 培訓經歷 | 時間 | 培訓機構 | 培訓內容 | ||||
| 備注 | |||||||
| 自我評價 | |||||||
總結
以上是生活随笔為你收集整理的使用HTML表格制作简易的个人简历表的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 项目记录-”海迪康”ipcamera客户
- 下一篇: 2017年html5行业报告,云适配发布