table制作课程表案例

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： html 基础 文章标签： javascript css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45935734/article/details/115952390
版权

table制作课程表

代码如下：

<body>
  <h3 align="center">课程表</h3>
  <table align="center" border="1" bordercolor="green" widt h="600" height="300">
    <tr>
      <td align="center">项目</td>
      <td align="center" colspan="5">上课</td>
      <td align="center" colspan="2">休息</td>
      <!-- <td></td> -->
      <!-- <td></td>
	  <td></td>
	  <td></td>
	  <td></td> -->
    </tr>
    <tr>
      <td align="center">星期</td>
      <td align="center">星期一</td>
      <td align="center">星期二</td>
      <td align="center">星期三</td>
      <td align="center">星期四</td>
      <td align="center">星期五</td>
      <td align="center">星期六</td>
      <td align="center">星期日</td>
    </tr>
    <tr>
      <td align="center" rowspan="4">上午</td>
      <td align="center">语文</td>
      <td align="center">数学</td>
      <td align="center">英语</td>
      <td align="center">英语</td>
      <td align="center">物理</td>
      <td align="center">计算机</td>
      <td align="center" rowspan="4">休息</td>
    </tr>
    <tr>
      <td align="center">数学</td>
      <td align="center">数学</td>
      <td align="center">地理</td>
      <td align="center">历史</td>
      <td align="center">化学</td>
      <td align="center">计算机</td>
      <!-- <td></td> -->
      <!-- <td></td> -->
    </tr>
    <tr>
      <td align="center">化学</td>
      <td align="center">语文</td>
      <td align="center">体育</td>
      <td align="center">计算机</td>
      <td align="center">英语</td>
      <td align="center">计算机</td>
      <!-- <td></td> -->
      <!-- <td></td> -->
    </tr>
    <tr>
      <td align="center">政治</td>
      <td align="center">英语</td>
      <td align="center">体育</td>
      <td align="center">历史</td>
      <td align="center">地理</td>
      <td align="center">计算机</td>
      <!-- <td></td> -->
      <!-- <td></td> -->
    </tr>
    <tr>
      <td rowspan="2" align="center">下午</td>
      <td align="center">语文</td>
      <td align="center">数学</td>
      <td align="center">英语</td>
      <td align="center">英语</td>
      <td align="center">物理</td>
      <td align="center">计算机</td>
      <td align="center" rowspan="2">休息</td>
    </tr>
    <tr>
      <td align="center">数学</td>
      <td align="center">数学</td>
      <td align="center">地理</td>
      <td align="center">历史</td>
      <td align="center">化学</td>
      <td align="center">计算机</td>
      <!-- <td></td> -->
      <!-- <td></td> -->
    </tr>
  </table>
</body>

html效果：

课程表

项目上课休息
星期星期一星期二星期三星期四星期五星期六星期日
上午语文数学英语英语物理计算机休息
数学数学地理历史化学计算机
化学语文体育计算机英语计算机
政治英语体育历史地理计算机
下午语文数学英语英语物理计算机休息
数学数学地理历史化学计算机

此处部分效果并未完全显示（比如颜色）
编辑器里面代码最终效果如下
在这里插入图片描述
拓展：table制作项目增补表案例

总结

以上是对table制作课程表案例的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌

@码上行动
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table 表格实例
qq_42904381的博客
09-10 2158
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;HTML实例&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt
用< table>、< tr>、< td>表格标签编写课程表
weixin_45943199的博客
04-10 1713
表格编写课程表 接上篇文章，利用表格标签，设置属性，调节部分代码内容，粗略编写课程表。 下面展示一些 内联代码片。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>课程表</title> <style> table{table-layou...
table示例代码
06-15
table中的各个标签与属性的示例代码展示。大家可以用来参考下
使用table实现一个课程表
qq_42307546的博客
02-26 714
【代码】使用table实现一个课程表。
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 1961
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
table案例
yikusitian_的博客
06-25 272
table案例
Table表复杂表头.zip
07-08
Html5 JavaScript jquery PC端， 前端使用JavaScript静态导出Table 复杂表头，固定table复杂表头
HTML的dl、dt、dd标记制作表格对决Table制作表
09-28
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。现在，越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局...
vue v-for的使用案例：课程表
08-05
使用v-for循环展示表格数据，主要是解决平常表格中内容同与不同的问题，显示出与excel展示内容相似的效果。
基于Bootstrap table组件实现多层表头的实例代码
08-29
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
jQuery表格(Table)基本操作实例分析
12-04
本文实例讲述了jQuery表格(Table)基本操作。分享给大家供大家参考，具体如下： Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。 首先建立一个通用的表格css 和一个 表格Table： table { border-collapse: collapse; border-spacing: 0; margin-right: auto; margin-left: auto; width: 800px; } th, td { border: 1px solid #b5d6e6; font-size: 12px;
ng-table实例
12-15
(function() { "use strict"; var app = angular.module("myApp", ["ngTable", "ngTableDemos"]); app.controller("demoController", demoController); demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList"]; function demoController(NgTableParams, simpleList) { this.tableParams = new NgTableParams({ filter: { surname: 'Ch' } }, { filterOptions: { filterLayout: "horizontal" }, dataset: simpleList }); this.nameFilterDef = { name: { id: "text", placeholder: "First name" }, surname: { id: "text", placeholder: "Surname" } }; } app.controller("dynamicDemoController", dynamicDemoController); dynamicDemoController.$inject = ["NgTableParams", "ngTableSimpleMediumList"]; function dynamicDemoController(NgTableParams, simpleList) { this.cols = [{ title: "Full Name", filter: { name: { id: "text", placeholder: "First name" }, surname: { id: "text", placeholder: "Surname" } }, show: true, valueExpr: 'item.name + " " + item.surname' }, { title: "Age", filter: { name: "number" }, show: true, valueExpr: 'item.age' }]; this.tableParams = new NgTableParams({ filter: { surname: 'Ch' } }, { filterOptions: { filterLayout: "horizontal" }, dataset: simpleList }); } })(); (function() { "use strict"; angular.module("myApp").run(setRunPhaseDefaults); setRunPhaseDefaults.$inject = ["ngTableDefaults"]; function setRunPhaseDefaults(ngTableDefaults) { ngTableDefaults.params.count = 5; ngTableDefaults.settings.counts = []; } })();
JTable实例大全
04-16
里面包含有很全的JTable实例，如合并表头，合并表格，等等，已经打包成JAR
js动态操作table实例
05-31
NULL 博文链接：https://lee20101029.iteye.com/blog/870156
Table 例子
Just do it!
06-03 852
例子一： package tableDemo3; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent
table案例一
anhaogou8771的博客
02-02 433
实现效果： html <style> #mform{ margin: 10px; } #mtable{ border-collapse: collapse; } #mtable thead th,#mtable thead td{ min-width: 120px; } #mdiv{ display: none; } </style&...
用table表格建立一个课程表
只有自己觉到悟到的，才是自己的。
09-26 2037
用table表格建立一个课程表 首先看看预期效果：
0320-table表格应用实例
LPDFIGHT的博客
03-20 281
0320-table表格应用实例
qt table做课程表
12-26
Qt table是一种用来显示和管理数据的控件，可以用来制作课程表。首先，我们可以使用Qt提供的控件和布局来创建课程表的界面，包括表格用来显示课程信息和按钮用来操作课程表。然后，我们可以使用Qt的信号和槽机制来实现课程表的交互功能，比如添加课程、删除课程和修改课程信息等操作。同时，还可以使用Qt提供的模型视图框架来实现课程表的数据模型，从而实现对课程表数据的有效管理和展示。除此之外，还可以利用Qt的样式表功能来对课程表的界面进行美化，使其更加直观和易用。总之，借助Qt table控件和其他丰富的功能，我们可以很方便地实现一个功能完善的课程表应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值