HTML5實現細線課程表

純H5實現的細線課程表

詳細代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
</head>
<body>
     <table width="300" height="200"  bgcolor="green" cellspacing="1" align="center">
          <caption>課程表</caption>
          <tr bgcolor="white">
             <th colspan="2" width="60"></th>
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
          </tr>
          <tr bgcolor="white">
              <td rowspan="2" width="50">上午</td>
              <td width="30">1</td>
              <td>語文</td>
              <td>數學</td>
              <td>物理</td>
              <td>化學</td>
              <td>生物</td>   
          </tr>
          <tr bgcolor="white">
              <td>2</td>
              <td>體育</td>
              <td>音樂</td>
              <td>幾何</td>
              <td>畫畫</td>
              <td>舞蹈</td>   
          </tr>
          <tr bgcolor="white">
              <td rowspan="2">下午</td>
              <td>1</td>
              <td>體育</td>
              <td>畫畫</td>
              <td>音樂</td>
              <td>語文</td>
              <td>音樂</td>   
          </tr>
          <tr bgcolor="white">
             <td>2</td>
             <td>英語</td>
             <td>舞蹈</td>
             <td>體育</td>
             <td>唱歌</td>
             <td>體育</td>
          </tr>
     </table>
</body>
</html>

效果圖:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章