當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

用HTML+CSS编写课程表及个人简历表

發布時間：2024/3/12 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了用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等標簽形成一個八行九列的表格。table指整個表，tbody指表的主體內容，th一般用作表頭具有加粗、居中顯示的功能，tr表示行，td表示列，其中rowspan、colspan分別表示合并行、和并列。border="1"表示給表格加1像素的邊框線，此時顯示的邊框線是雙重的，border-collapse:collapse;表示將表格邊框線間的間距去掉，讓表格行列之間的邊框線重疊成一條，align="center"表示讓整個課程表在網頁中居中顯示，text-align: center;表示讓表中的內容居中顯示在表里面。

4、編寫如下圖個人簡歷表：

5、代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>個人簡歷</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">個人簡歷</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>畢業院校</td><td></td><td>學歷</td><td></td></tr><tr><td>專業</td><td></td><td>外語水平</td><td></td></tr><tr><td>聯系方式</td><td></td><td>郵箱</td><td></td></tr><tr><td>籍貫</td><td colspan="3"></td></tr><tr><td colspan="4">職業技能</td></tr><tr><td colspan="4" height="40px;">1、<br>2、<br></td></tr><tr><td colspan="4">項目經驗</td></tr><tr><td colspan="2">智慧校園選課系統</td><td colspan="2">2019年1月-2019年6月</td></tr><tr><td colspan="4">項目描述</td></tr><tr><td colspan="4" height="60px">1、<br>2、<br>3、<br></td></tr><tr><td>預覽地址</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">這里表示插入一個圖片，src里面寫的是插入圖片的路徑，而這里插入圖片用的是相對路徑的方法，斜線前的兩個點表示當前目錄下的上一級目錄，如若斜線前只有一個點則表示當前目錄，../img/lidy.jpg則可以理解為存放html文件的那個文件目錄下的上一級目錄中文件夾名為img里面的名為lidy后綴名為jpg的圖片。<tbody></tbody>表示表體內容，這里解釋一下為何要加入tbody，當我們要往表table添加行tr的時候，我們不能之間添加到table下的tr,而是要添加到tbody下的tr，之前講到說tbody表示表體內容，而tr則是內容中的一行，用父子關系賴講table表示爺爺，tbody表示父親，tr表示兒子，因此，為了讓我們方便理解，則加上tbody，避免我們在后面需要對表進一步操作時造成誤導。

7、總結：在制作表的時候由于有一些列沒有添加內容，尤其是寫個人簡歷表的時候，剛剛初步編寫出來的表在網頁中顯示的畸形的，因為有的列沒有內容，而列的寬高有其內部的子元素決定的，當其中不存在任何元素是會顯得很小，因此剛剛編寫沒經過調試的個人簡歷表甚是難看，經過給列td設定一個寬度td{width: 90px;}后表格的，整體變得好看了許多，因此在HTML的學習過程中，一定要注意每一個標簽特有的性質，例如：h1-h3具有margin、font-size、font-weight等特性。然后根據自己的需要將其修改成自己需要的樣式。

轉載于:https://www.cnblogs.com/lidyfamily/p/11268550.html

總結

以上是生活随笔為你收集整理的用HTML+CSS编写课程表及个人简历表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：音视频OSD——制作ASCII点阵字模并
下一篇： mes系统故障_MES系统常见问题解析