用HTML+CSS编写课程表及个人简历表
1、編寫如下圖課程表：
2、代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>課程表</title><style type="text/css">table{border-collapse:collapse;margin-top: 10px;}td{text-align: center;}</style> </head> <body><table border="1" align="center" width="700px"><tbody><!-- 表頭 --><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><!-- 上午上 --><tr><td rowspan="2">上午</td><td>9：00-10：30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><!-- 上午下 --><tr><td>11:00-11:30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><!-- 中午休息 --><tr><td colspan="9">中午（11：30-14：00）</td></tr><!-- 下午上 --><tr><td rowspan="2">下午</td><td>14:00-15:30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><!-- 下午下 --><tr><td>16:00-17:30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><!-- 晚飯 --><tr><td colspan="9">晚飯(17:30-18:30)</td></tr><!-- 晚上 --><tr><td>晚上</td><td>18：30-20：30</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table> </body> </html>?
3、編寫使用的代碼及其具體用法：
該課程表使用table、tbody、tr、td、th等標(biāo)簽形成一個(gè)八行九列的表格。table指整個(gè)表，tbody指表的主體內(nèi)容，th一般用作表頭具有加粗、居中顯示的功能，tr表示行，td表示列，其中rowspan、colspan分別表示合并行、和并列。border="1"表示給表格加1像素的邊框線，此時(shí)顯示的邊框線是雙重的，border-collapse:collapse;表示將表格邊框線間的間距去掉，讓表格行列之間的邊框線重疊成一條，align="center"表示讓整個(gè)課程表在網(wǎng)頁(yè)中居中顯示，text-align: center;表示讓表中的內(nèi)容居中顯示在表里面。
?
4、編寫如下圖個(gè)人簡(jiǎn)歷表：
5、代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>個(gè)人簡(jiǎn)歷</title><style type="text/css">table{border-collapse:collapse;margin-top: 10px;}td{width: 90px; }</style> </head> <body><table border="1" width="360px;" align="center"><tbody><tr><th colspan="4" align="center">個(gè)人簡(jiǎn)歷</th></tr><tr><th colspan="2" height="60px" align="center">基本信息</th><td colspan="2" rowspan="5"><img src="../img/lidy.jpg"></td> </tr><tr><td>姓名</td><td></td></tr><tr><td>生日</td><td></td></tr><tr><td>性別</td><td></td></tr><tr><td>民族</td><td></td></tr><tr><td>畢業(yè)院校</td><td></td><td>學(xué)歷</td><td></td></tr><tr><td>專業(yè)</td><td></td><td>外語水平</td><td></td></tr><tr><td>聯(lián)系方式</td><td></td><td>郵箱</td><td></td></tr><tr><td>籍貫</td><td colspan="3"></td></tr><tr><td colspan="4">職業(yè)技能</td></tr><tr><td colspan="4" height="40px;">1、<br>2、<br></td></tr><tr><td colspan="4">項(xiàng)目經(jīng)驗(yàn)</td></tr><tr><td colspan="2">智慧校園選課系統(tǒng)</td><td colspan="2">2019年1月-2019年6月</td></tr><tr><td colspan="4">項(xiàng)目描述</td></tr><tr><td colspan="4" height="60px">1、<br>2、<br>3、<br></td></tr><tr><td>預(yù)覽地址</td><td colspan="3"></td></tr><tr><td>github</td><td colspan="3"></td></tr></tbody></table></body> </html>?
6、編寫使用的代碼及其具體用法：
<img src="../img/lidy.jpg">這里表示插入一個(gè)圖片，src里面寫的是插入圖片的路徑，而這里插入圖片用的是相對(duì)路徑的方法，斜線前的兩個(gè)點(diǎn)表示當(dāng)前目錄下的上一級(jí)目錄，如若斜線前只有一個(gè)點(diǎn)則表示當(dāng)前目錄，../img/lidy.jpg則可以理解為存放html文件的那個(gè)文件目錄下的上一級(jí)目錄中文件夾名為img里面的名為lidy后綴名為jpg的圖片。<tbody></tbody>表示表體內(nèi)容，這里解釋一下為何要加入tbody，當(dāng)我們要往表table添加行tr的時(shí)候，我們不能之間添加到table下的tr,而是要添加到tbody下的tr，之前講到說tbody表示表體內(nèi)容，而tr則是內(nèi)容中的一行，用父子關(guān)系賴講table表示爺爺，tbody表示父親，tr表示兒子，因此，為了讓我們方便理解，則加上tbody，避免我們?cè)诤竺嫘枰獙?duì)表進(jìn)一步操作時(shí)造成誤導(dǎo)。
7、總結(jié)：在制作表的時(shí)候由于有一些列沒有添加內(nèi)容，尤其是寫個(gè)人簡(jiǎn)歷表的時(shí)候，剛剛初步編寫出來的表在網(wǎng)頁(yè)中顯示的畸形的，因?yàn)橛械牧袥]有內(nèi)容，而列的寬高有其內(nèi)部的子元素決定的，當(dāng)其中不存在任何元素是會(huì)顯得很小，因此剛剛編寫沒經(jīng)過調(diào)試的個(gè)人簡(jiǎn)歷表甚是難看，經(jīng)過給列td設(shè)定一個(gè)寬度td{width: 90px;}后表格的，整體變得好看了許多，因此在HTML的學(xué)習(xí)過程中，一定要注意每一個(gè)標(biāo)簽特有的性質(zhì)，例如：h1-h3具有margin、font-size、font-weight等特性。然后根據(jù)自己的需要將其修改成自己需要的樣式。
?
轉(zhuǎn)載于:https://www.cnblogs.com/lidyfamily/p/11268550.html
總結(jié)
以上是生活随笔為你收集整理的用HTML+CSS编写课程表及个人简历表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 音视频OSD——制作ASCII点阵字模并
- 下一篇： HTML_个人简历表