本文共 2725 字,大约阅读时间需要 9 分钟。
来源 | web前端开发(ID:web_qdkf)
在工作与生活中,我们需要经常排一些计划表,以便工作生活井然有序,但是在编程中,我们怎么只用HTML来实现一个表格呢?
今天我们一起动手来做一做这个时间计划表。
首先,我们都知道表格是由行和列的组成。我们每个人都可以通过HTML(超文本标记语言)的基础知识来创建一个时间计划表。
我们只需要通过使用HTML中的<table>标记即可完成。
创建表的步骤:
创建一个<html>标记。
使用标签<table> </ table>创建一个表。
使用<tr>这是行标记</ tr>在表中创建行。
使用<td>表数据</ td>标签将数据插入行中。
关闭表格标签。
关闭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:设置桌子的高度。
本文完〜
转载地址:http://inbpi.baihongyu.com/