利用html制作课程表

Lwr0828

已于 2023-09-13 07:59:06 修改

阅读量2.4k

点赞数 3

文章标签： html css 前端

于 2023-09-13 01:02:14 首次发布

本文链接：https://blog.csdn.net/2301_79706999/article/details/132843535

版权

学习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>

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