0
点赞
收藏
分享

微信扫一扫

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

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

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

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

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

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

创建表的步骤:

  1. 创建一个<html>标记。
  2. 使用标签<table> </ table>创建一个表。
  3. 使用<tr>这是行标记</ tr>在表中创建行。
  4. 使用<td>表数据</ td>标签将数据插入行中。
  5. 关闭表格标签。 
  6. 关闭html标记</ html>。

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

代码如下:

<!DOCTYPE html> 
<html>

<body>
<h1 align="center">计划时间表</h1>
<table border="5" cellspacing="0" align="center">
<tr>
<td align="center" height="50"
width="100"><br>
<b>星期/时间</b></br>
</td>
<td align="center" height="50"
width="100">
<b>01<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>02<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>03<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>04<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>05<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>06<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>07<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期一</b></td>
<td align="center" height="50">HTML</td>
<td align="center" height="50">CSS</td>
<td align="center" height="50">JS</td>
<td rowspan="6" align="center" height="50">
<h2>中<br>午<br>休<br>息<br>时<br>间</h2>
</td>
<td colspan="3" align="center"
height="50">HTML</td>
<td align="center" height="50">CSS</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期二</b>
</td>
<td colspan="3" align="center"
height="50">HTML
</td>
<td align="center" height="50">VUE</td>
<td align="center" height="50">PHP</td>
<td align="center" height="50">PS</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期三</b>
</td>
<td align="center" height="50">VUE</td>
<td align="center" height="50">HTML</td>
<td align="center" height="50">CSS</td>
<td align="center" height="50">PHP</td>
<td colspan="3" align="center"
height="50">JavaScript
</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期四</b>
</td>
<td align="center" height="50">HTML</td>
<td align="center" height="50">webpack</td>
<td align="center" height="50">PHP</td>
<td colspan="3" align="center"
height="50">JavaScript
</td>
<td align="center" height="50">PHP</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期五</b>
</td>
<td colspan="3" align="center"
height="50">JavaScript
</td>
<td align="center" height="50">HTML</td>
<td align="center" height="50">VUE</td>
<td align="center" height="50">Webpack</td>
<td align="center" height="50">CSS</td>
</tr>
<tr>
<td align="center" height="50">
<b>星期六</b>
</td>
<td align="center" height="50">webpack</td>
<td align="center" height="50">CSS</td>
<td align="center" height="50">PHP</td>
<td colspan="3" align="center"
height="50">JavaScript
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>

最终效果截图如下:


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

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

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

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

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

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

  • align:左右对齐。
  • border:设置表格的边框(表格的边框宽度)
  • bgcolor:设置单元格或整个表格的背景色。
  • colspan:设置要跨越的列数。
  • rowspan:设置要跨越的列数。
  • cellspacing:在单元格之间创建空间。
  • cellpadding:在单元格内创建空间。
  • background:设置带有图像的表格背景。
  • width:设置表格的宽度。
  • height:设置桌子的高度。


本文完〜

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


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



举报

相关推荐

0 条评论