利用Html和CSS做一张课程表

最新推荐文章于 2024-04-20 18:39:44 发布
最新推荐文章于 2024-04-20 18:39:44 发布
阅读量1.4w 收藏 13
点赞数 6
文章标签： HTML Table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1k2l45k/article/details/80315920
版权

一 思路

利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理

二 步骤

  • 建立一个七行六列的表格
  • 将第一列的第二行到第四行合并成一个单元格（rowspan）
  • 将第一列的第五行到第七行合并成一个单元格 （rowspan）
  • 在相应的单元格中填上时间和课程

三 注意点

  • 一定要将要合并的单元格注销掉

四 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                border: 1px solid #ccc;
                border-collapse: collapse;
                text-align: center;
            }
            tr,th,td{
                width: 80px;
                height: 30px;
                border: 1px solid #ccc;
            }

        </style>
    </head>
    <body>
        <table  align="center">
            <caption>课程表</caption>
            <thead>
                <tr>
                    <th></th>
                    <th>Monday</th>
                    <th>Tuseday</th>
                    <th>Wednsday</th>
                    <th>Thurday</th>
                    <th>Friday</th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">上午</td>
                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
                <tr>

                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
                <tr>

                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
                <tr>
                    <td rowspan="3">下午</td>
                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
                <tr>

                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
                <tr>

                    <td>Math</td>
                    <td>English</td>
                    <td>Chinese</td>
                    <td>History</td>
                    <td>Geography</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

五 结果截图

这里写图片描述

风筝风筝等等我
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html与css制作表格，并对表格上色
weixin_52272028的博客
04-01 729
<!DOCTYPE html> <html lang="zh-cn"> <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>
html前端学习记录，利用html+css创建简单课程表
AdSensca的博客
03-23 816
html+css创建简单课程表 设计思路 利用table,th,td表格标签建立基本框架，然后在其中填充div以添加样式 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
我的课程表（技术栈：Vue+node+vant+mysql，2024年最新阿里面试官的面评 都可以看吗
m0_60707538的博客
04-20 576
:class=“{current: loginMode}” @click=“dealLoginMode(true)”>登陆。time:[“周一”,“周二”,“周三”,“周四”,“周五”,“周六”,“周日”],res.end(“注册失败”);
html课程表（html+css）
weixin_30642029的博客
09-27 2034
<!DOCTYPE html> <head> <title> 课程表 </title> <style type="text/css"> .C3{border-top:40px rgb(101,147,74) solid;/*上边框宽度等于表 格第一行行高*/ width:0px;/*让容器宽度为0*/ ...
用HTML制作一个课程表
2201_75650749的博客
09-17 1785
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
html，css实现呼吸灯、课程表、个人简历
Azhangbiny的博客
11-17 360
1、html+css实现呼吸灯效果，如下图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆</title> <style> div { box-sizing: border-box; } .content { width: 400px; height: 6
用html写一个简单课表
tory886的博客
03-29 8782
html实例-课表 本文章主要介绍由html中的表格table来制作课表，完成图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的课表</title> <style type="text/css"> ...
前端，利用HTML和CSS制作的鲜花市场首页
07-08
前端，利用HTML和CSS制作的鲜花市场首页，有动态效果。 html部分代码 <!--顶部区域--> 鲜花"> <li><a href="#">首页</a></li> <li><a href="#">商城</a></li> <li><a href="#">产品</a></li> ...
利用HTML，CSS做电商网站的开发首页面.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
实训-利用HTML+CSS做响应式项目网页.rar
最新发布
06-19
CSS样式编写：利用CSS3技术，为网页添加样式。包括字体、颜色、背景、边框、阴影等效果的设置。同时，使用媒体查询（Media Queries）技术，实现响应式布局。 响应式布局实现：确保网页在不同屏幕尺寸下都能良好显示...
用html和css实现五星红旗
10-07
要用HTML和CSS实现五星红旗，首先需要明确五星红旗的结构。五星红旗总共由两个部分组成：红色背景和五颗黄色五角星。因此，我们可以利用HTML中的div标签作为容器，来实现五星红旗的布局。 要用HTML和CSS实现五星...
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
课表HTML源码
07-13
加入css的炫彩课表，加有 时钟效果
使用html和CSS做的华为高仿静态页面
10-18
初学前端做的静态页面，适合初学者学习借鉴，欢迎来指导啊。
用html制作课表
g13700862269的博客
10-23 1485
</td>，如果有行合并用rowspan，步骤同上。<td rowspan="2">web表示层开发技术</td>第二步：在<body>下利用行<tr></tr>和列<td></td>打出大体的课程表。<td>web表示层开发技术</td><td>数字平面设计基础</td><td>班级人数：50</td><td>计算机应用基础</td><td>计算机应用基础
html课程表页面
热门推荐
Sunday CSDN博客
11-26 1万+
效果图： html代码部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>课程表</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head><body background="im
用HTML5编写一个课程表界面
DollyCat的博客
09-12 2330
方法：用li列表常见表格。 效果图如下 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; background:#fff; t
使用CSS控制表格设计出课程表实验内容：编写一个网页，内容为本学期本班的课程表，并使用CSS设计课程表的显示样式
GAVT的博客
09-28 2643
（1）编写一个网页，内容为课程表表格； （2）使用CSS美化 1.html ​ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实验1.2 使用CSS控制表格设计出课程表</title> <link rel="stylesheet" href="1.css"> </head
css实现课程表效果
m0_53282432的博客
05-05 244
css实现课程表效果。
利用html和css实现文字阴影立体感
06-11
要实现文字阴影立体感，可以利用CSS的text-shadow属性。以下是一个示例： ```html <p class="shadowed">Hello World ``` ```css .shadowed { text-shadow: 2px 2px 4px #000; } ``` 这个例子中，text-shadow属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值