HTML+CSS 輕松入門之HTML+CSS 綜合實(shí)例(二)
下面我們要做一個個人簡歷
表格布局,這里面我們將用到合并單元格,橫向和縱向,代碼如下:
<!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è)時間</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ì)證,辦公自動化,等</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">個人特點(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>
小伙伴們回去要試一下,雖然在網(wǎng)站開發(fā)中,我們不常用表格來布局,但這是最簡單的布局方式