【学习笔记9】HTML案例-课表

最新推荐文章于 2022-03-09 19:10:10 发布
最新推荐文章于 2022-03-09 19:10:10 发布
阅读量75 收藏
点赞数
分类专栏： HTML 学习 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60525480/article/details/119358252
版权
学习 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
HTML
12 篇文章 0 订阅
订阅专栏

编写课表并且有课时用不同的背景色表示

代码：

<!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>Document</title>

</head>

<body>

    <table align="center" border="1" cellspacing="0">

        <tr >

            <th style="width: 20px;"></th>

            <th style="width: 100px;">周一</th>

            <th style="width: 100px;">周二</th>

            <th style="width: 100px;">周三</th>

            <th style="width: 100px;">周四</th>

            <th style="width: 100px;">周五</th>

        </tr>

        <!-- 上午一二节课 -->

        <tr align="center" height="30px" style="color: white;">

            <td style="color: black;">1<br>8.30</td>

            <td rowspan="2" bgcolor="red">大学英语（IV）@10203</td>

            <td></td>

            <td rowspan="2" bgcolor="lightblue">体育（IV）</td>

            <td colspan="2"></td>

        </tr>

        <tr align="center" height="30px" >

            <td>2<br>9.30</td>

            <td></td>

            <td colspan="2"></td>

        </tr>

        <!-- 上午三四节课 -->

        <tr align="center" height="30px" style="color: white;">

            <td style="color: black;">3<br>10.30</td>

            <td ></td>

            <td rowspan="2" bgcolor="orange">信号与系统@11302</td>

            <td rowspan="2" bgcolor="green">形势与政策（IV）@15208</td>

            <td></td>

            <td rowspan="2" bgcolor="#2694ab">数据结构与算法分析</td>

        </tr>

        <tr align="center" height="30px">

            <td>4<br>11.30</td>

            <td></td>

            <td></td>

        </tr>

        <!-- 下午一二节课 -->

        <tr align="center" height="30px" style="color: white;">

            <td style="color: black;">5<br>12.30</td>

            <td></td>

            <td rowspan="2" bgcolor="#348498">模拟电子技术基础@16204</td>

            <td></td>

            <td rowspan="2" bgcolor="#2d248a">电装实习@11301</td>

            <td></td>

        </tr>

        <tr align="center" height="30px" >

            <td>6<br>14.30</td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <!-- 下午三四节 -->

        <tr align="center" height="30px" style="color: white;">

            <td style="color: black;">7<br>15.30</td>

            <td rowspan="2" bgcolor="#f29c2b">毛概@14208</td>

            <td></td>

            <td rowspan="2" bgcolor="#1ee3cf">电路、信号与系统实验</td>

            <td colspan="2"></td>

        </tr>

        <tr align="center" height="30px">

            <td >8<br>16.30</td>

            <td></td>

            <td colspan="2"></td>

        </tr>

        <!-- 晚上1-4节 -->

        <tr align="center" height="30px">

            <td>9<br>17.30</td>

            <td colspan="4"></td>

            <td rowspan="2" bgcolor="#6b48ff" style="color: white;">信号与系统</td>

        </tr>

        <tr align="center" height="30px">

            <td>10<br>18.30</td>

            <td colspan="3"></td>

            <td rowspan="2" bgcolor="#ff8a5c" style="color: white;">大学体育</td>

        </tr>

        <tr align="center" height="30px" >

            <td>11<br>19.30</td>

            <td colspan="3"></td>

            <td></td>

        </tr>

        <tr align="center" height="30px">

            <td>12<br>20.30</td>

            <td bgcolor="#4bc2c5" style="color: white;">选修</td>

            <td colspan="4"></td>

            

        </tr>

    </table>

</body>

</html>

结果：

 

m0_1229
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
MFC学习笔记--案例--销售系统
09-30
MFC学习笔记--案例--销售系统，txt文件存储，格式固定，文件内容增加、删除、修改等，简单控件的使用，文本框，下拉框，表格，界面切换等，缓存，方便以后复习
python学习笔记(08)-案例实操：列表去重
01-21
立即学习:https://edu.csdn.net/course/play/24797/282168?utm_source=blogtoedu 除去列表里重复元素： 新列表搜集法（可以保证元素顺序） 创建新列表 遍历源列表的所有元素，若该元素不在新列表中，将元素添加到新...
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
最新发布
02-06
zookeeper云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-...
《WebGL编程指南》学习笔记webgl-study-notes
01-12
《WebGL编程指南》学习笔记webgl-study-notes
【学习笔记25】画布canvas+案例
m0_60525480的博客
09-16 1835
canvas属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像 属性： width 默认值 300px height 默认值 150px 注意点：canvas需要写闭合标签 <canvas></canvas> 一般不建议使用css设置它的宽高 方法： ...
Node笔记
m0_60525480的博客
03-06 523
1.nodejs:一种js解释器 单页面程序：（浏览器端渲染语言）打包之后只有一个页面，不利于SEO做检索，一般情况下部署在静态服务器(apache)下 问：什么是浏览器端渲染？ 多页面程序：（服务器端渲染） 多页面程序开发：nuxt(Vue)/next(react) 使用nuxt(vue) 在node环境中npx create-nuxt-app 名称 nodejs相关api： 1）http：(网络模块)提供HTTP服务器功能 2）fs：与文件系统交互 3）url(统一资源定位符...
react笔记
m0_60525480的博客
03-09 455
1.html文件中引入库：react、react-dom、Babel <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"&gt...
【学习笔记1】Git
m0_60525480的博客
07-27 379
学习内容1：建立并连接仓库 步骤：1.在www.gitee.com上创建了自己的账号，并创建了自己的仓库（此为云端仓库）；2.建立需要上传的文件夹及文件（此为本地仓库），打开需上传文件的所在位置并在文件地址栏中输入cmd，然后输入命令git init，此时会在目标文件夹中建立一个隐藏的 .git文件，此时本地仓库已是git仓库；3.继续输入以下指令： git add * //Enter以下，*代表该文件夹中的所有文件 git commit -m "first commit" //将文件内容提交.
【学习笔记3】Axure
m0_60525480的博客
07-28 335
Axure 第一阶段：页面重构 工具：Axure 原型：是一个产品或数据系统的一个基本实用的模型 原型功能：包括UI、功能（交互） 使用者：产品经理、交互设计师、UI设计师、架构师、程序员 Axure软件可以将原型文件，rp生成HTML或图片以供演示；做出交互效果，直接通过 拖拽主键生成页面，能够快速模拟出高速保真的页面原型 原型中需要重复使用的模块可以做成母版 Axure的使用： 1.文本框里的交互效果设置：在交互界面里在"输入提示...
【学习笔记24】jQuery
m0_60525480的博客
09-14 319
1)使用 1.导入 jquery.min.js 2.应用:$（表示jQuery） 2)$用法 $(function(){}) 在文档加载完毕后执行 $(css选择器) 通过css选择器指定dom对象，并且封装到jQuery这个类数组对象中 $("<div><span><span></div>") 将字符串中的元素转换为dom对象，再封装到jQuery对象中 $(dom对象) 将dom对象转换为jQ...
用vscode时遇到的问题
m0_60525480的博客
12-09 278
npm无法将“npm”项识别为cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。最近换了台新电脑xiaoxinAir，在写代码安装node,yarn的过程中遇到一些问题，因而记录下问题及找到的解决方法。4.用navicat新建表时用到了timestamp属性，出现1294错误。原因对长度进行了设置，timestamp属性本身自带长度，不需要再设置了。解决方法安装插件openinbroswer。解决方法将长度改为0。...
【学习笔记26】事件拖放
m0_60525480的博客
09-17 240
拖放事件 1.dragstart按下鼠标按键并开始移动鼠标，会触发dragstart事件,我们通过ondragstart来调用方法 drag 当dragstart开始，会持续触发drag事件，类似mousemove事件 dragend 当拖放停止时（即鼠标按键抬起时），会触发 dragenter 拖动元素被拖动到放置元素上 dragleave 拖动元素从放置元素上移出 dragover 拖动元素在放置元素范围内移动 drop 放置事件 拖放事件 生命周期:dragstart-drag-dra
【学习笔记14】动画案例：同心圆的呼吸效果
m0_60525480的博客
08-18 209
代码： <!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&
【学习笔记8】HTML案例3：个人简历表格设计
m0_60525480的博客
08-03 152
介绍：设计个人简历表格 代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"&g...
【学习笔记15】HTML&CSS错题整理
m0_60525480的博客
08-18 116
1.form元素的enctype属性值默认是：-application/x-www-form-urlencoded 2.HTML元素的核心属性有哪些？ id、class、title、style 3.display：none与visibility：hidden的区别： 前者隐藏对应的元素但不挤占该元素原来的空间；后者隐藏对应的元素，但会挤占该元素原来的空间。 4.如何使用响应式布局： 方法1：通过@media进行媒体查询，在不同的网页加载中执行不同的css代码； 方法2：利用boo...
【学习笔记10】HTML补充+H5对input的扩展
m0_60525480的博客
08-04 112
1.HTML的补充： （1）progress：进度条 max:默认为1 value：0-1之间，小数 <form action="" method="post"> 指定：<progress value="70" max="100"></progress>70% <br> 指定：<progress value="30" max="1...
【学习笔记17】媒体查询和网站推荐
m0_60525480的博客
08-25 111
媒体查询由一个可选的媒体类型，以及若干个css表达式这两部分组成。 用媒体查询来实现响应式布局。 响应式媒体查询尺寸： 在link标签中写：且src='相应的css名称' @media screen and (max-width: 768px) 超小屏 @media screen and (min-width:768px) and (max-width: 992px) 小屏 @media screen and (min-width:992px) and (max-width: 1200px) 中
【学习笔记23】js笔记整理
m0_60525480的博客
09-14 104
JavaScript的组成部分： - ECMAScript，描述了该语言的语法和基本对象。 - 文档对象模型（DOM），描述处理网页内容的方法和接口。 - 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 Day01 1.js特征： ①解释型的，依赖于运行环境（nodejs：基础语法+服务器端、浏览器：基础语法+DOM+BOM） ②弱数据类型语言 ③顺序执行（自上而下） ④即可以作为前端开发语言，又可以作为服务器语言，取决于运行环境（浏览器、操作系统nodejs） （Linux：node，默认
网安学习笔记 1 ---- ms17-010 的复现
09-10
网安学习笔记中提到了复现ms17-010漏洞的方法。具体步骤如下： 1. 首先，需要获取目标服务器的IP地址和端口号。可以使用arp命令查看目标服务器的arp表来获取IP地址，如"arp -a"命令。 2. 下一步是获取目标服务器的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值