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等特性。然后根據自己的需要將其修改成自己需要的樣式。