首页 前端知识 利用html制作课程表

利用html制作课程表

2024-05-13 11:05:29 前端知识 前端哥 533 228 我要收藏

       学习html中的表格table章节后,可以制作一些表格、课程表等,可以更清晰地呈现信息。以下分享内容是结合自己的课程,制作的一张简单的课程表。

效果图如下:

步骤:1.插入一个五行六列的表格 

          <table> </table>定义表格标签 

          <tr></tr>定义行标签 

          <td></td>定义列标签

          2.嵌入css修改样式

          border属性指定元素边框的样式、宽度和颜色

          border-collapse属性表示表格的两边框合并为一条

          margin属性设置外边距

          text-align属性用于设定元素内文本的水平对齐方式  center:居中

          height属性设置元素的高度

          width属性设置元素的宽度

          background-color属性设置背景颜色

代码如下:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="{CHARSET}">
  <title></title>
  <style type="text/css">
   table{
    border: 5px solid grey;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
   }
   tr{
    height: 60px;
   }
   td{
    border: 5px solid grey;
    width: 200px;
   }
   #pinkTr{
    background-color: pink;
   }
   .blueTd{
    background-color: cornflowerblue;
   }
   .redTd{
    background-color: palevioletred;
   }
   .aquaTd{
    background-color: aqua;
   }
   .yellowTd{
    background-color: yellow;
    
   }
   .aquamarineTd{
    background-color: aquamarine;
    
   }
   .greenTd{
    background-color: greenyellow;
   }
   .orangeTd{
    background-color: orange;
   }
   
  </style>
 </head>

 <body>
  <table>
   <tr id="pinkTr">
    <td></td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
   </tr>
   <tr id="pinkTr">
    <td >第一二节</td>
    <td></td>
    <td class="blueTd">人工智能与应用<br/>徐国清<br/>S1316</td>
    <td class="redTd">企业网站综合实训<br/>付显<br/>S1419</td>
    <td class="aquaTd">信息安全<br/>华隆<br/>S1520</td>
    <td></td>
   </tr>
   <tr id="pinkTr">
    <td>第三四节</td>
    <td class="yellowTd">形式与政策<br/>赵国锋<br/>X2404</td>
    <td></td>
    <td></td>
    <td class="aquamarineTd">前端框架技术<br/>岳小冰<br/>S1417</td>
    <td class="greenTd">计算机网络基础<br/>任海留洋<br/>S2408</td>
   </tr>
   <tr id="pinkTr">
    <td>第五六节</td>
    <td class="redTd">企业网站综合实训<br/>付显<br/>S1419</td>
    <td></td>
    <td></td>
    <td class="orangeTd">影视编辑与合成<br/>庞士昱<br/>S2410</td>
    <td></td>
   </tr>
   <tr id="pinkTr">
    <td>第七八节</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="orangeTd">影视编辑与合成<br/>庞士昱<br/>S2410</td>
   </tr>
  </table>
 </body>

</html>

其中我们需要注意几点内容:

  • 用class标记后在head的css中应该用".xxxx"设置,id标记的内容在css中用“#xxx”设置。
  • 使用tr标签来定义表格的行,使用td标签来定义表格的数据单元格。

以上就是我利用HTML、css制作的课程表                                                    如有疑问,欢迎提问。

    

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8583.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!