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