如何只用HTML创建一个时间计划表? 您所在的位置:网站首页 每日计划表怎么设计 如何只用HTML创建一个时间计划表?

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

2023-10-19 10:32| 来源: 网络整理| 查看: 265

来源 | web前端开发(ID:web_qdkf)

在工作与生活中,我们需要经常排一些计划表,以便工作生活井然有序,但是在编程中,我们怎么只用HTML来实现一个表格呢?

今天我们一起动手来做一做这个时间计划表。

首先,我们都知道表格是由行和列的组成。我们每个人都可以通过HTML(超文本标记语言)的基础知识来创建一个时间计划表。

我们只需要通过使用HTML中的标记即可完成。

创建表的步骤:

创建一个标记。

使用标签 创建一个表。

使用这是行标记在表中创建行。

使用表数据标签将数据插入行中。

关闭表格标签。 

关闭html标记。

这是用HTML创建的基本时间表,没有使用字体颜色和背景颜色。

代码如下:

计划时间表 星期/时间 019:30-10:20 0210:20-11:10 0311:10-12:00 12:00-12:40 0412:40-1:30 051:30-2:20 062:20-3:10 073:10-4:00 星期一 HTML CSS JS 中午休息时间 HTML CSS 星期二 HTML VUE PHP PS SPORTS 星期三 VUE HTML CSS PHP JavaScript 星期四 HTML webpack PHP JavaScript PHP 星期五 JavaScript HTML VUE Webpack CSS 星期六 webpack CSS PHP JavaScript SPORTS

最终效果截图如下:

上面只是一个非常简洁的表格,如果我们还想样式更加漂亮一些,我们还可以将表格的样式元素更丰富一些,例如给字体加一些颜色,不同的颜色,表示事情的重要程度不同;还有给表格加背景色,背景图像等。

具体的大家可以去尝试一下。

下面是我们为表格增加了一些简单样式后的效果:

最后,记得把以下这些属性调整好即可。

align:左右对齐。

border:设置表格的边框(表格的边框宽度)

bgcolor:设置单元格或整个表格的背景色。

colspan:设置要跨越的列数。

rowspan:设置要跨越的列数。

cellspacing:在单元格之间创建空间。

cellpadding:在单元格内创建空间。

background:设置带有图像的表格背景。

width:设置表格的宽度。

height:设置桌子的高度。

本文完〜



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有