如何使用Html制作课程表
构建环境,在VScode中添加一个.html的后缀名
tip:命名最好用英文
搭建框架
使用table表格来设置表格
快速生成
添加数据
tr是列元素
td是行元素
给课表中的字体设置颜色
使用CSS在style中给字体设置颜色
给课表设置不同风格的边框
给课程表设置边框
- 最终结果
代码
全部代码 内联代码片
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程表</title>
<style>
td{
/* 设置边框颜色 */
border-color:springgreen skyblue pink;
/* 边框大小 */
border-width: 8px;
/* 边框类型 solid(实线) dotted(虚点线) dashed(虚直线) double(双线)*/
border-style: double;
/* 设置字体的颜色 */
color:blueviolet;
/* 设置字体的大小 */
font-size: 30px;
}
</style>
</head>
<body>
<table cellpadding="25px" cellspacing="10px">
<tr>
<td>星期</td>
<td class="re">星期一</td>
<td class="re">星期二</td>
<td class="re">星期三</td>
<td class="re">星期四</td>
<td class="re">星期五</td>
<td class="re">星期六</td>
<td class="re">星期日</td>
</tr>
<tr>
<td>1</td>
<td>计算机网络</td>
<td>大学物理</td>
<td>Python爬虫</td>
<td>无</td>
<td>计算机网络</td>
<td>无</td>
<td>无</td>
</tr>
<tr>
<td>2</td>
<td>Python爬虫</td>
<td>概率论与数理统计</td>
<td>无</td>
<td>大学英语</td>
<td>体育</td>
<td>无</td>
<td>无</td>
</tr>
<tr>
<td>3</td>
<td>数组逻辑</td>
<td>马克思主义</td>
<td>无</td>
<td>大学物理实验</td>
<td>形势与政策</td>
<td>无</td>
<td>无</td>
</tr>
<tr>
<td>4</td>
<td>数字逻辑实验</td>
<td>无</td>
<td>无</td>
<td>无</td>
<td>大学英语</td>
<td>无</td>
<td>无</td>
</tr>
</table>
</body>
</html>