[分享]css制作课程表代码

CSS（层叠样式表）是网页设计中必不可少的一部分。学习如何使用CSS来制作课程表是一个很好的开始。下面是一个简单的课程表代码样例。table { bordercollapse: collapse; w...

CSS（层叠样式表）是网页设计中必不可少的一部分。学习如何使用CSS来制作课程表是一个很好的开始。下面是一个简单的课程表代码样例。

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
} 

以上代码可以将HTML的

标签转换成一个具有样式和美观的课程表。使用CSS表格样式，将表格和单元格的宽度和边框设置为合适的值，以便确保表格可读并且易于查看。通过添加背景色和字体颜色，可以使表头更具可读性。我们还可以使用tr:nth-child(even)选择器轻松地给课程表单元格添加背景颜色。

下面是HTML代码和CSS代码的结合使用例子:

<table>
  <tr>
    <th>课程名称</th>
    <th>上课时间</th>
    <th>教室地址</th>
  </tr>
  <tr>
    <td>语文</td>
    <td>星期一下午3:00-4:30</td>
    <td>教学楼102室</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>星期二上午9:00-10:30</td>
    <td>教学楼203室</td>
  </tr>
</table> 

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
} 

使用CSS编写代码可以为课程表增加更多样式，比如改变字体颜色、字体大小、添加边框等等。通过不断地实践，你会发现CSS可以为网页设计带来更强大的功能。