效果圖和代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>課程表</title> <style type="text/css"> #tab{ margin: 0 auto; width: 70%; height: 800px; font-size: 18px; font-weight: bold; } body{ background-color: cadetblue; } </style> </head> <body> <h1 align="center" style="color: crimson;">歡迎進入課程表頁面</h1> <!-- 表格屬性 align lefe、center、right 規定表格相對周圍元素的對齊方式 border 1或 "" 規定表格單元是否有邊框 width 像素或百分比 規定表格的寬度 cellpadding 規定表格之間的空白,也就是內容與邊框的距離 cellspacing 規定單元格與單元格之間的距離 thead:用於定義表格的頭部,thead內部必須有tr標簽,一般是位於第一行 tbody:用於定義表格的主體,主要用於放數據本體 合並單元格: rowspan="合並單元格的個數" 跨行合並 colspan="合並單元格的個數" 跨列合並 --> <table id="tab" border="3" cellpadding="20" cellspacing="1"> <thead> <tr> <th colspan="8">課程表</th> </tr> <tr><td></td> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> </thead> <tbody> <tr> <td rowspan="2">上午</td> <td>大學英語(二)1-311</td> <td rowspan="2">軟件測試技術4-409</td> <td rowspan="2">網頁設計與制作4-409</td> <td>大學英語(二)1-314</td> <td>空</td> <td rowspan="6">空</td> <td rowspan="6">空</td> </tr> <tr> <td>空</td> <td>空</td> <td>毛中概論1-409</td> </tr> <tr> <td rowspan="2">下午</td> <td>Linux操作系統基礎4-509</td> <td rowspan="2">空</td> <td>毛中概論1-409</td> <td rowspan="2">離散結構4-511B</td> <td rowspan="2">空</td> </tr> <tr> <td>武術運動</td> <td>Linux操作系統基礎4-509</td> </tr> <tr> <td rowspan="2">晚上</td> <td rowspan="2">空</td> <td rowspan="2">空</td> <td>性健康教育1-235</td> <td rowspan="2">空</td> <td rowspan="2">程序設計基礎4-417</td> </tr> <tr> <td>空</td> </tr> </tbody> </table> </body> </html>