使用html和css實現個人簡歷表單的制作

根據下列要求，做出下圖所示的個人簡歷（表單）

在這里插入圖片描述

表單要求

Ⅰ、表格整體的邊框為1像素，單元格間距為0，表格中前六列列寬均為100像素，第七列為200像素，表格整體在頁面上居中顯示；
Ⅱ、前五行的行高為40像素，第六行的行高為80像素，排列方式均為居中顯示；
Ⅲ、第一行合并了7列；第三行合并了三列；第四行合并了三列；第五行合并了五列；第六行合并了六列；照片的單元格合并了四行。

html代碼

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" cellspacing="0" align="center"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40"><th colspan="7">個人簡歷</th></tr><tr height="40" align="center"><td>姓名</td><td></td><td>性別</td><td></td><td>年齡</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>學歷</td><td></td><td>籍貫</td><td colspan="3"></td></tr><tr height="40" align="center"><td>電話</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>畢業院校</td><td colspan="5"></td></tr><tr height="80" align="center"><td>求職意向</td><td colspan="6"></td></tr></table></body>
</html>

CSS和html分開代碼

CSS文件{style.css}

/* styles.css *//* 設置表格樣式 */
table {border: 1px solid black;border-collapse: collapse;margin: auto; /* 居中顯示 */
}/* 設置表頭樣式 */
th {background-color: #ccc;height: 40px;
}/* 設置表格內容樣式 */
td {height: 40px;
}/* 設置照片單元格樣式 */
td[rowspan="4"] {vertical-align: middle; /* 垂直居中顯示 */
}/* 設置單元格內容水平和垂直居中顯示 */
td, th {text-align: center;vertical-align: middle;
}

HTML文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>個人簡歷</title><!-- 引入外部 CSS 文件 --><link rel="stylesheet" href="styles.css"></head><body><table border="1px" cellspacing="0" align="center"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40"><th colspan="7">個人簡歷</th></tr><tr height="40" align="center"><td>姓名</td><td></td><td>性別</td><td></td><td>年齡</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>學歷</td><td></td><td>籍貫</td><td colspan="3"></td></tr><tr height="40" align="center"><td>電話</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>畢業院校</td><td colspan="5"></td></tr><tr height="80" align="center"><td>求職意向</td><td colspan="6"></td></tr></table></body>
</html>

運行結果

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/10596.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/10596.shtml
英文地址，請注明出處：http://en.pswp.cn/web/10596.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！