搜索

如何只用HTML创建一个时间计划表？

web前端开发

共 2300字，需浏览 5分钟

 ·

2020-12-23 11:19

来源 | web前端开发（ID：web_qdkf)

在工作与生活中，我们需要经常排一些计划表，以便工作生活井然有序，但是在编程中，我们怎么只用HTML来实现一个表格呢？
今天我们一起动手来做一做这个时间计划表。
首先，我们都知道表格是由行和列的组成。我们每个人都可以通过HTML（超文本标记语言）的基础知识来创建一个时间计划表。
我们只需要通过使用HTML中的标记即可完成。
创建表的步骤：
  1. 创建一个标记。
  2. 使用标签
创建一个表。
  • 使用
    • 这是行标记在表中创建行。
  • 使用
    • 表数据标签将数据插入行中。
  • 关闭表格标签。 
  • 关闭html标记。
    • 这是用HTML创建的基本时间表，没有使用字体颜色和背景颜色。
    代码如下：
      
         
    计划时间表
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
     
                     width="100">
                         星期/时间
                         		                 width="100">                 01
    9:30-10:20                         		                 width="100">                 02
    10:20-11:10                         		                 width="100">                 03
    11:10-12:00                         		                 width="100">                 12:00-12:40                              width="100">                 04
    12:40-1:30                         		                 width="100">                 05
    1:30-2:20                         		                 width="100">                 06
    2:20-3:10                         		                 width="100">                 07
    3:10-4:00                         		 
     
                      星期一 HTML CSS JS                  
    中
    午
    休
    息
    时
    间
                         		                 height="50">HTML CSS 
     
                      星期二                              height="50">HTML             VUE PHP PS SPORTS 
     
                      星期三              VUE HTML CSS PHP                 height="50">JavaScript             
     
                      星期四              HTML webpack PHP                 height="50">JavaScript             PHP 
     
                      星期五                              height="50">JavaScript              HTML VUE Webpack CSS 
     
                      星期六              webpack CSS PHP                 height="50">JavaScript             SPORTS
    最终效果截图如下：

    上面只是一个非常简洁的表格，如果我们还想样式更加漂亮一些，我们还可以将表格的样式元素更丰富一些，例如给字体加一些颜色，不同的颜色，表示事情的重要程度不同；还有给表格加背景色，背景图像等。
    具体的大家可以去尝试一下。
    下面是我们为表格增加了一些简单样式后的效果：
    最后，记得把以下这些属性调整好即可。
    • align：左右对齐。
    • border：设置表格的边框（表格的边框宽度）
    • bgcolor：设置单元格或整个表格的背景色。
    • colspan：设置要跨越的列数。
    • rowspan：设置要跨越的列数。
    • cellspacing：在单元格之间创建空间。
    • cellpadding：在单元格内创建空间。
    • background：设置带有图像的表格背景。
    • width：设置表格的宽度。
    • height：设置桌子的高度。

    本文完〜


    浏览 48
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报
    评论
    图片
    表情
    推荐
    如何创建 Python 库
    AI悦创
    0
    Spring 如何创建 bean 对象？
    程序员书单
    0
    如何创建自己的电子名片？
    创建电子名片时，可根据个人业务和使用场景需求，设置多个名片模板。 1、进入小程序后点击【我的】--【我的名片】 2、点击【再建一张名片】 3、填写个人信息后点击【保存】，名片即创建成功。 【企业营销用纷传——再小的个体 都能轻松拥有自己的微网站】 https://api.leadshiptech.com/fcUserCard?card_id=88https://api.leadshiptech.com/fcUserCard?card_id=6 (二维码自动识别)
    纷传
    0
    如何创建高性能的索引
    愿天堂没有BUG
    0
    Spring 如何创建 bean 对象？
    WriteOnRead
    0
    如何创建 YGG 公会徽章
    人生代码
    0
    ReLaXed使用 HTML 或 Pug 交互式创建 PDF 文档
    ReLaXed 是一种使用 HTML 或 Pug（ HTML 的简写）交互式创建 PDF 文档的工具
    ReLaXed使用 HTML 或 Pug 交互式创建 PDF 文档
    0
    如何从NumPy直接创建RNN？
    Python大数据分析
    0
    如何从NumPy直接创建RNN？
    数据管道
    0
    如何使用 conda 创建 python 虚拟环境
    JAVA乐园
    0
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报