css怎么制作课程表

在现代化的网站上，有一个常见的需求是需要展示课程表或时间表。这些课程表具有各种不同的格式和风格，但是使用CSS，我们可以轻松地设计并定制我们自己的课程表。

/* 第一步，定义表格样式 */table {
      border-collapse: collapse;
      width: 100%;
}
th, td {
      padding: 8px;
      text-align: center;
}
th {
      background-color: #f2f2f2;
      font-weight: bold;
}
/* 第二步，定义不同的时间段 */.time {
      font-weight: bold;
}
.morning {
      background-color: #fff7c6;
}
.afternoon {
      background-color: #d4f2e7;
}
.evening {
      background-color: #fcd5ce;
}
/* 第三步，定义不同的课程类型 */.math {
      background-color: #ffe0f0;
}
.history {
      background-color: #edd9b5;
}
.english {
      background-color: #d5efff;
}
    /* 第四步，输入实际内容 */table>
      tr>
        th>
    /th>
        th>
    星期一/th>
        th>
    星期二/th>
        th>
    星期三/th>
        th>
    星期四/th>
        th>
    星期五/th>
      /tr>
      tr>
        td class="time morning">
    上午/td>
        td class="math">
    数学/td>
        td class="history">
    历史/td>
        td class="math">
    数学/td>
        td>
    /td>
        td class="english">
    英语/td>
      /tr>
      tr>
        td class="time afternoon">
    下午/td>
        td class="history">
    历史/td>
        td>
    /td>
        td class="math">
    数学/td>
        td class="english">
    英语/td>
        td class="math">
    数学/td>
      /tr>
      tr>
        td class="time evening">
    晚上/td>
        td class="english">
    英语/td>
        td class="english">
    英语/td>
        td class="history">
    历史/td>
        td class="history">
    历史/td>
        td class="math">
    数学/td>
      /tr>
    /table>
    

以上代码会创建一个三行六列的表格，来展示我们的课程表。表格使用不同的颜色样式来区分不同的时间段和课程类型，而实际内容则填写到表格中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！