HTML+CSS Easy to get started with HTML+CSS comprehensive examples (2)
Next we are going to make a personal resume
Table layout, where we will use merged cells, horizontal and vertical, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php 這中文網(wǎng) 實(shí)例二</title>
<style type="text/css">
table{
width:650px;
border:1px solid black;
text-align:center;
margin:0 auto;
}
td{
border:1px solid black;
width:50px;
height:45px;
}
.t1{
width:50px;
}
.t2{
width:80px;
height:55px;
}
.t3{
height:80px;
}
.tit{
font-weight:bold;
}
</style>
</head>
<body>
<table rules="all">
<tr class="t1">
<td class="tit">姓名</td>
<td>王茵</td>
<td class="tit">性別</td>
<td>女</td>
<td class="tit">出生日期</td>
<td>1985.6.25</td>
<td rowspan="3">相片</td>
</tr>
<tr class="t1">
<td class="tit">籍貫</td>
<td>安徽</td>
<td class="tit">民族</td>
<td>漢</td>
<td class="tit">身體狀況</td>
<td>健康</td>
</tr>
<tr class="t1">
<td class="tit">政治面貌</td>
<td>團(tuán)員</td>
<td class="tit">身高</td>
<td>165</td>
<td class="tit">學(xué)歷</td>
<td>本科</td>
</tr>
<tr class="t2">
<td class="tit">畢業(yè)學(xué)校</td>
<td colspan="2">安徽大學(xué)</td>
<td class="tit">所學(xué)專業(yè)</td>
<td colspan="3">計(jì)算機(jī)應(yīng)用技術(shù)</td>
</tr>
<tr class="t2">
<td class="tit">畢業(yè)時(shí)間</td>
<td colspan="2">2014.6.8</td>
<td class="tit">聯(lián)系電話</td>
<td colspan="3">18856325968</td>
</tr>
<tr class="t2">
<td class="tit">郵箱</td>
<td colspan="2">wangyin@163.com</td>
<td class="tit">家庭住址</td>
<td colspan="3">安徽省合肥市蜀山區(qū)科學(xué)大道健康小區(qū)2105室</td>
</tr>
<tr class="t3">
<td class="tit">擁有證書</td>
<td colspan="6">駕駛證，會計(jì)證，辦公自動(dòng)化，等</td>
</tr>
<tr class="t3">
<td class="tit">專業(yè)技能</td>
<td colspan="6">photoshop php java javascript</td>
</tr>
<tr class="t3">
<td class="tit">工作經(jīng)驗(yàn)</td>
<td colspan="6">某某公司前端開發(fā)（包括美工）
某某公司前端開發(fā)（包括美工）
</td>
</tr>
<tr class="t3">
<td class="tit">個(gè)人特點(diǎn)</td>
<td colspan="6">愛好學(xué)習(xí)，喜歡挑戰(zhàn)有難度的工作</td>
</tr>
<tr class="t3">
<td colspan="7">相信您的信任與我的努力將為我們帶來共同的成功，希望我能為貴公司貢獻(xiàn)自己的力量！</td>
</tr>
</table>
</body>
</html>Friends, I want to try it when I go back , although in website development, we don’t often use tables for layout, but this is the simplest layout method
