用html简单做一个课程表。
話不多說,直接上代碼,代碼后有效果圖。
<!DOCTYPE html>
<html lang="en">
<head>
? ? <title>課程表</title>
</head>
<body>
? ? <h3 align="center">課程表</h3>
? ? <table border="1" contenteditable="20" width="800" align="center" height="500">
? ? ? ? <tr>
? ? ? ? ? ? <th>項目</th>
? ? ? ? ? ? <th colspan="5">上課</th>
? ? ? ? ? ? <th colspan="2">休息</th>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td colspan="1">星期</td>
? ? ? ? ? ? <td>星期一</td>
? ? ? ? ? ? <td>星期二</td>
? ? ? ? ? ? <td>星期三</td>
? ? ? ? ? ? <td>星期四</td>
? ? ? ? ? ? <td>星期五</td>
? ? ? ? ? ? <td>星期六</td>
? ? ? ? ? ? <td>星期日</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td rowspan="4">上午</td>
? ? ? ? ? ? <td>語文</td>
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td>物理</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? ? ? <td rowspan="4">休息</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>地理</td>
? ? ? ? ? ? <td>歷史</td>
? ? ? ? ? ? <td>化學</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td>化學</td>
? ? ? ? ? ? <td>語文</td>
? ? ? ? ? ? <td>體育</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td>政治</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td>體育</td>
? ? ? ? ? ? <td>歷史</td>
? ? ? ? ? ? <td>地理</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td rowspan="2">下午</td>
? ? ? ? ? ? <td>語文</td>
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td>物理</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? ? ? <td>英語</td>
? ? ? ? ? ? <td rowspan="2">休息</td>
? ? ? ? </tr>
? ? ? ? <tr align="center">
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>數學</td>
? ? ? ? ? ? <td>地理</td>
? ? ? ? ? ? <td>歷史</td>
? ? ? ? ? ? <td>化學</td>
? ? ? ? ? ? <td>計算機</td>
? ? ? ? </tr>
? ? </table>
</body>
</html>
下面是效果圖。
主要使用的是一些關于表格的代碼:
1、table表示表格
2、tr定義行
3、td定義單元格
4、表頭單元格標簽<th></th>(包裹在tr中),文字會加粗居中顯示
5、align="center"居中
6、border="1"/""邊框
7、cellpadding = "1" 單元格邊和內容之間的距離
8、cellspacing="2"單元格與單元格之間的距離
9、width="100" height="500"表格的寬度和高度
10、<thead></thead>和<tbody></tbody>用于語義化表格
11、rowspan="合并的單元格數量"
12、colspan="合并的單元格數量"
總結
以上是生活随笔為你收集整理的用html简单做一个课程表。的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 树莓派挂载斐讯K3上SMB共享的移动硬盘
- 下一篇: 服务器vmware新建虚拟机教程,如何创